从SEO优化的角度来设计前端页面，这些代码收藏备用

一个网站从使用权限的角度可以分为网站前台和后台，从代码的角度一般把展现给用户浏览的页面称之为前端，而不让用户浏览的页面则为后端代码。前端页面除了要求美观大方，还需要在性能、浏览器兼容、不同设备上兼容具有良好的表现，而前端页面的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优化的一番整顿，二次修改不亚于重新设计一遍代码，所以有很多时候前端是比较讨厌做SEO优化人员的。

所以把css写在一个文件里面，同一个页面尽量不加载太多的css文件和JS文件，提高页面的加载速度有利于搜索引擎对内容的抓取收录。

04添加对搜索引擎友好的代码说明

这个主要表现在一些搜索引擎对SEO优化的特别标签处理上，这个对于前端设计来说他们几乎不会关注，因为不会用到，如果提前就添加好，可以少做返工。

①认识nofollow标签的使用方法，在对待链接到其他网站的超链接，适当添加nofollow来减少权重的流失。

②图片增加alt描述，使每一张图片也能被收录，图片被收录后为网站带来流量也是很可观的。

③权威标签canonical的使用，对同一个页面拥有多个不同的URL可以访问时，要把哪一个作为正规的入口，在head标签里面添加<link href="当前页面权威的绝对URL地址" rel="canonical" />，提前设置好避免返工。

④禁止页面被转码，对于PC和移动不同宽度的页面，搜索引擎为了更好地展现页面会将PC进行页面转码，禁止转码的方法是是在head标签里面添加如下代码。

⑤添加移动适配代码，针对自适应页面或拥有独立PC、移动页面要添加有利于搜索引擎收录的相关代码，比如自适应（PC和移动页面url一样）在head标签内添加如下代码。

05使用JS和nofollow屏蔽链接

奇怪了，前面不是说要尽量让搜索引擎识别内容不要使用搜索引擎不认识的代码吗？你没看错，就是要屏蔽！针对有一些内容我们并不希望被收录和抓取，所以可以使用JavaScript的方法来进行处理，并加上nofollow屏蔽链接跟踪。

一个页面上有的内容是需要被收录的，也有的内容是不需要被收录，这些是需要在写代码时就考虑到。