前端SEO

白帽seo

SEO白帽技术：
　　白帽SEO定义：白帽seo顾名思义就是光明正大流出水面。一种正义的手法，是使用符合主流搜索引擎发行方针规定的seo优化方法。它是与黑帽seo相反，白帽SEO一直被业内认为是最佳的seo手法，它是在避免一切风险的情况下进行操作的，同时也避免了与搜索引擎发行方针发生任何的冲突，它也是seoer从业者的最高职业道德标准。
　　白帽SEO意义：白帽seo关注长远利益，可能是3-5年后或是更长时间需要的时间更长久，效果更加。坚持不使用作弊手段，坚持几年，不出意外的话，你的网站应该可以得到好的流量和排名，也就有了赢利点。而且后续对搜索引擎的依赖度更小。从长远的利益发展建议还是用白帽手法。
　　白帽SEO可能会觉得用黑帽技术得到排名和利润，但不久网站就会被封掉，你又要重新去花费时间做另外一个网站。为什么不用白帽手段踏踏实实的做一个网站呢?给人们真正有用的网站呢?白帽网站不用担心会被搜索引擎封掉，你也可以骄傲的说：这个网站是我的。十年二十年以后，这个网站还在给你带来利润，何乐而不为呢?从黑帽SEO的角度，他们是有道理。大部分黑帽SEO都是使用程序，他们建立一个几百万页的网页，放他们的蜘蛛出去抓取就可以了。就算过一两个月他们的网站被惩罚，可能已经赚了几千几万了。对他来说，投资报酬很搞。一个白帽SEO关注的更多长远利益，两年三年，甚至十年九年以后的利益。你坚持不使用作弊手段，坚持十年，不出意外的话，你的网站应该可以得到好的流量，有了流量就有了盈利。

　　作为一个seoer应该掌握的30种白帽seo优化方法：
1、按照Web2.0标准建站，最好通过W3C验证；
2、网站生成伪静态页面，当然直接为静态页面更好。静态化页面更容易被搜索引擎收录；
3、注重网站内容的原创性；
4、各页面的相似性不要超过70%；
5、页面整理有序，文字分段合理；
6、网站更新有规律，每天更新或有规律几天一更新；
7、网页内容围绕页面主要关键词展开，不要偏离整站主题；
8、URL中体现英文关键词；
9、网页Title中出现关键词；
10、页面标签中出现关键词(1-3个)；

11、描述标签中出现关键词；
12、内容中自然分布关键词；
13、内容评论中出现最好出现关键词；
14、内容靠前部和最后部分出现关键词；
15、在H1，H2标签中加入关键词；
16、链出链接锚文字中包含关键词；
17、图片名包含关键词；
18、ALT属性中加入关键词；
19、页面关键词密度6-8%；
20、把关键词用粗体或斜体表现；
21、找高PR值站导入链接；
22、找内容相关页面的导入链接；
23、导入链接锚文本中包含关键词；
24、锚文字在于网页内容中；
25、锚文本周围出现相关关键词；
26、网站的外部链接页面内容与关键词的相关性尽量高；
27、外部导入链接要有规律的，忌短时间突然加很多或减少很多；
28、外部导入链接所在的页面导出链接不要超过100个；
29、导入链接最好来自不同IP地址；
30、锚文字要多样化(如：企赢，企赢营销，企赢网络营销策划)。

SEO优化　　

1、 静态页面　　将信息页面和频道、网站首页改为静态页面，有利于搜索引擎更快更好的收录。　　

2、 页面标题(Page Title)的关键词优化　　必须列出信息的标题、网站的名称以及相关关键字。　　

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

4、 针对Google制作Sitemaps　　Google的sitemaps是对原来robots.txt的扩展，它使用XML格式来记录整个网站的信息并供Google读取，使搜索引擎能更快更全面的收录网站的内容。　　可以使用Google提供的Sitemap生成器制作（需要技术人员制作）：　　https://www.google.com/webmaster ... emap-generator.html　　也可以由技术部人员制作更全面的Sitemaps。　　

5、 图片的关键词优化　　图片的替代关键词也不要忽略，其另外一方面的作用是，当图片不能显示的时候，可以给访问者一个替代解释语句。　　

6、 避免表格的嵌套　　目前本站的表格嵌套太多，搜索引擎通常只读取3个＜table>的嵌套，如果太多，会造成部分有用信息没有被检测到。　　

7、 采用web标准进行网站重构　　尽量使网站的代码符合W3C的HTML 4.0或XHTML 1.0规范。通过XML＋CSS技术进行网站重构，减少不表格及冗余代码，提高网站页面的扩展性，兼容性，可以使更多浏览器支持。　　

