一个网站从使用权限的角度可以分为网站前台和后台，从代码的角度一般把展现给用户浏览的页面称之为前端，而不让用户浏览的页面则为后端代码。前端页面除了要求美观大方，还需要在性能、浏览器兼容、不同设备上兼容具有良好的表现，而前端页面的SEO优化只是前端代码优化中不足挂齿的一个过程，甚至可以忽略不计；但是这一个很细微的小过程却可以对网站后期的浏览量带来至关重要的影响。
前端设计网站的SEO优化就如同盐一样，多了味苦，没有又难以下咽，只有恰到好处才能是美味佳肴。由于前端设计人员是不懂SEO优化的，他们只在乎页面的美观，代码的执行效率和浏览器的兼容性，网站上线之后SEO优化人员又需要再一次对代码进行审查和优化改进。
在这个过程中，因为代码的修改难免会使得之前设计好的css或js做出相关的变动，这对于前端开发人员来说是及其不情愿的事情，并不是不愿意修改，而是非常麻烦。我们都知道有些css代码更改一处，可能会影响到网站很多页面的排版混乱。
如果前端设计在一开始就带着SEO优化的目的去设计页面，那么以上问题就不会出现了。前端设计中的SEO优化有需要哪些值得注意和需要的代码呢？
01不利于搜索引擎收录的代码
在SEO优化中，由于搜索引擎对某些前端代码是无法识别的，所以要避免使用。
①iframe框架，搜索引擎对于iframe框架的内容是无法识别的，在设计页面时要避免使用这种方式来加载页面内容。
②慎用JS代码来控制内容，搜索引擎不识别JS里面的内容，现在经过各种技术的革新之后虽然搜索引擎也可以抓到一些JS，但是很JS技术会增加搜索引擎收录内容的难度。由于一些特殊功能的实现由不得不用，所以要避免在那些需要被搜索引擎收录的内容上尽量不使用。
SEO优化③将文字写在图片上，有时候为了页面的美观，后台发布内容后前端会把相关的数据输出为一张图片，比如map技术，通过填写相关数据，前台生成一张统计图片，这样是不利于优化的。
④懒加载技术，懒加载是根据用户打开页面后的可视窗口进行内容加载，常用于图片和长页面的加载，这种技术实用但是不利于优化，最好不要使用。
02TDK代码的优化
TDK是构成页面的核心组成部分，有很多网站全站的标题都是一样的（不要觉得这是多余的提醒，实际上现在还有很多的网站是这样），保证每个页面的title是独立的，在网站后台能够为每一个页面单独增删改。
①title标签使用一种固定的格式，比如“当前页面的标题+栏目名称+网站名称”，内容分页自动加上页码来区分等。
②keywords和description标签不能省略，虽然这些不需要做前端开发的人去添加内容，但是你需要把内容编辑添加的这些内容在页面代码上展示出来。有一些网站觉得描述和关键词不重要，直接去掉不写，让搜索引擎自己根据内容来判断（当然也是可以的），但是搜索引擎毕竟没有我们主动填写的关键词和描述准确。
03代码的精简和编码的规范
代码精简并不是说要少写，而是对于那些重复使用的css和JS代码尽量整合到一个文件里面，减少前端用户在访问页面时对服务器文件的请求次数。
严格按照div+css的规范来编写代码，说到规范问题，不得不说很多的前端不喜欢按照w3c的标准来编写，不得不说有点遗憾。比如标题使用h标签，虽然用div配合css也可以实现相同的视觉效果，但是对于搜索引擎来说这是不一样的，h1代表当前页面的标题，p是内容部分；图片必须写在img标签里面，即使将图片放在css的background里面也可以达到相同的效果，但是搜索引擎对待img标签和background两种图片的处理方式完全不一样，img里面的图片会被收录，而在background里面的图片会被当作网站的一个元素来处理，不予收录理会。
SEO艺术（第3版）京东好评率97%无理由退换京东配送官方店旗舰店￥.8购买像这类图片代码如果是已经成型的前端页面，再经过SEO优化的一番整顿，二次修改不亚于重新设计一遍代码，所以有很多时候前端是比较讨厌做SEO优化人员的。
所以把css写在一个文件里面，同一个页面尽量不加载太多的css文件和JS文件，提高页面的加载速度有利于搜索引擎对内容的抓取收录。
04添加对搜索引擎友好的代码说明
这个主要表现在一些搜索引擎对SEO优化的特别标签处理上，这个对于前端设计来说他们几乎不会