首发于向阳乔木
SEO学习之路:SEOer必须要懂的HTML代码标签

SEO学习之路:SEOer必须要懂的HTML代码标签

最近计划对网站的信息页进行改版,除了考虑用户体验,还需要考虑SEO相关因素。

在诸多SEO相关因素中,HTML代码也是很关键的一环,有不少细节需要注意。

但对于大多数前端工程师来说,通常都不了解搜索引擎优化,所以代码会出现一些SEO上需要避免的问题。

前端常见HTML标签的SEO用法

H标签

H标签也叫做Heading标签,在HTML语言里一共有六种大小的heading标签,从H1一直到H6。

<h1>-<h6> 标签一般用来定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。合理使用H标签可以让页面层级关系更清楚,让搜索引擎更好地抓取和识别页面主体内容。

1、每个页面有且只能有一个H1标签。
2、H1代表网页的主题,越靠近<body>标签越好,方便搜索引擎快速识别页面主题。对于首页来说,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。

<meta name="keywords"  content="XXX,XXX" />
<meta name="description" content="XXX" />

Keywords标签写页面主关键词,一般是5个词左右,用英文逗号分隔。
Description标签写页面的简介描述,一般在110字以内。(Google的话120字以内)

除此之外还有一些中国互联网特有的标签:
1、国内的主流浏览器都是双核浏览器:基于Webkit的内核用于常用网站的高速浏览,基于IE的内核主要用于部分网银、政府、办公系统等网站的正常使用。

360浏览器提供了一个控制浏览器内核的Meta标签。


若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit">
若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp">
若页面需默认用ie标准内核,增加标签:<meta name="renderer" content="ie-stand">

对于多数网站来说,为了让网页打开更快,用户体验更好,应该启用Webkit内核,代码如下。

<meta name="renderer" content="webkit">

2、当网站没有对应移动版页面或百度未能识别适配时,百度会把PC版自动转码为移动版,这样就会损失一些广告收入,需要在页面中添加如下代码禁止百度转码。

<meta http-equiv="Cache-Control" content="no-transform"> 
<meta http-equiv="Cache-Control" content="no-siteapp">

3、为了更好的让百度识别PC版对应的移动页面,需要做添加Meta声明如下:

http://3g.sina.com.cn/">
http://sina.cn/">

更多说明见:开放适配服务站长资讯百度站长平台

4、如果你的页面有地域属性,可以添加如下代码:


    <meta name="location" content="province={信息所在省};city={信息所在城市}" />
    


5、360搜索(好搜)设计了一套类似Facebook的Open Graph Protocol的Meta标签,用于搜索格式化展现。详细内容参考:智能摘要_360搜索使用帮助

标准化的标签模版支持短视频,影视,小说,新闻,商品,论坛帖子、博客等内容类型的数据。

比如对于我们的信息页面,计划添加如下Meta:

<meta property="og:type" content="product"/>
<meta property="og:image" content="{图片第一张地址,没有显示行业默认图}"/>
<meta property="og:title" content="{产品名称}"/>
<meta property="og:description" content="{页面描述}"/>
<meta property="og:product:price" content="{商品价格}"/>
<meta property="og:product:currency" content="CNY"/>
<meta property="og:product:brand" content="{品牌,没有写公司名}"/>
<meta property="og:product:category" content="{信息发布到的最底级分类}"/>
<meta property="og:product:nick" content="name={信息所属公司};url= {所属商铺链接}"/>

注意:添加后需要主动注册360站长平台提交你的页面。

Nofollow

一个正常的链接写法如下:

<a href="http://www.huangye88.com">黄页88网</a>

现在加上nofollow标签,如下:

<a href="http://www.huangye88.com" rel="nofollow">黄页88网</a>

这告诉搜索引擎蜘蛛不要对此链接进行跟踪。当不想把权重输给某个链接,但又不得不在内容上出现该链接时,就可以使用这样的方式屏蔽掉。

常见的比如:“关于我们”、“联系我们”等等,几乎所有网站底部都有这些链接,这些都需要添加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

  1. 最好把CSS和JS放到独立的外部文件中,这样可以减少代码量,让内容更简洁,方便搜索引擎识别。

当然,有时为了减少CSS和JS的请求数,有些大型网站会直接在内容页中输出CSS和JS。一般网站不这么做。

  1. 搜索引擎虽然现在也能识别JS里的内容,但一般来说,放在JS文件中的内容不会影响页面的SEO。利用这点,可以把必须要显示、但和页面主题内容不关联的内容放到JS中反写回页面,这样避免降低页面关键词密度或传递链接权重。document.write("XXX")

CSS样式命名

搜索引擎变得越来越智能,很容易通过你的cSS样式来识别页面内容。

合理有序的CSS命名规则可以不仅可以提升代码质量,而且更加符合搜索引擎的规范。

比如:

页头:header
顶部导航:topbar
登录:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg/tips
栏目标题:title
加入:joinus
指南:guide
服务:service
热点:hot
新闻:news
下载:download
注册:register
状态:status
按钮:btn/button
投票:vote
广告:ads
合作伙伴:partner
友情链接:friendLink/links
页脚:footer
版权:copyRight

不一而足,但最好与常规写法接近,比如有次我们的相关链接模块使用了ads标签,对应的SEO效果就下降了很多。(百度有可能识别为广告,对待可能就不同)

总结

HTML便签中还有很多需要注意的,比如非装饰性图片,都需要添加Alt标签,便于搜索引擎识别图片内容,而且这里的文本会计算到关键词密度中。

还有一些特别的技巧,比如代码的书写顺序和实际显示顺序,借助CSS相对定位和绝对定位,让重要的内容主体尽可能的接近body标签出现。让页面中出现在头部,但不重要的的内容,在代码靠后的位置出现。

总之,核心目标是引导帮助搜索引擎蜘蛛识别你的页面主题和内容,把页面所有重要的信息信号,用合理的标签展示出来,在不作弊的前提下,对页面做降噪处理。

欢迎目前负责网站SEO的朋友加我微信:vista8 备注:SEO

编辑于 2017-05-23 09:52