前端如何作好SEO优化

1、什么是SEO？

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

2、为何须要SEO？

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

3、从前端角度，哪些注意事项有助于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、视频，

4、前端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代码习惯。例如：减小页面重绘，减小做用域链上的查找次数。