1. 概念
SEO(Search Engine Optimization)，即搜索引擎优化。SEO是随着搜索引擎的出现而来的，两者是相互促进，互利共生的关系。SEO的存在就是为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。 而优化的目的就是为了提升网站在搜索引擎中的权重，增加对搜索引擎的友好度，使得用户在访问网站时能排在前面。
分类：白帽SEO和黑帽SEO。白帽SEO，起到了改良和规范网站设计的作用，使网站对搜索引擎和用户更加友好，并且网站也能从搜索引擎中获取合理的流量，这是搜索引擎鼓励和支持的。黑帽SEO，利用和放大搜索引擎政策缺陷来获取更多用户的访问量，这类行为大多是欺骗搜索引擎，一般搜索引擎公司是不支持与鼓励的。本文针对白帽SEO，那么白帽SEO能做什么呢？
- 对网站的标题、关键字、描述精心设置，反映网站的定位，让搜索引擎明白网站是做什么的；
- 网站内容优化：内容与关键字的对应，增加关键字的密度；
- 在网站上合理设置Robots.txt文件；
robots协议也称爬虫协议、爬虫规则等,是指网站可建立一个robots.txt文件来告诉搜索引擎哪些页面可以抓取,哪些页面不能抓取,而搜索引擎则通过读取robots.txt文件来识别这个页面是否允许被抓取。
- 生成针对搜索引擎友好的网站地图；
- 增加外部链接，到各个网站上宣传。
2. 优化
2.1 网站结构布局优化
网站结构应当尽量简单且扁平化。一般而言，建立的网站结构层次越少，越容易被爬虫抓取，也就容易被收录。一般中小型网站目录结构超过三级，爬虫便不愿意往下爬了。
优化网站结构需要做到：
(1) 控制首页链接数量： 网站首页是权重最高的地方，如果首页链接太少，没有“桥”，爬虫不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。
(2) 扁平化的目录层次： 尽量让爬虫跳转3次就能到达网站内的任何一个内页
(3) 导航优化： 导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。
其次，在每一个网页上应该加上面包屑导航，既有利于用户体验，也有利于爬虫了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。
(4) 把重要内容HTML代码放在最前面： 搜索引擎抓取HTML内容是从上到下，利用这一特点，可以让主要代码优先读取，广告等不重要代码放在下边。
(5) 控制页面的大小，减少http请求，提高网站的加载速度： 一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，爬虫也会离开。
(6) 网站不同板块布局： 页面头部：logo及主导航，以及用户的信息；
页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。
页面底部：版权信息和友情链接。
2.2 网站代码优化
(1) 突出重要内容---合理的设计title、description和keywords： 标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的标题中不要设置相同的内容。
网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。
关键词，列举出几个页面的重要关键字即可，切记过分堆砌。
(2) 语义化书写HTML代码： 尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6 是用于标题类的，重要的文字使用strong等.
(3) 内链加title，外链加rel='nofollow'： 页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道。而外部链接，链接到其他网站的，则需要加上 rel="nofollow" 属性, 告诉 “蜘蛛” 不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。
(4) 图片要加alt属性： 当网络速度很慢，或者图片地址失效的时候，就可以体现出alt属性的作用，他可以让用户在图片没有显示的时候知道这个图片的作用。
(5) 重要内容不用js输出： 因为“蜘蛛”不会读取JS里的内容，所以重要内容必须放在HTML里。
(6) 谨慎使用 display:none： 对于不想显示的文字内容，应当设置z-index或缩进设置成足够大的负数偏离出浏览器之外。因为搜索引擎会过滤掉display:none其中的内容。
2.3 网站性能优化
2.3.1 减少http请求数量
在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的。
(1) CSS精灵图： 将多张图片合并成一张图片达到减少HTTP请求的一种解决方案
(2) 打包CSS和JS文件： 现在前端有很多工程化打包工具，比如webpack。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。
(3) 采用lazyload： 俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
2.3.2 控制资源文件加载优先级
浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受JS加载影响。
一般情况下都是CSS在头部，JS在底部。
2.3.3 尽量外链CSS和JS
<link rel="stylesheet" href="asstes/css/style.css" />
<script src="assets/js/main.js"></script>
2.3.4 利用浏览器缓存
浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。
2.3.5 减少回流
回流是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如果Reflow的过于频繁，CPU使用率就会急剧上升。