安利一下前端SEO技巧

      SEO技术大致可以分为白帽优化和黑帽优化，白帽优化就是指通过遵循搜索引擎公司建议的手段进行优化，黑帽优化就是利用搜索排序算法的漏洞进行优化。今天安利的是普通前端需要了解的白帽优化手段（ps 顺便提一下优化效果指标主要从网站被收录页面数和关键字相关页面排名顺序两方面进行度量）。

一：突出重要的内容

合理的title标签，简明扼要的description和keywords meta属性。

title：只强调重点即可，重要关键词出现不要超过2次，而且要靠前，每个页面title要有所不同。

description：把网页内容高度概括到这里，长度要合理，不可过分堆砌关键词，每个页面description要有所不同。

keywords：列举出几个重要关键词即可，也不可过分堆砌。

二：语义化书写HTML代码，符合W3C标准。

对于搜索引擎来说，最直接面对的就是网页HTML代码，如果代码写的语义化，搜索引擎就会很容易的读懂该网页要表达的意思。也就说要合理应用<header><footer><artical>等语义标签。

三：利用布局，把重要内容HTML代码放在最前。

因为搜索引擎蜘蛛在页面里是从上往下爬取内容，所以可以在html中把重要内容放在前面，然后再根据css进行布局调整。

四：重要内容不要用JS输出。

蜘蛛不会读取JS里的内容，所以重要内容必须放在HTML里。

五：尽少使用iframe框架。

搜索引擎不会抓取到iframe里的内容，重要内容不要放在框架中。

六：为图片加上alt属性

alt属性可以让搜索引擎蜘蛛知道图片的含义。

七：保留文字效果。

如果需要兼顾用户体验和SEO效果，在必须用图片的地方，例如个性字体的标题，我们可以利用样式控制，让文本文字不会出现在浏览器上，但在网页代码中是有该标题的。但随着css3的普及利用web font等技术是可以直接使用文字的。

八：利用CSS截取字符。

如果文字长度过长，可以用样式截取，设置高度，超出的部分隐藏即可。这样做的好处是让文字完整呈现给搜索引擎，同时在表现上也保证了美观。另外可以用white-space，text-overflow，overflow这三个属性做文字截取。

九：伪静态设置。

如果是动态网页，可以开启伪静态功能，让蜘蛛“误以为”这是静态网页，因为静态网页比较合蜘蛛的胃口，如果url中带有关键词效果更好。

动态地址：

http://www.360.cn/index.php

伪静态地址：

http://www.360.cn/index.html

最后减少页面的加载时间也是有利于页面的搜索引擎优化的。

本文参考链接：浅谈前端与SEO