8、 网站结构的扁平化规划　　目录和内容结构最好不要超过3层，如果有超过三层的，最好通过子域名来调整和简化结构层数。另外目录命名的规范做法是使用英文而不是拼音字母　　

9、 页面容量的合理化　　合理的页面容量会提升网页的显示速度，增加对搜索引擎蜘蛛程序的友好度。同时建议js脚本和css脚本尽量用链接文件　　

10、外部文件策略　　把javascript文件和css文件分别放在js和css外部文件中。这样做的好处是把重要的页面内容放到页面顶部，同时能缩小文件大小。有利于搜索引擎快速准确地抓取页面　　重要内容。其他的字体（FONT）和格式化标签也尽量少用，建议采用CSS定义。

11、外部链接　　尽可能多地让其他跟你主题相关的网站链接本站，同时尽量同PR值更高的网站进行相互链接。如果网站提供与主题相关的导出链接，被搜索引擎认为有丰富的与主题相关的内容，也有利于排名，例如各类招商网站、投融资网站的概念。另外避免链接不顾质量的大面积撒网，对搜索引擎而言宁少要精。　　

12、网站地图　　网站自身的网站地图是搜索引擎更全面索引收录你的网站的重要因素。建议制作 基于文本的网站地图，内含网站所有栏目、子栏目。网站地图的三大因素：文本、链接、 关键词，都极其有利于搜索引擎抓取主要页面内容。特别是动态生成目录网站尤其需要 创建网站地图。　　

13、图像热点　　除AltaVista、Google明确支持图像热点链接外，其他引擎暂不支持。当“蜘蛛” 程序遇到这种结构时，就会无法辨别。因此尽量不要设置图像热点(Image Map)链接。　　

14、FLASH应用　　FLASH由于不含文字信息，应尽量用于功能展示和广告，少用于网站栏目和页面。

15、JS脚本　　在不支持JS脚步的浏览器里 NOSCRIPT> 标签会起到重要提示作用，对搜索引擎的Spider搜索也会有帮助。

16、Frame框架　　Frame标签会被搜索忽略，尽量少用，如果一定要用，则应正确使用Noframe标签， 在Noframe>/Noframe>区域中包含指向frame页的链接或带有关键词的描述文本，同 时在框架以外的区域也出现关键词文本。

17、资讯的内部链接　　有助提高网站排名和PR值，例如相关资讯、推荐资讯等

－－－－－－－－－－－－－－－－－－－－－－－－－－

网站结构布局优化

推荐使用扁平化结构。网站的目录层级要尽可能少，中小型网站不要超过3级。做到扁平化结构需要注意以下的3个方面：

控制首页的链接数量（网站首页的权重最高）。首页应该有有效的链接，爬虫通过首页的连接到达内页，如果没有有效的链接就会直接影响网站的收录数量。当然首页也不能有过多的链接，内页的链接不要放在首页，链接过多会影响用户体验。中小企业网站首页的链接数量应该在100个以内。链接的性质可以是页面导航、锚链。扁平化的目录层次。尽量让Spider跳转3次就可以到达网站的任意一个内页。例如网站的设计可以使用以下的3级：主页、栏目、内容页扁平铺开的结构，而不能是纵深的结构。例如我们要做一个关于植物的网站可以采用以下的层级结构：3层目录结构



导航SEO优化。导航可以分为主导航和父导航。导航应该使用文字，如果为了用户体验采用图片导航，则应该为图片设置必要的

alt

和

title

属性。其次在导航的设计上应该使用面包屑导航。它能够让用户了解到当前的位置，了解网站内容的组织方式。（方便🕷️的爬取）

面包屑导航：作用

1、让用户了解当前所处位置，以及当前页面在整个网站中的位置。

