前端与SEO

前端与SEO

做为一个前端，对seo有相当的关注度是非常必要的，我呢，写这篇文章，一是为了对学习内容的总结备忘，二是希望对需要的同仁有所帮助，如果有不好的地方还希望有砖轻轻拍，我没说到的点或不对的点请及时提出，好让我的脑程序及时更新~

一、SEO介绍

Search Engine Optimization(搜索引擎优化)

SEO有 白帽SEO和 黑帽SEO

>白帽SEO：起到了改良和规范网站设计的作用，使之对网站和用户更加友好，网站能从搜索引擎中获取更多合理的流量

>黑帽SEO：利用和放大搜索引擎政策缺陷获取更多用户的访问量，这类行为大多是欺骗搜索引擎。一般为无良网站所为，一般都是恶意插件什么的

ps:比如说加入很多相关词来引导搜索引擎的抓取，但是打开方面时，可能是各种不相关的广告和不良信息，并不是用户真正要获取到的信息，从而增加了访问量。

搜索引擎工作原理：

用户输入关键字  ->  搜索引擎数据库（海量关键字）  ->  搜索结果  ->  返回给用户

二、做为前端对SEO要做好的工作

注意：

1.JS,Falsh不利于搜索引擎收录，因为搜索引擎（百度小蜘蛛）是看不懂滴~

2.网站结构布局扁平化(尽量做到让客户点击三次他想要找的)是相当重要的~

 ps：不超过三层目录，容易爬完网站。同时，对于用户来说，点击三次，还没找到自己想要的，一般都会选择离开。

      

网站对seo友好的做法：

1.控制首页链接数量（中小型网站建议一百个左右）

2.扁平化的目录层次（尽量三次就能到达目的地）

3.导航SEO优化。（主导航、副导航、分类导航[导航尽量用文字表示]、面包式导航）

ps:用文字表示的导航，能够友好的被搜索引擎识别，如果一定要用图片表示，那么请加好title和alt（这样即可图片没有显示，也不会影响搜索引擎的识别）

面包式导航优势：从用户体验角度来看：可以了解当前所在位置，以及页面在当前网站的位置，能帮助用户快速学习和了解网站内容组织方式

4.避免使用table布局

>不利于后期维护 

>不利于SEO（小蜘蛛不喜欢table布局）

5.在栏目内有很多记录时，按20/50个每页来分页

>首页-上页-下页-尾页（不易收入）

>首页 1 2 3 4 5 6 7 8 9 10 下一页（更有利于小蜘蛛抓取内页，如果抓取第101页，直接进入第10页进行抓取）
>首页 1 2 3 4 5 6 7 8 9 10 下拉选择，小蜘蛛最喜欢第3种（可以直接进入每一页）

6.网页加载速度，过慢小蜘蛛不会等待，一个页面最好不要超过100k

7.对链向别的网站的a标签要加上 rel="nofollow",告诉搜索引擎不要去追踪此链接，防止蜘蛛爬行爬出本网站

8.<title></title>标签是网页标题，每个页面不要设置相同（按照页面功能来制定）

9.<meta keywords>网页关键词（内容要简明方便搜索引擎读取）

10.<meta description>网页描述（内容要简明方便搜索引擎读取）

11、语义化标签：
>标题的h1-h6表示

ps(仅个人在查阅资料后的观点):

h1用来修饰网页的主标题

h2用于表示一个段落的标题

h3表示段落的小节标题

明确： 因为搜索引擎需要在许多文本中明白内容写的是什么，所以它也会按照我们日常阅读的习惯，从头开始阅读并寻找文章的标题，因为它没有人阅读的     灵活性，所以需要h标签指导搜索引擎，使它快速明确文本。h1－h6标签是采用关键词的重要地方，这个标签应该包括文本中最重要的关键词，google     算法就指出，h标签直接的标题头文字，一定比其它地方的文章具备更重要的意义，如果过分使用容易产生不利的影响。

>table 要加caption（如果table有标题，请在table加caption）

>img 要加 alt说明

>重要html代码放前面（便于先解析）

>重要内容不要JS输出（搜索引擎看不懂js）

>尽量少用iframe(搜索引擎不会对iframe进行解析)

><strong><em>与<b><i>标签(前两者为强调搜索引擎会重视，后两者则是加粗和倾斜的操作)

>谨慎使用display：none（以下图片是摘录大牛对谨慎使用display：none的原因看法）