前端工程师的SEO优化

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

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

网络爬虫爬取规则

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

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

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

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

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

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

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

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

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

页面体积不要过大

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

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

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

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

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

<div></div></br></br>
<div></div>

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

慕课网关键字和描述信息

用于meta元标签：<meta name="robots" content="nofollow" />
//告诉爬虫该页面上所有链接都无需追踪。

用于a标签：<a href="login.aspx" rel="nofollow">登录</a>
//告诉爬虫该页面无需追踪。

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

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

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