浅聊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是根据标签来判断内容及内容之间的联系，所以，越容易理解越好。咱们就不要过于嵌套，能使用一个标签的事情就不要使用两个