前端SEO优化

SEO简介

– 全称：Search Engine Optimization，搜素引擎优化
– 作用：提升网页在搜索引擎自然搜索结果中的收录量以及排序位置而做的优化
– 分类：白帽SEO和黑帽SEO

白帽SEO：改良规范网站设计，使网站对搜索引擎和用户更加友好
黑帽SEO：利用搜索引擎缺陷来获取更多的用户访问量

SEO优化

1. 网站结构布局优化

1. 控制首页链接数量：链接太少，搜索引擎往下爬到页内，影响网站收录数量；链接太多，影响用户体验
2. 扁平化的目录层次：建立的网站结构层次越少，越容易被抓取，保持三层目录结构也是用户体验的需要
3. 导航优化：导航尽量采用文字，也可以搭配图片导航，但图片需进行优化，如<img>标签必须加’alt’和’title’属性；尽量加上面包屑导航，让用户更好了解当前所在位置，理解网站布局，让搜索引擎了解网站结构，同时增加了大量的内部链接，方便数据抓取

img图片标签alt和title属性的区别：

1. alt是给搜索引擎识别，在图像无法显示时的替代文本

2. title是关于元素的注释信息，主要是给用户解读，当鼠标放到文字或是图片上时有title文字显示

4. 控制页面大小，减少http请求，提高网站加载速度
5. 合理的网站布局

页面头部：logo、主导航、用户信息
页面主题：左边正文（包括面包屑导航及正文），右边热门文章和相关文章
页面底部：版权信息、友情链接

2. 网站代码优化
1. <title>标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的<title>标题中不要设置相同的内容
2. <meta keywords>标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。
3. <meta description>标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
4. <body>中的标签：尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6 是用于标题类的，nav标签是用来设置页面主导航的等。
5. a标签：页内链接，要加“title”属性加以说明，让访客和“蜘蛛”知道。而外部链接，链接到其他网站的，则需要加上rel=”nofollow”属性,告诉“蜘蛛”不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。
6. 正文标题要用h1标签：搜索引擎认为它最重要，若不喜欢它的默认样式可以通过CSS设置。尽量做到正文标题用h1标签，副标题用h2标签,而其它地方不应该随便乱用 h 标题标签。
7. br标签：只用于文本内容的换行
8. 表格应该使用caption表格标题标签
9. img应使用 “alt” 属性加以说明
10. strong、em标签：需要强调时使用。strong标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要的内容，em标签强调效果仅次于strong标签。b、i标签: 只是用于显示效果时使用，在SEO中不会起任何效果。

11. 文本缩进不要使用特殊符号’&nbsp’;应当使用CSS进行设置。版权符号不要使用特殊符号 ‘&copy’; 可以直接使用输入法，拼“banquan”，选择序号5就能打出版权符号©。
12. 巧妙利用CSS布局，将重要内容的HTML代码放在最前面：最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。
13. 重要内容不要用JS输出：因为“蜘蛛”不认识
14. 尽量少使用iframe框架：因为“蜘蛛”一般不会读取其中的内容
15. 谨慎使用 ‘display：none’：对于不想显示的文字内容，应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。
16. js代码如果是操作DOM操作，应尽量放在body结束标签之前，html代码之后。
17. 增加网站的404页面：一是有利于提高用户体验，最主要的是防止蜘蛛爬虫丢失。
17. 添加canonical标签：当我们的网页可以通过多个URL来访问时，我们可以通过添加canonical标签告诉搜索引擎这多个URL中的首选网址。通常搜索引擎会将指定的页面视为最有价值最规范的页面。