SEO学习之路：SEOer必须要懂的HTML代码标签
最近计划对网站的信息页进行改版，除了考虑用户体验，还需要考虑SEO相关因素。
在诸多SEO相关因素中，HTML代码也是很关键的一环，有不少细节需要注意。
但对于大多数前端工程师来说，通常都不了解搜索引擎优化，所以代码会出现一些SEO上需要避免的问题。
前端常见HTML标签的SEO用法
H标签
H标签也叫做Heading标签，在HTML语言里一共有六种大小的heading标签，从H1一直到H6。
定义最大的标题。
定义最小的标题。合理使用H标签可以让页面层级关系更清楚，让搜索引擎更好地抓取和识别页面主体内容。
1、每个页面有且只能有一个H1标签。
2、H1代表网页的主题，越靠近标签越好，方便搜索引擎快速识别页面主题。对于首页来说，H1一般用在品牌名上。对于内容页面，H1就是页面主标题。重点核心关键词往往需要在H1标签中出现。
3、H2可以有多个，一般用在段落标题、文章副标题或模块名标题上，可以部署长尾关键词。
4、H3可以有多个，一般用做段落小节标题或模块名标题，可以部署长尾关键词。
5、H4-H6标签很少用，一般用在相对不是特别重要的内容上。（但比一般HTML标签比如P权重更高）
不加任何样式的H标签很丑陋，各个浏览器解析也不一致，所以都会重新定义H1标签的样式。
国外的SEOer测试：对于Google来说，加样式的H1标签比不加的SEO排名效果好。（百度不清楚）
H标签不能滥用，否则有副作用。比较常见的用法是：主标题用H1，副标题用H2、模块名或小节标题用H3。甚至跳过H2，只用H1和H3。
Meta标签
最常见的Meta是Keywords和Description。
Keywords标签写页面主关键词，一般是5个词左右，用英文逗号分隔。Description标签写页面的简介描述，一般在110字以内。（Google的话120字以内）
除此之外还有一些中国互联网特有的标签：1、国内的主流浏览器都是双核浏览器：基于Webkit的内核用于常用网站的高速浏览，基于IE的内核主要用于部分网银、政府、办公系统等网站的正常使用。
360浏览器提供了一个控制浏览器内核的Meta标签。
Nofollow
一个正常的链接写法如下：
黄页88网
现在加上nofollow标签，如下：
黄页88网
这告诉搜索引擎蜘蛛不要对此链接进行跟踪。当不想把权重输给某个链接，但又不得不在内容上出现该链接时，就可以使用这样的方式屏蔽掉。
常见的比如：关于我们、联系我们等等，几乎所有网站底部都有这些链接，这些都需要添加Nofollow标签。
这些页面带来的SEO价值不高，和当前页面的关联度一般不大，为避免浪费搜索蜘蛛的抓取爬行，需要通过Nofollow标签屏蔽掉。
当我们知道了原理后，还可以把其他链接都屏蔽掉，比如天朝独有的备案链接：
http://www.miitbeian.gov.cn" rel="nofollow" target="_blank">京ICP备XXX号
还有登录、注册，甚至首页都可以根据需要屏蔽掉，从而引导蜘蛛抓取更重要、更希望它收录的内容。
iframe标签
搜索引擎的蜘蛛不会识别在iframe中被调用的图片、文本、url等内容的，因为该内容不属于该页面，只是访问的时候被临时的调用。百度SEO建议中也说过：frame/frameset/iframe等标签,会导致百度spider的抓取困难。
利用这一点我们可以把网站中需要给用户查看，但不需要搜索引擎抓取的内容用iframe框架进行显示。
比如一些网站最顶部的Topbar导航栏，往往是注册、登录等等，可以写在iframe框架中。
还有一些赞助商广告，如果不需要SEO效果，都可以放到独立的iframe中，只是在页面中引用。
但是不易过多使用，有可能被认为作弊，而且iframe对页面加载速度明显不利。
CSS和JS
最好把CSS和JS放到独立的外部文件中，这样可以减少代码量，让内容更简洁，方便搜索引擎识别。
当然，有时为了减少CSS和JS的请求数，有些大型网站会直接在内容页中输出CSS和JS。一般网站不这么做。
搜索引擎虽然现在也能识别JS里的内容，但一般来说，放在JS文件中的内容不会影响页面的SEO。利用这点，可以把必须要显示、但和页面主题内容不关联的内容放到JS中反写回页面，这样避免降低页面关键词密度或传递链接权重。document.write("XXX")
CSS样式命名
搜索引擎变得越来越智能，很容易通过你的cSS样式来识别页面内容。
合理有序的CSS命名规则可以不仅可以提升代码质量，而且更加符合搜索引擎的规范。
不一而足，但最好与常规写法接近，比如有次我们的相关链接模块使用了ads标签，对应的SEO效果就下降了很多。（百度有可能识别为广告，对待可能就不同）
总结
HTML便签中还有很多需要注意的，比如非装饰性图片，都需要添加Alt标签，便于搜索引擎识别图片内容，而且这里的文本会计算到关键词密度中。
还有一些特别的技巧，比如代码的书写顺序和实际显示顺序，借助CSS相对定位和绝对定位，让重要的内容主体尽可能的接近body标签出现。让页面中出现在头部，但不重要的的内容，在代码靠后的位置出现。
总之，核心目标是引导帮助搜索引擎蜘蛛识别你的页面主题和内容，把页面所有重要的信息信号，用合理的标签展示出来，在不作弊的前提下，对页面做降噪处理。