2、体现了网站的架构层级，能够帮助用户快速学习和了解网站内容和组织方式，从而形成很好的位置感。
3、提供返回各个层级的快速入口，方便用户操作。
4、Google已经将面包屑导航整合到搜索结果里面，因此优化面包屑导航每个层级的名称，多使用关键字，都可以实现SEO优化。面包屑路径，对于提高用户体验来说，是很有帮助的。
5、方便用户，面包屑主要用于为用户提供导航一个网站的次要方法，通过为一个大型多级网站的所有页面提供面包屑路径，用户可以更容易的定位到上一次目录，引导用户通行；
6、减少返回到上一级页面的点击或操作，不用使用浏览器的“返回”按钮或网站的主要导航来返回到上一级页面；
7、不用常常占用屏幕空间，因为它们通常是水平排列以及简单的样式，面包屑路径不会占用页面太多的空间。这样的好处是，从内容过载方面来说，他们几乎没有任何负面影响；
8、降低跳出率，面包屑路径会是一个诱惑首次访问者在进入一个页面后去浏览这个网站的非常好的方法。比如说，一个用户通过谷歌搜索到一个页面，然后看到一个面包屑路径，这将会诱使用户点击上一级页面去浏览感兴趣的相关主题。这样，从而，可以降低网站的总体跳出率。
9、有利于百度蜘蛛对网站的抓取，蜘蛛直接沿着那个链走就可以了，很方便。
10、面包屑有利于网站内链的建设，用面包屑大大增加了网站的内部连接，提高用户体验。
4。页面的大小控制在100k以下。

代码SEO优化

<head>

标签放网页的标题，各个页面不同。

<meta keywords>

列举出几个重要的关键词。

<meta description>

网页内容的高度概括。

<br />

标记应该放在文本中间，即使用

<p><br /></p>

替代突兀的

<br />

标记。

html语义化。例如我们要做一个导航，可以使用

div

+

span

标记：

<div class="nav">
<span>课程</span>
<span>|</span>
<span>问答</span>
<span>|</span>
<span>社区</span>
</div>

但是以上的代码丝毫没有语义化（

div

和

span

标记是html中语义化最低的标签），推荐的做法是使用

ul

和

li

标记，再通过合适的CSS样式来实现同样的效果：

<ul class="nav">
<li>课程</li>
<li>问答</li>
<li>社区</li>
</ul>

.nav li{
float: left;
list-style: none;
display: block;
margin: 0 5px;
border-right: 1px solid #000;
}

<a>

标记要加上说明（

title

属性），对于指向外部网站的链接要使用

rel="nofollow"

属性告诉爬虫不要去爬其他的页面。

<h1>

正文标题要使用

<h1>

标记，副标题要使用

<h2>

。可以使用CSS样式进行显式风格的设置。切记：不重要的地方不要随便使用

<h1>

标记。

<table>

标记的优化。使用

<caption>

标记为表格指定标题。

<table>
<caption>表格标题</caption>
<tr>
<th>季度</th>
<th>销售额</th>
</tr>
<tr>
<td>1</td>
<td>33665.25</td>
</tr>
<tr>
<td>2</td>
<td>21215.99</td>
</tr>
</table>

强调网页中的重要内容应该使用

<strong>

标记，避免使用

<b>

标记（对搜索引擎不友好）。

<em>

的权重仅次于

<strong>

。如果仅仅使显示的效果发生变化就使用

<b>

标记和

<i>

标记。

<img>标签应使用alt说明

<strong><em>与<b><i>标签

Tips

将重要html代码放在最前面，广告等不重要的部分放在整个文档的最后，然后利用CSS样式控制广告div左右浮动。

重要内容不要使用js输出。

尽量少使用

iframe

框架。

对于暂时不需要显示的元素应该使用

z-index

属性而不是

display:none;

这样的代码，因为Spider会过滤

display

属性为

none

的内容。

尽量精简代码。

外部链接：rel＝“nofollow” 避免spider跟出去回不来。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

1.　　请减少HTTP请求　　

　　基本原理：


　　解决办法：



2.　　请正确理解 Repaint 和 Reflow　　

　　注：Repaint 和 Reflow 也就是重绘和重排，请允许我在这卖弄下我有限认识的那么几个英语单词...囧

　　基本原理：


　　减少性能影响的办法：



3.　　请减少对DOM的操作　　

　　基本原理：


　　解决办法：



4.　　使用JSON格式来进行数据交换　　

　　基本原理：


　　JS操作JSON：



5.　　高效使用HTML标签和CSS样式　　

　　[b]基本原理：[/b]


　　正确理解：



6.　　使用CDN加速（内容分发网络）　　

　　基本原理：


　　不足之处：



[b]7.　　将CSS和JS放到外部文件中引用，CSS放头，JS放尾　　[/b]

　　基本原理：


　　正确的方式：


[b][/b]

[b][b][b]8.　　精简CSS和JS文件[/b][/b][b][b]　　[/b][/b][/b]

　　基本原理：


　　YUI Compressor的配置和使用：



[b][b]9.　　压缩图片和使用图片[b]Sprite技术　　[/b][/b][/b]

　　基本原理:



[b][b][b][b]10.　　注意控制Cookie大小和污染　　[/b][/b][/b][/b]

　　基本原理和使用方法：