SEO：译为搜索引擎优化，搜索引擎优化技术现在随着百度，谷歌，搜狗等搜索引擎的兴起，越来越火爆，那今天，我们一起来看看，SEO和前端有着怎样千丝万缕的联系~

SEO的由来：早在90年代国外便有了SEO的概念，曾经由于谷歌的SEO，导致很多媒体行业的不满。

后来大约03年，由于一款游戏（传奇私服），各种私服产业恶性竞争，慢慢的，SEO在中国逐渐商业化。

SEO分类：SEO主要分为白帽SEO和黑帽SEO，就像白帽黑客和黑帽黑客一样。

白帽SEO：改良网站设计规范，使网站对搜索引擎和用户更加友好

黑帽SEO：利用搜索引擎缺陷和搜索算法来获取更多用户访问量。因此搜索引擎一旦发现使用“黑帽”技术的网站，轻则降低其排名，重则从搜索结果中永远剔除该网站。选择黑帽SEO服务的商家，一部分是因为不懂技术，在没有明白SEO价值所在的情况下被服务商欺骗；另一部分则只注重短期利益，存在赚一笔就走人的心态。

SEO原理：

1、页面抓取：蜘蛛向服务器请求页面，获取页面内容，深度抓取，广度抓取。百度蜘蛛目前对含有图片和JS效果的代码抓取不利，因此网站上有图片的地方应加上alt标签来迎合搜索引擎抓取习惯。

2、分析过滤：在SEO优化原理中蜘蛛会将内容质量低，用户体验不好的网页过滤掉，保留高质量的网页然后存入索引库中。

3、检索排序：当用户检索关键词时，从收录的页面中按照一定的规则进行排序，并返回给用户结果。高质量的页面放入重要的索引库会优先被展示和推荐出来，低质量的网页只能存放在普通库中。

接下来，看一下，前端写代码的时候，需要注意哪些跟SEO相关的问题~

从页面代码结构来看：

1、尽量提高页面加载速度，例如精灵图，引入CDN等等。

2、css，js和html分离，有利于搜索引擎抓取有用的内容。

3、让重要内容优先加载。搜索引擎蜘蛛爬行抓取页面的顺序是从上到下，从左到右面包屑导航。

四处一词：搜索引擎优化要在页面中关键的四个地方都出现同一个关键词，分别是下面这四个

1、当前页面的title上出现这个关键字，最最最最最重要的东西，要放在description和keywords之前。

2、当前页面的keywords和description中出现这个关键字

3、当前页面的内容里多次出现这个关键词，并且在第一次出现的时候，加粗

4、其他页面的锚文本里，出现这个关键词

那么在写标签的时候，我们也可以对标签进行优化，例如：

1、H1-H6标签，这些标签在页面中占据着重要的位置，其中H1标签可以说是除TITLE外网页的最重要的另一个标签。这里需要注意的是要慎用H1，不要过多使用，否则被搜索引擎处罚。

2、Strong 仅次于 H1关键词强调关键词强调关键词强调权重次于上面的。一个页面只要加2-5次就差不多了，具体还要根据页面大小而定。

3、Img标签要加上alt属性，title属性可选，如果商品详情页，都写上了title和alt，容易造成关键词堆砌，所以一般建议只加alt属性。

4、a链接可根据实际需求添加title属性和nofollow属性。nofollow这个标签的意义是告诉搜索引擎”不要追踪此网页上的链接或不要追踪此特定链接”。

5、Iframe标签：蜘蛛一般不会读取里面的内容。

# 总结

当然，真正的SEO还需要很多硬核的技术，那今天总结的，就是我们在做前端的时候需要用到的注意事项啦，小伙伴快点GET起来吧~