前端工程师的SEO优化

seo就是搜索引擎优化，通过优化手段让搜索引擎更加高效地抓去到你的页面，从而在搜索结果中排前。当然了，对于度娘来说，钱是最好的优化方法（手动滑稽）

既然要考虑如何做好SEO，那么首先就要理解网络爬虫这只“小蜘蛛”的是按照什么样的规则去抓去页面，我们就能针对性地作出能吸引“小蜘蛛”过来“觅食”的反应

网络爬虫爬取规则

一、内容原创

这是最重要的一点，以百度为例，爬虫每天进行运作，都会记录它爬过的内容性质，那么就会对抓取内容进行筛选。独一无二的文章内容就是蜘蛛最喜欢的“食物”。

二、内容之间的相关性

蜘蛛对我们的内容并没有理解性，它只会对词语或句子进行判断。拿现在的百度来说，网站的内容越具有相关性，或者文章的内容和标题越具有相关性。被收录的可能性就越大

三、抓取顺序，从上到下，从左到右，广度遍历

爬虫对页面的爬取顺序是从上到下，从左到右的，先爬取的部分权重更高。而且，大部分情况下爬虫会优先爬取第一层级页面内容，再去爬取第二层级，依次往下（也存在优先爬取纵深的算法，不过并不常见）。越往后元素的权重就越小。

四、工作机制

还是以百度为例，通过百度蜘蛛拿到的页面先放到补充数据区，再通过各种程序的计算，比如对比整站内容、多次爬取对比自身内容等，再放入检索区，再形成相对稳定的排名

通过以上分析可得，要想推广一个网站，少不了对这个网站的运营，比如保持更新频率，站外引流，持续添加站内引流信息等等。作为一个优秀前端工程师，在开发网站的时候就需要保持对SEO的敏感性。下面我将从网页布局优化和代码优化两个角度分析我们在开发的时候可以对SEO优化这个步骤做哪些事情。

网页布局优化

扁平化结构

顾名思义，在设计网站整体架构的时候，层级不要过于复杂。通常蜘蛛最多爬取到三层，再往下效率就非常低了。

控制网站首页链接的数量

链接数量不要太少，保证和其他页面的相关性；也不要太多，增加爬虫的负担。通常在100以内即可

导航优化

最好使用文字作为导航，更易被蜘蛛识别。如果一定要使用图片链接，一定要加上alt和title属性进行说明。

使用面包屑导航，不仅提高用户体验，还能增大页面间的相关性

页面大小

页面体积不要过大

其他细节

在各种细节注意页面的相关性以及页面的层级复杂程度

以翻页控件为例，我们通常可以见到三种实现方式

• 第一种：【上一页】【当前页码】【下一页】。对爬虫来说，每一页都是一个纵深层级

• 第二种：【上一页】[1][2][3][4]...【下一页】。比上一种方案要好，对部分页码进行平铺，当前页码和周围页码相差一个层级

• 第三种：【页码】【下拉框】。通过下拉框选择页数。所有页面都在下一个层级，对蜘蛛最友好（当然这种方案对用户体验就不太友好了【摊手】）

  
  
  

代码优化

语义化标签

小蜘蛛也是认识标签的，h5新增的许多语义化标签都可以被小蜘蛛识别，并且有不同的权重值

比如小蜘蛛看到h1标签就知道这是网站的标题，一定包裹了重要的信息，看到P就知道是正文，看到strong就知道是强调内容，等等等等，和整个页面都是div搭建起来相比，语义化标签无疑让小蜘蛛走的更加顺利，让他知道什么是重点。

这里容易被忽略的一点是，br的含义是文本回车，所以不要为了空行而在标签之间写上br。

• 错误写法

• 正确写法（慕课网案例）

  
  
  

标题，关键字，描述

页面的标题、关键字、描述也是优先爬取的内容，并且如果他们之间，以及他们和网站内容之间的的相关性越大，就会越容易被收录

慕课网关键字和描述信息

其他

1. 添加a标签的rel属性用于描述链接，增强页面内部相关性。如果是需要爬取的外部链接，写成nofollow

用于meta元标签：
//告诉爬虫该页面上所有链接都无需追踪。

用于a标签：登录
//告诉爬虫该页面无需追踪。

2. 页面重要的部分放在前面。比如一个网站，布局为广告位位于左侧，正文位于右侧，html结果也最好把广告位放在下方，通过浮动设置到左侧
3. 重要信息不要使用js输出
4. 不使用iframe，爬虫获取不到其中的信息
5. 爬虫会过滤样式为display:none的部分

其它Tips

1. 重要内容放在前面
2. 不要使用js输出重要内容
3. 不使用iframe
4. display:none属性会过滤

小结

网页布局优化和代码优化是从前端开发的角度实现SEO。可以更加直观地这样理解 ：我们的目的就是吸引这只“小蜘蛛”过来“吃东西”。

• 首先，我们要放出它喜欢的食物，即原创内容
• 其次，让它知道我们这里有许许多多相互关联的食物，让它呆的久一点，即内容具有相关性
• 然后呢，还要考虑到它的用户体验，让它寻找食物的路更加顺利，这一步就是合理的页面排版和结构，以及它能够识别的信息
• 最后，就是保证重要的信息让小蜘蛛能吃到，并且优先吃到，即考虑到元素设置的权重

对于一些推广需求强的商业性网站，前端工程师在开发的时候需要养成良好的开发习惯，把seo优化作为一种规范。这是整个站点搜索引擎优化的有力武器。

参考资料：
百度蜘蛛抓取规则