前端SEO优化

SEO 要点：

1.语义化html标签，用合适的标签嵌套合适的内容，不可过度依赖div，对浏览器更友善就能更容易被抓取。

2.重要的内容html代码放在前面/左边。搜索引擎爬虫是从左往右，从上到下进行抓取的，利用布局来实现重要的代码在上面

3.重要内容要写在html架构里面，蜘蛛不会抓取js的内容，

4.尽可能减小使用iframe，由于蜘蛛不会抓取iframe的内容。

5.为图片img加上alt属性，加了alt就没必要加title了，避免搜索引擎认为咱们恶意优化。alt能让图片没加载时都能有文字提示。

6.须要强调的地方加上title，本页面内跳转a标签内也要加title。

7.重要的地方能够保留文字，有些地方必须用图，可是蜘蛛不会爬img，这时应该设置文本，再用缩进隐藏的方法去掉文字，例如logo的优化就是这样作的。注意隐藏不能用display：none，蜘蛛不会检索display：none的内容，应用这个方法的标签通常是logo，标题等重要信息

8.尽可能作到js、css、html的分离，不要在html中写样式代码。

9.注释的东西能去掉应该去掉，对搜索引擎更加友好

10.css放在头部，js放在尾部，这样不会阻塞页面渲染，让页面长时间的空白

11.减小http的请求，使页面更快加载。

12.使用本地缓存更快地访问网站，使用cdn网络，加快用户访问速度。

• 一些公共库可使用第三方提供的静态资源地址，（好比jquery,Normalize.css），一方面增长并发下载量，另外一方面可以和其余网站共享缓存。
• 免费的cdn网站 http://www.bootcdn.cn/

13.使用G-ZIP压缩，浏览速度更快，搜索引擎抓取信息量更大，对文本资源很是有效，对图片资源则没那么大的压缩比率

14.压缩源码和图片 

• JavaScript 文件源代码能够采用混淆压缩（）的方式，css文件源代码进行普通压缩，jpg图片能够根据质量压缩为50%到70%，PNG能够用一些开源软件来压缩，好比24色变成8色，去掉一些PNG格式信息等。
• js代码混淆压缩工具  站长工具：http://tool.chinaz.com/js.aspx 
• png格式,压缩工具 https://tinypng.com/
• 腾讯出品的压缩工具：智图 http://zhitu.isux.us/  

15.选择合适的图片格式

• 若是图片颜色比较多就用JPG格式，若是图片颜色比较多就用JPG格式，较少就用PNG格式，透明的图片都用PNG格式，若是可以经过服务器判断浏览器支持webP格式，那就用WebP格式和SVG。
• 其中webP格式是谷歌大力推崇的图片格式，体积比PNG小45%。关于WebP格式的具体请看https://isux.tencent.com/introduction-of-webp.html

16.合并静态资源

• 包括CSS,Javascript和小图片，减小HTTP请求
其中小图片的优化我我知道的有2种，
• 第一种：使用css精灵图sprites（也有人称为雪碧图），将小图标所有放在一张图片上（可使用这个网站来制做雪碧图 http://csssprites.com/），经过background-position属性来偏移图片。节省了大量的http请求。缺点固然有，须要耐心调整图片位置。
• 第二种：使用iconfont字体，图片以字体的形式展示，注明的bootstrap框架就用到了这个技术。国内比较著名的免费开源iconfont是阿里是Iconfont(http://iconfont.cn/),能够根据本身的需求选择不一样的兼容文件，低至IE6.

17.延长静态资源缓存时间，这样频繁访问网站的访客就可以更快的访问，不过这里要经过修改文件名的方式，确保在资源更新的时候，用户会拉取到最新的内容。

 

关键一点是头部的title，description，keyword的设置。

1.title设置不宜过长，要简短，网站的名字与相关的小内容，通常为10-20个字。不能重复
2.keywords设置10个关键词，每一个词不能太长，简短且符合你网站的特色，不能重复
3.description，50个字内描述你的网站

细说title，keywords，description

一、title（网站标题）

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

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

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

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

3）分类列表页title写法，通常是“分类列表页名称-栏目名称-网站名称”，这个和栏目页差很少。

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

 

二、keywords（关键词）

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

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

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

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

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

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

4）文章页keywords写法，建议你们提取文章中的关键词，好比此文章主要是讲SEO优化的，那么关键词确定是SEO优化，若是以为提取关键词的能力较差，也能够选择文章中出现比较多的词来做为关键词，好比如今写的内容是关于title、keywords、description的，那此文章页关键词就是这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，你们在设置时要注意