SEO网站前端优化整理

SEO前端优化

搜索引擎优化（Search Engine Optimization）,简称SEO。是按照搜索引擎给出的优化建议，以增强网站核心价值为目标，从网站结构、内容建设方案、用户互动传播等角度进行合理规划，以改善网站在搜索引擎中的表现，吸引更多搜索引擎用户访问网站。SEO与搜索引擎，互相促进，互利互助。 要想更好理解以上一段废话，首先需要理解关于搜索引擎的两个概念。也就是说，通过搜索引擎优化，我们的网站可以在搜索结果的排名中靠前。

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

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

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

3、优化网站分级结构

在每个内页加面包屑导航

4、集中网站权重

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

5、文本强调标签的使用

使用strong标签加粗文字

6、 a标签的title属性的使用。

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

7、图片alt属性的使用

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

8、H标签的使用。

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

9、图片大小声明。

10、 页面布局调整。

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

11、尽量保证 HTML 的纯粹和高质量
我们应尽量让结构（HTML）、表现（CSS）及行为（JavaScript）三者分离。如果在一个 HTML 页面中，编写大量的 CSS 样式或脚本，会拖慢其加载速度，此外，如果不为 定义宽高，那么会引起页面重新渲染，同样也会影响加载速度。一旦加载超时，“蜘蛛”就会放弃爬取。如果这个 HTML 文档内容比较独特丰富（合理插入图片说明）等，会被认为质量较高符合用户需求，从而提高 SEO 的排名。

12、扁平化网站结构
一般来说，一个网站的结构层次越少，越有利于“蜘蛛”的爬取。所以目录结构一般不多于 3 级，否则“蜘蛛”很容易不愿意继续往下爬。就像用户在操作一个网页一样，层级大于 3 就很影响用户体验了，“蜘蛛”就是模仿用户的心理。

13、合理安排重要内容的位置
我们应该将重要内容的 HTML 代码放在最前面，最前面的内容被认为是最重要的，优先让“蜘蛛”读取，进行内容关键词抓取。并且，重要内容不应该由 JavaScript 或 iframe 输出，“蜘蛛”没有办法读取 JavaScript ，一般不会去读取 iframe 中的内容。

代码部分

HTML：

1.标签的有开有合。

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

3.合理利用标签语义化：在合适的位置使用合适的元素表达合适的内容，让用户和“蜘蛛”能一目了然文档结构。例如使用 h1 可以让“蜘蛛”知道这是很重要的内容。然而，值得注意的是，例如在想要表达强调时，我们不应该滥用标题元素或者 b、 i 这种没有实际意义的标签，换而可以使用 em 或 strong 来表示强调。此外， h1 的权重比 h2 的大，我们不应该为了增大权重而去滥用 h1 ，一般来说 h1 用于正文的标题。

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

5.img标签内需要添加title属性和alt属性。alt 属性可以在图片未成功显示时候，使用文本来代替图片的呈现，使“蜘蛛”可以抓取到这个信息。此外它还可以解决浏览器禁用图像或屏幕阅读器解析等问题。

6.a标签内需要添加title属性。设置rel=‘nofollow’ 忽略跟踪，如果某个 a 的链接不需要跟踪，那么添加 rel=‘nofollow’ 即可通知“蜘蛛”忽略跟踪。因为“蜘蛛”分配到每个页面的权重是一定的，为了集中网页权重并将权重分给其他必要的链接，为不必跟踪的链接添加这个属性就显得很必要了。

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

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

9.合理使用注释。

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

11.文本缩进不要使用特殊符号 ‘&nbsp’; 应当使用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代码习惯。例如：减少页面重绘，减少作用域链上的查找次数。

为什么要做前端优化

搜索引擎清理不满足现在条件下的网站
原因：提升了对页面质量的要求

解决方案：提升页面质量：文章，企业，流量站

1.文章url：不超过三层的页面
2.浏览器标题：加上网站名称
3.文章标题：用H1加分，不要使用div等
*h1权重比较高的标签，一个页面最好只用一个h1，用多了百度会认为你在作弊*
4.文章发布时间：百度有激光算法，打击不确定的时间，最好精确到秒
5.文章内容同义词替换：是最低级的伪原创技巧，效果极差。“火车头”批量替换3万个近义词
6.百度搜索关键词使用intitle：xxxx intitle:答案，site:加网站搜索时可以查看站点信息
*神马收录的网站就很nb，及搜狗收录都很值钱*
7.文章底部：最好做相关推荐

高质量的页面打造

1.你的网站需要蜘蛛去抓取
a：好的域名，抓取问题可以得到解决，降低优化难度
b：推送技巧，文章一更新，就自动推送给百度，及时性；手动操作如可使用宝塔定时任务来实现，计划任务。
c：推送内容，页面质量需要高
*橘子seo（选择域名），查外链，流量网站，通过移动端广告赚钱*
2.页面符合收录的标准
*高质量的页面，是由很多维度同时来判断的，先定位自己*
a：企业站：要很好的打造页面--覆盖用户需求
营业执照，证书（打水印），其他人看到会增加合作机会
关于我们，公司介绍
相关案例
专业技能
合法

• 高质量的页面在搜索结果里面，基础优化，深入优化（布局+算法），内容长尾…