前端开发人员应考虑哪些SEO优化技巧

前端开发人员需要具备哪些SEO优化技巧

前端开发工程师不仅需要要跟视觉设计师、交互式设计师配合，完美还原设计图稿，编写兼容各大浏览器、加载速度快、用户体验好的页面。现在还需要跟SEO人员配合，调整页面的代码结构和标签。一些成熟的平台，在开发初期并没有考虑优化问题，所以做出来的页面，就算是效果很炫，功能很强，但是对搜索引擎非常的不友善。任何一个成熟的网站，后期页面都是动辄几百万的，到这个时候再来调整结构，既费时又费力，最怕的还是会影响到排名和收录。

所以说与其在后期碰到问题再来调整，还不如把问题解决在源头。我本人也是从事前端开发工作的，下面把我工作过程中，积累的几个开发过程中就需要做好的SEO优化技巧，分享给大家。

1、简化代码结构，更利于搜索引擎分析抓取有用内容：页面尽量采用DIV+CSS，当然，表格展现模式用table还是比div方便很多的所有js、css采用外联方式，图片采用css精灵，减少请求次数。看下下面同样的内容，用div和talbe布局的代码比较，显而易见用div简便的多。

2、重要内容优先加载(第一个链接最好是网站主关键词，不刻意要求)，可以用css来处理，索引一篇文章的长度也是有限制的，一定要把最重要的内容，优先展现给蜘蛛，这方面你可以通过查看一些比较大的网页快照来求证。

3、每个页面只能出现一次H1标签，H2标签可以多次：H1权重很高，普遍认为仅次于title，一般资讯详情页的标题、商品详情页的标题，都放在H1里。

4、图片一定要添加alt属性，title属性可选：蜘蛛不认识图片上的内容，只能通过alt属性来判断，如果是商品列表页，所有商品都加了alt和title的话，容易造成堆砌关键词，所以我一般是只加alt属性。

5、图片大小声明：如果图片大小不做定义的话，页面需要重新渲染，就会影响到加载速度。

6、链接可根据需求添加title属性以及nofllow值非特殊性链接，链接地址一定要写入herf属性，有些前端开发人员为了省事，直接用div加个click事件当链接，在视觉上和使用上确实是实现了链接效果，但是做过SEO优化的人

员都知道，蜘蛛目前对于js的支持很差，基本无法读取里面的链接地址。所以说用click事件是绝对不允许的，特别是一些重要的导航链接。

7、页面内容尽量不要做成flash、图片、视频，这些东西蜘蛛是抓不到的，就算是必须的，也要生成相应的静态页面。有很多企业站看着很炫，全站flash，老板看着是爽了，做SEO优化的人员就要抓狂了，全站没一个链接。

8、除首页外别的页面最好要加上面包屑型导航，导航结构一定要清晰。

9、做好404页面，一般会加首页链接及错误提示，并测试其返回状态码为404：1、用户体验友好，可以留住用户，不至于直接关闭页面2、蜘蛛友好，可以返回抓取其他页面。

10、网站结构呈扁平状树型，目录结构不宜过深，每个页面离首页最多点击不超过3次，过深不利于搜索引擎的抓取。

近几年来，SEO在国内得到了蓬勃的发展，其中很多的SEO技术越来越体现在web前端的一些细节上。要做好SEO，web前端这一块也要做必不可少的优化。

这就要求我们WEB前端工程师在开发页面的时候，要写出规范标准的代码，符合SEO，做好用户体验。

以下是一些在平时工作中总结的一些前端开发中的SEO注意点，其实很多也是前端的基础知识，仅供大家参考。

1、网站布局要做到样式与页面分离，删除页面中不必要的标签和元素。

2、页面生成要尽量小，要压缩页面的大小，页面尽量使用静态或伪静态。

3、所有的CSS、JS都要使用外部调用。

4、外部调用的JS文件的代码能放在底部的尽量放在底部，页面调用的css文件的代码尽量都放在head内，同一页面尽量不要超过3个JS外部调用。

5、每个页要只能出现一次H1标签，H2~H6标签可以多次，这样做是为了加重H1标签的权重。

6、除首页外别的页面要加面包屑型路径，导航一定要清晰。

7、网站一定要兼容脑残的IE各版本和FF等主流浏览器，这个虽然感觉对SEO影响不大，但是作为前端，这也是最基本的吧。

8、图片一定要添加alt属性，链接一定要添加title属性。

9、网站结构呈扁平状树型，目录结构不宜过深，每个页面离首页最多点击3次，过深不利于搜索引擎的抓取。

10、做好404页面，并测试其返回状态码为404。

11、确保网站代码无误，HTML能通过W3C版本。

---