前端如何做好SEO优化

一、什么是SEO？

搜索引擎优化（Search Engine Optimization）,简称SEO。是按照搜索引擎给出的优化建议，以增强网站核心价值为目标，从网站结构、内容建设方案、用户互动传播等角度进行合理规划，以改善网站在搜索引擎中的表现，吸引更多搜索引擎用户访问网站。SEO与搜索引擎，互相促进，互利互助。 

二、为什么需要SEO？

做SEO是为了提高网站的权重，增强搜索引擎友好度，以达到提高排名，增加流量，改善用户体验，促进销售的作用。

三、从前端角度，哪些注意事项有助于SEO？

3.1 提高页面加载速度

 能用css解决的不用背景图片，背景图片也尽量压缩大小，可以几个icons放在一个图片上，采用css精灵(css sprite)，使用background-position找到需要的图片位置。减少HTTP请求数，提高网页加载速度。 

3.2结构、表现和行为的分离。

不要把css和js放在同一个页面，采用外链的方式能大大加快网页加载速度。

3.3 优化网站分级结构

在每个内页加面包屑导航

3.4集中网站权重

由于蜘蛛分配到每个页面的权重是一定的，这些权重也将平均分配到每个a链接上，那么为了集中网站权重，可以使用”rel=nofollow”属性，它告诉蜘蛛无需抓取目标页,可以将权重分给其他的链接。

3.5文本强调标签的使用

使用strong标签加粗文字

3.6 a标签的title属性的使用。

在不影响页面功能的情况下，可以尽量给a标签加上title属性，可以更有利于蜘蛛抓取信息。 

3.7图片alt属性的使用

这个属性可以在图片加载不出来的时候显示在页面上相关的文字信息

3.8H标签的使用。

主要是H1标签的使用需要特别注意，因为它自带权重，一个页面有且最多只能有一个H1标签，放在该页面最重要的标题上面，如首页的logo上可以加H1标签。

3.9 图片大小声明。

3.10 页面布局调整。

页面内容尽量不要做成flash、视频，

四、前端SEO

1. 对网站的标题、关键字、描述精心设置，反映网站的定位，让搜索引擎明白网站是做什么的；
2. 网站内容优化：内容与关键字的对应，增加关键字的密度；
3. 生成针对搜索引擎友好的网站地图；
4. 增加外部链接，到各个网站上宣传；
5. 代码优化

 

HTML：

　1.标签的有开有合。

　　2.避免冗余代码，例如去除空格字符。

　　3.合理利用标签语义化。

　　4.合理的嵌套规则，避免行元素内嵌套块元素。

　　5.img标签内需要添加title属性和alt属性。

　　6.a标签内需要添加title属性。

　　7.Meta标签的优化（过去搜索引擎优化的重要手法，现在已经不是关键因素，但仍不可忽略）主要包括： Meta description、Meta keywords的设置　　关键字密度要适度，通常为2%-8%，也就是说你的关键字必须 在 页面中出现若干次，或者在搜索引擎允许的范围内，要避免堆砌关键字。

　　8.<title>页面标题，必须列出信息的标题、网站的名称以及相关关键字，避免堆关键字。

　　9.合理使用注释。

　　10.尽量少使用iframe框架,因为“蜘蛛”一般不会读取其中的内容

　　11.文本缩进不要使用特殊符号   应当使用CSS进行设置。版权符号不要使用特殊符号 © 可以直接使用输入法，拼“banquan”，选择序号5就能打出版权符号©。

CSS:

1.避免将css代码写在标签内。

　　2.如果css代码量少，可直接写在头部。否则请使用外部引入的方式。

　　3.请不要使用通配符选择器 *{margin:0;padding:0;} 这不仅仅因为它是缓慢和低效率的方法，而且还会导致一 些不必要的元素也重置了外边距和内边距。

　　4.css代码缩写可以提高你写代码的速度，精简你的代码量，包括margin，padding，border ，font， background和颜色值等。

　　5.利用css继承，如果一个父元素内有多个子元素拥有相同的样式，可将相同的样式定义在元素上。

　　6.如果多个元素拥有相同的样式，可定义一个通用的class或使用群组选择器。

　　7.使用背景图合并技术。

　　8.适当的代码注释。

　　9.谨慎使用 display：none ：对于不想显示的文字内容，应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。

JS

       1采用外部引入的方法。

　　2.合理合并JS代码，可减少服务器的压力。

　　3.良好的JS代码习惯。例如：减少页面重绘，减少作用域链上的查找次数。