前端SEO优化

结构优化

1.扁平化结构，目录层次越少越好

层级结构3层为宜。让用户点3次就能到查看到自己需要的东西。

 

2.控制首页链接数量  

网上首页的链接不宜过多，100以下左右。太多了蜘蛛的检索也会累的，哈哈

 

3.导航SEO优化，尽量使用文字

文字导航利于蜘蛛检索字符，实在要用图片的话，需在图片社加上描点，title

 

4.面包屑导航

先来看看面包屑导航的来源（百度百科）：

很久很久以前，在大森林的边上住着一个贫穷的樵夫，他与妻子和两个孩子相依为命。
他的儿子名叫汉赛尔，女儿名叫格莱特。
后来樵夫的妻子去世了，他又给孩子们娶了一个后母。
后母计划把两个孩子带到森林的深处，然后趁他们睡着的时候跑掉。
汉赛尔无意中知道了后母的计划，于是偷偷地把一块面包藏在了口袋里。
在去森林的路上，汉赛尔悄悄地捏碎了他的面包，并不时地停下脚步，把碎面包屑撒在路上。
后母顺利地趁孩子们睡着的时候溜掉了，汉赛尔和格莱特醒来已是一片漆黑。汉赛尔安慰他的妹妹说：“等太阳一出来，我们就看得见我撒在地上的面包屑了，它一定会指给我们回家的路。
”但是当太阳升起来时，他们在地上却怎么也找不到一点面包屑了，原来它们都被那些在树林里、田野上飞来飞去的鸟儿一点点地啄食了。

一开始我也纳闷什么叫面包屑导航，赶紧百度一下。其实也就是路径导航，主要是让用户了解网站结构，了解当前位置，也便于用户返回前面的页面。

 

5.网站分页

淘宝：

百度：

增加分类导航，有利于搜索引擎，查找分页后的数据资料，比较友好

 

6.加载速度，减少页面大小

优化网站的加载速度，减少页面的体积，要是网站访问慢的话，搜索引擎也懒得检索网站

 

代码优化

1.网站标题title

<title>百度一下，你就知道 </title>
<title>淘宝网 - 淘！我喜欢</title>

每个页面的title，设置尽量不要设置成一样的。

 

2.关键词keyworks

<meta name="keyword" content="云服务器,云主机,云存储,开放存储,数据库,RDS">

网站的关键词，利于搜索引擎获取，可以排名靠前。可以跟时下的热词打擦边球（但是不推荐）

 

3.网页描述discription

<meta name="description" content="淘宝网 - 亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 8亿优质特价商品，同时提供担保交易(先收货后付款)、先行赔付、假一赔三、七天无理由退换货、数码免费维修等安全交易保障服务，让你全面安心享受网上购物乐趣！">

网站描述，可以尽量描述网站的的立场，是一个怎样的平台。

 

4.语义化标签（重点，前端开发要注意的）

标题h1-h6，用于文章标题。蜘蛛会检索加入数据库字段

ul无序列表；ol有序列表（例如排行）；dl 数据列表 （例如目录结构）

分清使用的场景

表示强调em,strong

文章强调的词，或者句子

a标签 

如果是外链的话记得添加上rel=“noflow”；放置蜘蛛一去不复返

添加上title，alt利于检索

img标签title和alt值要填上

段落使用p标签

重要的代码放前面

蜘蛛检索是自上到下的

重要代码不要用JS提现

搜索引擎是检索不到js

尽量少用iframe，搜索引擎对于ifame不友好

谨慎使用 display:none，搜索引擎不会获取display:none的数据，最好的是溢出隐藏掉  overflow:hidden

精简代码，能少用标签的话，尽量精简

 补充（性能优化）

1.尽可能减少http请求

2.使用CDN

3.使用缓存，尽可能的缓存数据，减少向服务器的http强求

4.Gzip压缩，减少传输的体积

5.css放置顶部，提高浏览器的速度，减少重绘

6.将js放置底部，阻止堵塞加载，先呈现页面

7.避免在css中使用Expressions。

.toTop{
     top:expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight - 60)));
}

8.js和css作为外部文件引用，客户端服务器会缓存其文件。特定的页面就直接写在页面当中即可，减少请求数

9.减少DNS查找

10.压缩js和css

11.避免重定向，不利于搜索引擎索引

12.移除重复脚本，浏览器不会智能判断，都会执行。可能会导致得不到预期的结果

13.配置实体标签 ETag （传本地数据ETag标签，让服务器对比，数据跟本地一致用本地数据。不一致服务器在返回新的数据）

14.ajax缓存，区别GET和POST请求