SEO相关

前端需要注意哪些SEO

• 合理的title、description、keywords：
  
  -- 搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；
  
  -- description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；
  
  -- keywords列举出重要关键词即可
• 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
• 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
• 重要内容不要用js输出：爬虫不会执行js获取内容
• 少用iframe：搜索引擎不会抓取iframe中的内容
• 非装饰性图片必须加alt
• 提高网站速度：网站速度是搜索引擎排序的一个重要指标

什么是标签语义化

几乎每个标签都是有含义的，标签语义化是在适当的位置用适当的标签。

标签语义化的作用

标签语义化的目的就是对搜索引擎友好！标签语义化是为了使爬虫懂的你网站的含义，利于它采集有效有用的信息进入数据库，即SEO优化（Search Engine Optimization）。

eg

div 语义：Division(分隔)
span 语义：Span(范围)
ol 语义：Ordered List(排序列表)
ul 语义：Unordered List(不排序列表)
li 语义：List Item(列表项目)

小导航

• a标签
• h标签
• ul和ol和dl
• p标签和br标签
• caption标签
• img标签
• strong和b和em和i

那些标签

a标签

<a title="百度搜索" rel="nofollow">http://www.baidu.com</a>

• 使用 title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释，也是让爬虫更理解这个链接的含义。
• 使用rel="nofollow"告诉机器(爬虫)不需要跳到这个链接。(爬到其他网站就不一定会来了，别让它爬了)

h标签

h1-h6多用于标题。

<h1>正文标题</h1>
<h2>副标题</h2>

其他标题就不要随便用h标签了。

ul和ol和dl

ul标签多用于无序列表

ol标签多用于有序列表

dl标签多用于定义数据列表

p标签和br标签

br标签的错误使用案例

<div>
  <span>item1</span><br>
  <span>item2</span><br>
  <span>item3</span><br>
</div>

br标签的正确使用

<p>
  文章内容<br>
  文章内容<br>
  文章内容
</p>

caption标签

<table border="1">
  <caption>表格标题</caption>
  <tr>
    <th>一月</th>
    <th>二月</th>
  </tr>
  <tr>
    <td>31天</td>
    <td>28天</td>
  </tr>
</table>

img标签

加上alt属性和title属性给予说明

strong和b和em和i

<strong>和<b>都是加粗的效果（强调作用），<strong>对seo有很好的效果而<b>不太起作用。

<em>和<i>都是斜体的效果。

• 如果你单纯为了显示加粗斜体效果，那么推荐使用<b> <i>;
• 如果为了强调文字内容，那么推荐使用<strong> <em>

能使用一个标签完成的事情就不要使用两个标签。

爬虫会把display:none;的自动过滤掉。