前端优化之SEO技巧小谈

SEO (Search Engine Optimization) 中文大意为“搜索引擎优化”，所谓SEO是指通过对网站的结构，代码等优化以提高网站在百度，Google等搜索引擎中的排位，SEO不仅可以使网站在搜索引擎排位提示，获得更多的访问量，同时也是有助于提高网站代码质量，为用户带来更好的体验。
若作为优秀的前端工程师，从网站的设计到建设再到运行的整个过程中都应贯穿SEO思想。大到网站结构，小到某一行代码，可能都会影响到网站的排位，所以不要低头苦写代码了，多烧脑多思考，或许会事半功倍。

     一、结构优化  

 所谓结构优化，指网站布局设计的优化，合理的布局设计，有利于搜索引擎抓取，也更能够留住访客。网站结构提倡简介直观，即显网站简约大气，又突出网站主 题。
                                                                                                                                                      

1.网站首页优化

作为网站门户，首页优化是SEO重中之重，对于首页SEO有以下几点建议
a.控制网站首页链接数量
网站首页链接应控制在合理的区间内，不可过多也不可过少，一般控制在50左右，不超过100，应把网站中权重较高的链接挂在首页，避免过多垃圾链 接，为链接而链接的现象。
b.合理的网站结构
网站结构层次不应过于复杂，以三层结构最佳，即通过三层结构能够访问到网站的任何地方，简洁的网站分层有利于突出网站主题，功能，方便访客浏览 网站也利于搜索引擎抓取。谁也不愿意再次访问一个点来点去都找不到自己所需浏览内容的网站
c.导航栏优化
导航栏就是网站的地图，建立导航栏的目的应使得网站空间感清晰，通过导航栏能够迅速定位所需浏览的内容位置，导航栏是大体应划分为主导航、副导 航、内容，导航提示应简洁明确。

2.网站内页优化

a面包屑导航
所谓面包屑导航，是指显示当前页面在网站中所处位置，可以返回上级的导航条，通过面包屑导航，让用户以及搜索引擎能够知道所处网站位置，同时避 免死链接。
b合理的内容布局
网站内容布局同样提倡简洁，以导航，内容主题，以及相关链接栏，一个页面内容过多会影响网页加载速度，影响用户体验，搜索引擎抓取，采用分页是 一个不错的方案，说到网页加载速度即性能优化，那又是一个大学问了，这里不再具体说明

二、代码优化

说到代码SEO在具体编程过程中也是处处体现，若想编写出优秀的前端页面，了解学习SEO思想，也是必须的人

1.<title>标签
<title>标签一定要有，说明页面关键词，避免与其他页面重复。


2.<meta keywords>标签
<meta keywords>标签，罗列网页关键词


3.<meta descriptions>标签
<meta descriptions>标签，网页内容高度概括，具体技巧可以参考优秀网站的写法。

4.语义化代码
所谓语义化代码，合适的位置用合适的标签，明确HTML标签的功能，理解每一个标签设计的意义后再使用，而不是达到目的即可，这样你写的HTML也会更 贴近搜索引擎抓取算法，同样提高页面质量。再说了作为标记性语言，HTML标签也不过那么几个，虽说简单，切记不求甚解，会用就行。这就是所谓的“深刻理解 W3C标准”的重要性。
简单举例：
(1)  H1-H6标签用于标题，最重要的标题要用H1标签；
(2)  UL标签用于无序列表；
(3)  OL标签用于有序列表；
(4)  em、strong用于强调，仅仅加粗斜体不表示强调时使用<b>、<i>标签；
(5)  <a> 标签添加说明，外链接要加上rel="nofolow"；
(6)  <br>标签只用于文本内容的换行，其他位置换行通过CSS样式调整；
(7)  <table>中标题用<caption>
(8)  重要的HTML代码考前放
(9)  重要内容不用JS输出，搜索引擎不会读取JS代码；
(10)  CSS 、JS代码尽量使用外联，CSS切记使用行内样式；
(11)  HTML、CSS、JS分层明确，力求内容、表现、行为分开。


关于SEO的话题还有很多很多，在我看来，SEO更是一种思想，是提供书写高质量代码的指导，所以跟wool一起努力吧!