SEO搜索引擎优化

一、前端需要注意哪些SEO

1、合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可。

（1）title（网站标题）

title，就是浏览器上显示的那些内容，不仅用户能看到，也能被搜索引擎检索到（搜索引擎在抓取网页时，最先读取的就是网页标题，所以title是否正确设置极其重要。）title一般不超过80个字符，而且词语间要用英文“-”隔开，因为计算机只对英语的敏感性较高，对汉语的敏感性不高。

用法：<title>网站标题</title>

1）首页title写法，一般是“网站名称-主关键词或一句含有主关键词的描述”。小编在做优化时习惯把主关键词放最前面，网站名称放后面，因为搜索引擎给予标题最前面的词比后面的高。比如，做“招聘”这个词，就这样写“企业招聘-创业公司招聘技巧-xx招聘”。  

2）栏目页title写法，一般有2种：“栏目名称-网站名称”、“栏目名称栏目关键词-网站名称”。小编建议用“栏目名称-网站名称”。而且栏目名称最好用关键词来确定，比如企业招聘栏目最好就用企业招聘，而不要起个让人无法识别的名字如企业来人，企业看看，或企业加上一些特殊符号，这种写法虽然很有个性，但会让你的网站在优化上占了下风。

3）分类列表页title写法，一般是“分类列表页名称-栏目名称-网站名称”，这个和栏目页差不多。

4）文章页title写法，一般有3种：“文章标题-网站名称”、“内容标题-栏目名称”、“内容标题-栏目名称-网站名称”。其中，“内容标题-栏目名称-网站名称”的写法最为规范，但也相对复杂，它能给用户很好的提示，让用户知道他在访问哪篇文章，并且是在哪个网站的哪个栏目下。

（2）keywords（关键词）

keywords，是用户不查看源代码看不到的。主要作用是告诉搜索引擎本页内容是围绕哪些词展开的。因此keywords的每个词都要能在内容中找到相应匹配，才有利于排名。keywords一般不超过3个，每个关键词不宜过长，而且词语间要用英文“,”隔开。为什么用英文上文已经说过。而且，尽量将重要的关键字靠前放，因为靠后的关键字排名较差，除非你站有很高的权重。

小道消息称keywords曾被百度、谷歌、雅虎等搜索引擎剔除，将不会再影响搜索引擎的排序结果，小编认为设置一下总没坏处，还是有一些搜索引擎比较重视keywords标签的。

用法：<meta name=”Keywords” Content=”关键词1,关键词2,关键词3″>

1）首页keywords写法，一般是“网站名称,主要栏目名,主要关键词”。

2）栏目页keywords写法，一般是“栏目名称,栏目关键字,栏目分类列表名称”。

3）分类列表页keywords写法，这个就比较简单了，只要将你这个栏目中的主要关键字写入即可。

4）文章页keywords写法，建议大家提取文章中的关键词，比如我的文章主要是讲SEO优化的，那么我关键词肯定是SEO优化，如果你觉得你提取关键词的能力较差，也可以选择文章中出现比较多的词来作为关键词，比如我现在写的内容是关于title、keywords、description的，那我的文章页关键词就是这3个。

（3）description（内容摘要）

description，和上面的keywords一样，是用户不查看源代码看不到的，而且也是对于一个网页的简要内容概况。不同的是，keywords是由几个词语的组成的，而description则是完整的一句话。description一般不超过150个字符，描述内容要和页面内容相关。

用法：<meta name=”Description” Content=”你网页的简述”>

1）首页description写法，一般是将首页的标题、关键词和一些特殊栏目的内容融合到里面，写成简单的介绍。

2）栏目页description写法，一般是将栏目的标题、关键字、分类列表名称融合到里面，写成简单的介绍。

3）分类列表页description，这个就比较简单了，一般只需要把分类列表的标题、关键词融合在一起，写成简单的介绍。

4）文章页description写法，一般有2种写法，标准写法就和前面的一样，将文章标题、文章中的重要内容和关键词融合在一起，写成简单的介绍。这是最好最标准的写法。但是这样写比较麻烦，小编教你一种偷懒的方法，你可以在文章首段和标题中加入关键词，比如我这篇文章是讲title、keywords、description的，那么在文章首段和标题中就加入这些内容，然后直接将文章首段的内容复制到description中即可。

PS：3个标签按重要性来分：title＞description＞keywords

 

2、语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页

HTMl标签语义化，简单来说，就是让标签有含义，给某块内容用上一个最恰当最合适的标签，使页面有良好的结构，页面元素有含义，不论是谁都能够看懂这块内容是什么，并且有利于搜索引擎。

标签语义化的好处：

      1.HTML结构清晰

      2.代码可读性较好

      3.无障碍阅读

      4.搜索引擎可以根据标签的语言确定上下文和权重问题

      5.移动设备能够更完美的展现网页（对css支持较弱的设备）

      6.便于团队维护和开发

常见的语义化标签：

      <title>：页面主体内容。

      <hn>：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。

      <ul>：无序列表。

      <li>：有序列表。

      <header>：页眉通常包括网站标志、主导航、全站链接以及搜索框。

      <nav>：标记导航，仅对文档中重要的链接群使用。

      <main>：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

      <article>：定义外部的内容，其中的内容独立于文档的其余部分。

      <section>：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

      <aside>：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。

      <footer>：页脚，只有当父级是body时，才是整个页面的页脚。

      <small>：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。

      <strong>：和 em 标签一样，用于强调文本，但它强调的程度更强一些。

      <em>：将其中的文本表示为强调的内容，表现为斜体。

      <mark>：使用黄色突出显示部分文本。

      <figure>：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。

      <figcaption>：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。

      <cite>：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。

      < blockquote>：定义块引用，块引用拥有它们自己的空间。

      <q>：短的引述（跨浏览器问题，尽量避免使用）。

      <time>：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。

      <abbr>：简称或缩写。

      <dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。

      <address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。

      <del>：移除的内容。

      <ins>：添加的内容。

      <code>：标记代码。

      <meter>：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）

      <progress>：定义运行中的进度（进程）。

 

3、重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取。

4、重要内容不要用js输出：爬虫不会执行js获取内容

5、少用iframe：搜索引擎不会抓取iframe中的内容

6、非装饰性图片必须加alt 

img标签的alt属性和title属性的作用与区别：

（1） title是global attributes之一，用于为元素提供附加的advisory information。通常当鼠标滑动到元素上的时候显示。
（2） alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

7、提高网站速度：网站速度是搜索引擎排序的一个重要指标