对于 Web 开发者，尤其是前端工程师来说，对网站进行 SEO 是必不可少的技能之一。
今天来个简单入门。
一、背景知识：搜索引擎工作原理
对于初学者来说，在某个搜索引擎网站上，从输入关键字到回车得到搜索结果的过程中发生了什么事？
回答这个问题之前必须了解的概念有：
1、搜索引擎数据库
存储着海量的关键字，每个关键字对应着相应的网址。关键字是由搜索引擎程序下载、分析而来，以供搜索。
2、Spider
即搜索引擎程序，也被叫做网页蜘蛛或网络爬虫，它是搜索引擎的核心程序。
蜘蛛的工作就是每时每刻地重复链接所指的网页下载、网页内容分析、提炼关键字并根据需要将关键字加入数据库的工作。
那什么情况下蜘蛛会将关键字添加到搜索引擎数据库呢？
如果蜘蛛认为网页的内容是数据库当前并没有的，并且对用户是有用的，那么提炼出来的关键字就将被存入数据库。
而如果经过蜘蛛的判断，网页内容是一些垃圾数据，那么蜘蛛会舍弃该网页，然后继续下载、分析下一个链接的网页。
3、搜索与排名过程
当用户使用某个搜索引擎输入某个关键字回车后，搜索引擎程序就会从后台数据库中检索出与之相关的网址呈现给用户。
由于同一个关键字对应很多个网址的情况是非常普遍的，所以这就面临了一个 搜索排序 的问题。
通常情况下，与关键字最吻合的网站理所应当地排在搜索结果的前面。但是，这里还有一个问题，就是：网站能否被搜索引擎“读懂”。
什么叫读懂什么叫读不懂？举个例子：
如果网站是有 Flash 或者说 Javascript 生成的，那么此时无论关键字和网站内容是多么相符，搜索引擎也不会收录该网站。
即网站内容要想被搜索引擎所搜录，首先就要被搜索引擎所识别，而识别的前提就是使用搜索引擎能够理解的语言。
所以这里就引出了一个问题：如何使用搜索引擎能“读懂”的语言呢？
二、什么是 SEO ?
1、概念
Search Engine Optimization：为了提升网页在搜索引擎自然搜索结果中的收录数量和排序位置而做出的优化行为就是 SEO
!注意
如果关键字只关联到互联网上极少的网站，在这种情况下一般也能够获得较前的排序结果，但是这种情况并不是 SEO。
2、SEO 分类
- 白帽 SEO
是搜索引擎所鼓励的，具有改良和规范网站设计，使之对搜索引擎和用户更加地友好，同时也能帮助网站获得更多来自搜索引擎的合理的流量的作用。
- 黑帽 SEO
一种欺骗搜索引擎从而获得较高排序的行为。这种情况会浪费用户的时间，比如一些不良网站上罗列实际内容并没有提供的关键字，用户点击进去后往往什么有用的信息都得不到。
三、白帽 SEO 常见手段
白帽 SEO 主要可以从以下方面来进行：
一、站在网站内容上的白帽 SEO
主要有如下措施：
- 对 网站标题、关键字、描述 精心设计：让搜索引擎知道该网站是做什么的。
- 网站内容优化：网站内容和关键字的对应、增加关键字的密度、增加长尾关键字。
Robot.txt文件- 网站地图
- 增加外链引用：到其他网站上进行宣传，把搜索引擎从其他网站上引到自己的网站上。
二、从前端工程师的角度的白帽 SEO
即：既可以让浏览器能读懂，也能让 Spider 读懂，越容易被 Spider 读懂的网站越容易被搜索引擎所收录。一般有如下 SEO 方案：
1、 网站结构布局优化
结构布局尽量简单，目录层次要少( 一般中小型网站目录层次大于 3 层后搜索引擎就不会继续分析 )，推荐扁平化结构。
以扁平化结构来进行网站结构布局优化，一般注意以下三点：
- ① 控制首页链接数量
网站首页是权重最高的地方，首页链接既不能太少，否则影响搜索引擎的收录；也不能太多，中小型网站推荐链接数为 100 以内，否则会影响用户体验。
- ② 扁平化的目录层次
不要使用纵深型的结构而是用扁平结构，目录层次不超过 3 次 —— 这既是对搜索引擎友好，也是对用户体验的考虑。
- ③ 导航 SEO
导航一般可以分为主导航、副导航、分类导航等，其位置可以位于网页的任何位置，以方便 SEO 为参考依据。
导航方式尽量采用文字，但是如果用了图片作为导航超链接，那么一定要设置 title 或 alt 属性值，以防止图床出现问题时候用户不知该导航指的是什么从而影响用户体验。
2、 采用 面包屑导航
说明:
起源于童话：樵夫、后母企图丢掉孩子、儿子事先留下面包屑，以方便回家的导航
使用面包屑导航的优势：
- 站在用户体验的角度
- ①. 让用户了解当前所处位置。
- ②. 使用户可以了解网站内容和组织形式。
- 站在 SEO 的角度
使搜索引擎清楚地“读懂”网站结构，还增加了大量的内部链接，方便抓取，降低了跳出率。
四、SEO 中不可忽略的细节
- 1、 增加页面相关性
首页中需要注意增加一些相关链接，以增强页面相关性和页面的权重。
除了 SEO 目的外，这样做还能留住访问者。
- 2、 优化分页
比较 3 中分页的写法：
①. 首页-上页-下页-尾页
②. 首页 1 2 3 4 5 6 7 8 9 10 下一页
③. 首页 1 2 3 4 5 6 7 8 9 10 下拉列表
推荐使用 ③ 的写法，对搜索引擎更友好。
- 3、 网站的加载速度
加载速度会影响用户和 Spider 的“耐心”，注意引用资源的可靠性。
此外，将 CSS 的引入放在 HTML 文档的开头，而将 Javascript 的引入放在 HTML 的末尾。
五、网页代码优化
<title>
网页标题要强调重点，每个页面不要重复出现。
<meta name="Keywords" content="..., ..., ...">
列举出几个重要的关键词即可。
<meta name="Description" content="...">
高度概括网页的内容，每个网页的 description 也要不同。
- 网页代码优化原则：
语义化代码
HTML 中的每个标签都有特定的意义。语义化就是在适当的位置使用适当的标签，使访问者和 Spider 都能够一目了然。举例说明：
在 HTML 中，<div> 和 <span> 的语义化程度最小，所以在构建类似菜单的时候不要使用它们而使用 <ul> 和 <li>。
<div> 和 <span> 更适合网页布局和定位。
CSS 的渲染交给浏览器，Spider 的抓取仅是标签代码内的内容( 要求精简而正确 )，这样就不容易混乱。
这就是在适当的时机使用适当的标签的理念。
六、其他常用 HTML 标签的 SEO 措施
<a>
加上说明、设置 title 属性值。对于指向其他网站的链接要设置 rel="nofollow" 属性，以防止 Spider 离开本网站而不再回来。
<h1>
标题一定要用 <h1>，这是 Spider 最看重的标签之一，所以 **不要滥用<h1>**。
<p>与<br>
<br> 只出现在 <p> 中，其他块级标签使用 CSS 控制，比如 padding 和 margin 属性。
<caption>
表格标题很容易被忽视，但是如果使用表格时候没用 caption 标签，对搜索引擎不友好的。
<img>
现在的 Spider 对图片的读取能力是不够的，应使用 alt 属性说明，对图片进行注释，以帮助搜索引擎读取图片。
<strong>、<em> 与 <b>、<i>
都是强调文字，此外<b> 和 <strong>、<em> 和 <i> 在浏览器上的效果一样。
但也有不同之处。两组的使用场景为：
<b>、<i> 对 SEO 效果不好而 <strong>、<em> 在搜索引擎看来是有比较高的权重的。
说明:
<strong> 是权重标签的代表，能够突出关键词，表现重要的内容。<em> 也是强调内容和吸引访问者关注，<em>对搜索引擎的权重仅次于 <strong>。
**如果要强调文字内容利于 SEO，则使用 、；如果仅仅强调内容在浏览器中的样式，则使用 、**。
七、其他网页代码优化的 TIPS
- 1、 重要内容 HTML 代码放在最前面
巧妙利用 CSS 布局。因为 Spider 抓取网页的顺序是由上至下的，在 Spider 没有“失去耐心” 之前尽量先把最重要的内容显示出来。广告等不重要的代码放在网页底部。
- 2、 重要内容 不要用 Javascript 输出
因为 Spider 看不懂 Javascript。
3、 尽量少使用 iframe 框架。
4、 谨慎使用 display:none;
对于想要暂时隐藏的文字尽量使用 z-index 属性或将其设置到浏览器的显示范围外，因为 Spider 会过滤掉 display:none; 中的内容。
- 5、 不断精简代码
标签中的内容尽量就是内容，不要使用其他的 HTML 代码。比如 ，如果确实需要空格效果，可以通过 CSS 来控制。