白帽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请求
基本原理：
在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。
一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。
而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器建立连接，与释放连接，这必定会造成资源的浪费，且每个HTTP请求都会对服务器和浏览器产生性能负担。
网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要快。所以，请减少HTTP请求。
解决办法：
合并图片（css sprites），合并CSS和JS文件；图片较多的页面也可以使用 lazyLoad 等技术进行优化。
2. 请正确理解 Repaint 和 Reflow
注：Repaint 和 Reflow 也就是重绘和重排，请允许我在这卖弄下我有限认识的那么几个英语单词...囧
基本原理：
Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。
Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。如果Reflow的过于频繁，CPU使用率就会噌噌的往上涨，所以前端也就有必要知道 Repaint 和 Reflow的知识。
减少性能影响的办法：
上面提到通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式； 有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；如果功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。
总之，因为 Reflow 有时确实不可避免，所以只能尽可能限制Reflow的影响范围。
3. 请减少对DOM的操作
基本原理：
对DOM操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈。
天生就慢。在《高性能JavaScript》中这么比喻：“把DOM看成一个岛屿，把JavaScript(ECMAScript)看成另一个岛屿，两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费，而访问的次数越多，交的费用也就越多。所以一般建议尽量减少过桥次数。
解决办法：
修改和访问DOM元素会造成页面的Repaint和Reflow，循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。
减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。
注：在IE中:hover会降低响应速度。
4. 使用JSON格式来进行数据交换
基本原理：
JSON是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript原生格式，这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。
与XML序列化相比，JSON序列化后产生的数据一般要比XML序列化后数据体积小，所以在Facebook等知名网站中都采用了JSON作为数据交换方式。
JS操作JSON：
在JSON中，有两种结构：对象和数组。
1. 一个对象以 “ { ” 开始，“ } ” 结束。每个“名称”后跟一个 “ : ” ；“名称/值 对”之间使用 “ , ”（逗号）分隔。 名称用引号括起来；值如果是字符串则必须用引号括起来，数值型则不需要。如：
var obj={"name":"darren","age":24,"location":"beijing"}2. 数组是值（value）的有序集合。一个数组以 “ [ ” 开始， “ ] ” 结束。值之间使用 “ , ” （逗号）分隔。如：
var jsonlist=[{"name":"darren","age":24,"location":"beijing"},{"name":"weidong.nie","age":24,"location":"hunan"}];对这种数组和对象字面量的操作是非常方便且高效的。如果预先知道JSON结构的情况下，使用JSON进行数据传递简直是太美妙了，可以写出很实用美观可读性强的代码。如果你是纯粹的前台开发人员，一定会非常喜欢JSON。
5. 高效使用HTML标签和CSS样式
基本原理：
HTML是一门用来描述网页的一种语言，它使用标记标签来描述网页，作为一名合格的前端开发，你有必要去知道其常用标签代表的含义(SEO)和属性(表现形式)。
CSS指层叠样式表 (Cascading Style Sheets)，如果说把页面想象成一个人，HTML就是人的骨架，CSS就是人的衣装，一个人的品味从他的衣装就能一目了然。
一名专业的前端开发也是一名优秀的重构，因为在页面中经常会有各种不合理的嵌套和重复定义的CSS样式，我不是要你重构页面，只是希望你在碰到这种情况的时候解决这些问题。如这样的HTML：
<table><tr><td> <table><tr><td> ... </td></tr></table></td></tr></table>或者这样的CSS:
body .box .border ul li p strong span{color:#000}以上都是对HTML和CSS非常糟糕的使用方法。
正确理解：
HTML是一门标记语言，使用合理的HTML标签前你必须了解其属性，比如Flow Elements，Metadata Elements ，Phrasing Elements。比较基础的就是得知道块级元素和内联元素、盒模型、SEO方面的知识。
CSS是用来渲染页面的，也是存在渲染效率的问题。CSS选择符是从右向左进行匹配的，这里对css选择符按照开销从小到大的顺序梳理一下：
ID选择符 #box 类选择符 .box 标签 div 伪类和伪元素 a:hover当页面被触发引起回流（reflow）的时候，低效的选择符依然会引发更高的开销，所以请避免低效。
6. 使用CDN加速（内容分发网络）
基本原理：
CDN的全称是Content Delivery Network，即内容分发网络。
"其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。" - 百度百科。
上面几句话有多少能安安心心看完的，所以我还是通过说故事再来介绍一遍吧，顺便补一句，故事出处不明，^_^：
古代打仗大家一定都知道，由于古代的交通很不发达，所以当外族进攻的时候往往不能及时的反击，等朝廷征完兵再把兵派往边境的时候那些侵略者却是早已不见了踪影，这个让古代的帝王很是郁闷。后来帝王们学聪明了，都将大量的兵员提前派往边境驻扎，让他们平时屯田，战时当兵，这样的策略起到了很显著的作用。
不足之处：
实时性不太好是CDN的致命缺陷。随着对CDN需求的逐渐升温，这一缺陷将得到改进，使来自于远程服务器的网络内容网页与复本服务器或缓存器中的网页保持同步。解决方法是在网络内容发生变化时将新的网络内容从服务器端直接传送到缓存器，或者当对网络内容的访问增加时将数据源服务器的网络内容尽可能实时地复制到缓存服务器。
7. 将CSS和JS放到外部文件中引用，CSS放头，JS放尾
基本原理：
注：这个是很基础且必须遵循的知识点，可是为了文章的完整性勉为其难加进来吧，嘿嘿。
引入外部文件好处是显而易见的，而且是项目稍稍复杂一点的时候就有必要了这样做了。
易维护、易扩展，方便管理和重复利用。
正确的方式：
JavaScript是浏览器中的霸主，为什么这么说，因为在浏览器在执行JavaScript代码时，不能同时做其它事情，即<script>每次出现都会让页面等待脚本的解析和执行（不论JavaScript是内嵌的还是外链的），JavaScript代码执行完成后，才继续渲染页面。这个也就是JavaScript的阻塞特性。
因为这个阻塞的特点，建议把JavaScript代码放到</body>标签以前，这样既能有效的防止JavaScript的阻塞，又能使得页面的HTML结构能更快的释放。
HTML规范清楚指出CSS要放包含在页面的<head>区域内，这里就不多解释了。
8. 精简CSS和JS文件
基本原理：
有一条非常重要的准则一直没有提到，就是CSS和JavaScript的压缩，直接减少下载的文件体积。我个人经常使用的方式是使用 YUI Compressor，它的特点是：移除注释；移除额外的空格；细微优化；标识符替换。
YUI Compressor是java程序，如果你对java很熟悉的话可快速的上手使用yuicompressor.jar；如果你对java很陌生也没关系，一样可以使用YUI Compressor，下面介绍其使用方式。
YUI Compressor的配置和使用：
先配置使用环境：
1.先确保电脑中是否安装了JDK
2.再配置必要的环境变量(细节不能三两句说清，所以不知道如何设置还是搜索吧)
3.在cmd界面，输入javac可测试是否安装成功
使用方法可从cmd到进入yuicompressor.jar所在磁盘，我以自己的yuicompressor-2.4.2.jar为例：
1.压缩JS
java -jar yuicompressor-2.4.2.jar api.js > api.min.js2.压缩CSS
java -jar yuicompressor-2.4.2.jar style.css > style.min.css
当然，还有另一种更傻瓜式的使用方式，赶兴趣的朋友自己可去多尝试下。
9. 压缩图片和使用图片Sprite技术
基本原理:
注：其实压缩图片和图片精灵是两个方面的技术，可是既然都是关于图片的优化还是放到一块吧。
现在由于工作的细分，专业的前端工程师已经少有机会去切图了，可是关于图片压缩还是得略微了解，一般图片压缩的方式有：
1.缩小图片分辨率；
2.改变图片格式；
3.降低图片保存质量。
关于图片精灵(Sprite)技术就和我们工作直接相关，不管是在CSS中的图片还是在HTML结构中的图片都会产生HTTP请求，前端优化的第一条就是减少请求数，最直接有效的方法是使用图片精灵（CSS Sprite）。图片精灵就是把许多图片放到一张大图片里面，通过CSS来显示图片的一部分。
至于图片精灵的操作细节就不多做介绍了，网上相关内容很多。
10. 注意控制Cookie大小和污染
基本原理和使用方法：
有关Cookie的基础和高级知识可以去看本人写过的一篇文章《JavaScript 操作 Cookie》。
因为Cookie是本地的磁盘文件，每次浏览器都会去读取相应的Cookie，所以建议去除不必要的Coockie，使Coockie体积尽量小以减少对用户响应的影响；
使用Cookie跨域操作时注意在适应级别的域名上设置coockie以便使子域名不受其影响
Cookie是有生命周期的，所以请注意设置合理的过期时间，合理地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。