HTML：SEO优化之旅

HTML：SEO优化之旅

一、何为SEO

• SEO（Search Engine Optimization），即搜索引擎优化；
• SEO是随着搜素引擎的出现而来的；
• 他的存在是为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置，是的用户在搜索网站时能排在前面；

二、SEO能做什么

1. 大于网站的标题、关键字、描述进行设置，反映网站的定位，让搜索引擎明白该网站时干什么的；
2. 内容优化：内容与关键字的对应，增加关键字密度；
3. 在网站上合理设置Robot.txt文件；
4. 生成针对搜索引擎友好的网站地图；
5. 增加外部链接，到各个网站上宣传；

三、如何做好SEO

网页结构优化

1. 控制首页链接的数量。网站首页时权重最高的地方，若首页的链接太少，不利于爬虫继续往下爬页面，会影响到网站的收录数量；若首页链接太多，又不利于用户找到自己想要的链接，还会降低各内页的权重，影响收录效果。
2. 扁平化的目录层次。尽量让网页爬虫在3层内能够到达所有内页；
3. 优化导航。导航采用文字方式，也可以采用图片，但<img>标签必须添加alt和title属性，以告诉爬虫导航的定位；如果可以，尽量加上面包屑导航，可以帮助用户熟悉整个网站的组织形式，也可以方便爬虫爬取，降低跳出外页的概率；
4. 网站的布局。

• 页面头部：logo，导航和用户信息。
• 页面主体：顶部放面包屑导航，左边正文，右边放相关推荐或者热门文章。可以加强页面的相关性，增强页面的权重。
• 页面底部：版权信息以及友情链接。
• 分页导航：建议写法：“首页 1 2 3 4 5 下拉框”。这样爬虫能够根据页码直接跳转，提高爬虫效率；不建议：“首页 下一页 尾页"这种写法，这样爬虫不能到指定页码，必须一页一页往下爬，容易放弃。

5. 重要的HTML内容放最前。爬虫在爬取页面时是从上到下爬取的，因此可以把重要的内容放在尽量靠上的位置。像广告、推荐等内容可以利用浮动布局，即使放在HTML文档最下方也可以在页面上显示靠前的位置。
6. 控制页面的大小，减少http请求，提高网站的加载速度。当某个请求耗时过长而超时时，爬虫会直接离开。

网页的代码优化

1. 头部突出内容重点。

• <title>：只强调最重点的内容，像网站名称，重要的关键词；
• <meta keywords>：这里的关键词不要与标题重复，列出几个就行，不要过分堆砌，否则会降低搜索精准度；
• <meta description> : 这里的网页描述需要高度概括网页的职能、内容，也不需要过长，突出最重点的几个关键词。

2. 代码语义化。在适当的位置用适当的标签给适当的人看，这样不论对用户还是爬虫都能一目了然，提高爬虫效率。

3. a标签。链接标签在设置时需要添加title属性，告诉爬虫这个链接是去哪的；如果跳转的是外链，则需要加上el="nofollow"属性来告诉爬虫不要爬这个，否则一出去外面，这个爬虫就再也回不来的了。

4. 一个页面一个h1标签。h1标签自带很高的权重，保证一个页面只能有一个h1标签，比如正文标题、首页logo等。

5. img标签使用alt属性进行标识。

   <img src="logo.jpg" width="300" height="300" alt="logo"/>
   

   使用alt属性，当图片还未加载的时候，爬虫能够知道这个图片的作用。

6. 表格使用<caption>表格标题标签。每个表格只能定义一个caption标签。

   <table border='1'>
       <caption>水果</caption>
       <tbody>
           <tr>
               <td>apple</td>
               <td>100</td>
           </tr>
           <tr>
               <td>banana</td>
               <td>200</td>
           </tr>
       </tbody>
   </table>
   

7. <br />标签只用于换行。

8. 使用<strong>或者<em>来强调内容。em标签的效果仅次于strong标签，使用强调可以方便爬虫找到重点。

9. 文本缩进不要使用特殊符号   应当使用CSS进行设置。版权符号不要使用特殊符号 © 可以直接使用输入法打出版权符号©。

10. 重要的内容不要放在JS中。因为爬虫不会爬取JS的内容，应放在HTML文档中。

11. 少使用<iframe>框架，爬虫不会爬取。

12. 谨慎使用display: none。爬虫会自动过滤被隐藏的内容，因此需要采用其他方法来隐藏元素。

网站性能优化

1. 减少http请求。在浏览器与服务器通信的时候，每次握手都需要花费大量时间，且不同的浏览器的最大并发请求数量有限，一旦并发数量达到上限，后面的资源就处于pending状态，这会阻塞整个页面的渲染效果，十分致命。
   • CSS Sprites。俗称”雪碧图“，指的是将多张图片合成一张图片，然后利用CSS定位来显示需要的内容。即减少了请求次数，也减少了图片的字节数。
   • 合并CSS和JS。使用工程化打包工具，如webpack、grunt、gulp等，将多个CSS和JS文件打包成一两个文件，有效减少请求次数和文件体积。
   • 懒加载。当网页无需加载资源时，就不需要发请求。等到用户真正访问到其，再进行预先请求。
2. 控制资源加载的优先级。浏览器加载HTML文档的机制是从上到下解析的，因此一般将CSS放在头部，JS放在底部，可以将CSS效果第一时间展示给用户。
3. 尽量采用外链CSS和JS，便于后期维护。
4. 减少重排（Reflow）。重排是由于DOM的变化而影响元素的宽高，浏览器会重新计算元素的属性，使整个渲染树收到影响的部分失效。过度重排会时CPU的使用率急剧上升。如果需要改变样式，尽量使用class来改变，而不要直接改变style。
5. 减少DOM操作。
6. 使用IconFont。
7. 使用CDN网络缓存。CDN全称Content Delivery Network，即内容分发网络。用户在访问网站的时候，CDN会选择一个离用户最近的CDN边缘节点来响应用户的请求。当浏览器本地缓存失效后，浏览器会向CDN发起请求，进行CDN缓存。这样做可以加快用户的访问速度，减轻服务器压力。
8. 采用GZIP压缩。浏览速度变快，爬虫的信息量也会更大。
9. 不使用CSS表达式。
10. 伪静态设置。若为动态网页，可以开启伪静态功能，让爬虫以为这是一个静态网页，如果url中带有关键词效果更好。