浅聊SEO

SEO【search engine optimization】即搜索引擎优化。

搜索引擎对用户来说，就是搜东西，那他是怎样展示关键词的相关东西呢？这就需要有人每天逛互联网，每天看无数个新网站，将所有逛过的网站贴标签，分类，排序。等有人想要找网页，他就能按照整理的标签，快速的展示结果。这个人自然就是搜索引擎公司。

那么我们作为网站编写者，很多时候我们都希望从搜索引擎获取客户流量，极度希望度娘收录咱的时候，能将自己的网页，放在相关关键字搜索页面的前列。

因此我们势必需要根据搜索引擎收录网站的方式，做一些优化，能让他更好的识别我们的网站。

白帽SEO与黑帽SEO

万事皆有利弊。

一句话，白帽是光明正大用技术宣传自己，黑帽是作弊蹭流量。

白帽seo是通过正常的手段对网站内部(包括网站标题，网站结构，网站代码，网站内容，关键字密度等)调整、网站外部的链接建设，来提高网站关键字在搜索引擎排名的一种seo技术。
白帽SEO是搜索引擎提倡的，也是一种良性竞争。运营者通过对自己网站合理的优化，让搜索引擎爬取，达到靠前排序。

黑帽SEO就是采用搜索引擎禁止的方式优化网站，不是关键字内容的网站，却添加该关键字，一般该类型网站点进去并不是用户想要的内容，是一大批很丑的广告。这当然不被搜索引擎提倡，甚至于说是头疼的，还需要想办法如何在搜索结果内剔除掉那些页面。影响搜索引擎对网站排名的合理和公正性。

前端SEO优化

我们作为前端工程师，自然考虑网站构建与代码上的优化————网站结构优化，代码优化。

网站结构布局优化

其实搜索引擎的抓取，也是按人类的逻辑来浏览收录，通过页面之间的链接串来串去，只不过比人要更蠢更机械一些。

所以讨论网站的结构时，我们可以从人的角度去想，什么样结构的网站能马上理解。
本网站举例

扁平化结构

控制首页链接数量

网站做到扁平，即让se能直观的理解。我们知道，爬虫爬取网页是根据链接与页面内容来的，因此，页面必须要有比较清晰的链接和文字说明内容。
iframe，flash做的页面，爬虫很难理解内容，这些对SE很不友好。

所以在首页，我们要尽可能合理的，清晰的放置多的页面链接，写清楚每个链接的描述，内容，让SE更好的理解，切忌不要繁复。

扁平化目录层次

网站层次既然要清晰，目录最好不要超过三次分级。人点三次找不到内容都不想往下翻了，四五层的结构完全可以称之为晦涩难懂。大部分网站，只需要一个总览分类列表，与详情页两层结构即可。不同的是，不同分类，不同详情长得不一样，但点击进入返回的逻辑层次很少。

导航SEO优化

不仅网站结构要清晰以外，网站页面之间的关联也要清晰，才能方便阅读理解。

大部分的导航都是这么做的。
header上面是总的大分类导航，左侧，是当前页面内容的小分类导航，不同大类的小分类不同。

还有最底部的footer的分类导航

这样，se在爬取链接的时候，能够很好的区分我们网站的结构，这样就能很好的找到想要的不同内容，贴上不同的目录标签，方便搜索。

除此之外还有一类，面包屑导航。除了上面的分类导航以外，链接之间的关联也是很重要的，面包屑导航能够很清晰的反映我们处于哪一层级的位置。

那剩下的部分是什么，非常常见的，就是我们的推广链接。他是正文链接的相关链接，添加这些相关的链接，也能够帮助当前页面增加权重，更好的理解页面的内容。

导航的细节

导航除了以上以外，就是分页了，每一个12345也是我们的链接，依旧是se爬取的对象。

对这个我们怎么做优化？先看一下常见的几种类型。

很明显，对于浏览爬取的人来说，链接越直接越明显，越容易获取。第三种方法明显更好，不仅能获取分页的数量，也能够直接获取链接，不需要通过上一页下一页，每次到下一个页面再来获取其他链接。

页面加载速度

浏览页面最烦的是什么，页面打不开。

se也是一样的，加载越慢，就会降低网站的权重，因此我们要控制好自己的页面大小，注意压缩，注意服务器响应。

代码优化

接下来就看代码啦！

title，keywords，description

在网页头部，我们有三个很重要的元素，用来描述页面。

<title></title>
<meta name="keywords" content="">
<meta name="description" content="">

我们尽可能的在这些地方，精简且全面的描述我们的页面。

语义化代码

在html标签中，每一个标签都规定过特定的用处。我们根据这些规则来正确使用标签，而不是所有的东西都使用div，就会很好的帮助SE来理解我们的网页。

标签	常用语义	seo优化方法
h1-h9	标题系列	将标题或者重要名称用h1包裹，副标题使用h2，加权重，若显大，css改样式就好
p	正文内容	正文统一用P标签，方便se理解注意：br标签只适用于文本内也就是p标签内
ul	无序列表	使用ul做导航可以帮助se理解这是导航栏
ol	有序列表
dl	定义数据列表
img	图片	图片存在title与alt，每一项都填写完整可以帮助理解图片
a	链接	存在rel，如果是外链而不是自己内部链接，设为rel="nofollow"，让爬虫不爬出自己的网站
strong/em	加粗/斜体	增加内容权重，强调内容，如果仅仅为了加粗斜体，使用<b><i>

html位置

se抓取的时候，把前面的html视为最重要的，因此，我们把重要的html写在最前面。如果真实展示不该这样，我们用css调整位置即可。

不要使用js输出内容

se在抓取内容的时候，是不识别js，只会浏览分析html，所以重要的东西，尽量不要使用js后期渲染

尽少使用iframe

se是不会获取iframe标签里面的内容的，所以我们展示内容，尽可能不要使用iframe

谨慎使用display:none

se会忽略读取这部分内容，因此如果我们为了不显示重要的内容，可以使用z-index，或者使用定位设到显示区域以外

精简代码

se是根据标签来判断内容及内容之间的联系，因此，越容易理解越好。我们就不要过于嵌套，能使用一个标签的事情就不要使用两个