HTML和SEO基础知识:H标签全透视

原文地址:http://www.chinaz.com/web/2010/0921/134391.shtml

什么是H标签?

h1,h2,h3,h4,h5,h6,作为标题标签,并且依据重要性递减。我认为遵循这样的原则是很有必要的,它能让页面的层级关系更清楚,让搜索引擎更好地抓取和分析出页面的主题内容等等。为了更好的理解,请看下面的代码:

<body>
<h1>一级标题</h1>
<p>段落</p>
<div>
<h2>二级标题</h2>
<p>...</p>
<div>
<h3>三级标题</h3>
<p>...</p>
<div>
<h4>四级标题</h4>
<p>...</p>
</div>
</div>
</div>
</body>

浏览器的默认样式也是依据重要性递减,字号从h1到h6由大变小。而不同的浏览器中的样式又有一些差别,介于这种差别,我们通常在布局中用CSS将其统一。

大家怎么用的?

现在很多网站(包括淘宝、新浪、搜狐等知名网站),都喜欢把h1用在LOGO上, 如图:

大家都这样用,不无道理,其实优点蛮多的:它概括了整个页面的内容,而且LOGO离body很近,这样就方便了搜索引擎最快的抓取主题,再者从语义来说也更加精准。

当然也不是全部网站都将h1用在LOGO上,网易的用法就是比较特别的例子:

网易将h1设置了display:none样式,使其隐藏起来,这样既解决了h1不知道放哪里的矛盾又起到了SEO优化的作用,可谓一箭双雕。

而腾讯首页的h1则是头条新闻,如图:

从上面的例子可以看到各大网站对于h1的用法都有所不同,对于h1放哪里?一直是一个争议的问题,但我认为到底放哪里没有绝对的答案。我认为应该根据网页的定位、类型、用户搜索习惯等因素综合考虑。比如新闻类的网站,可以把h1放在头条新闻上;综合门户类的网站,那就把h1放在LOGO上吧;如果公司网站也可以把h1放在LOGO上,因为用户搜索公司一般喜欢搜公司的名称;如果有网站宣传语,还可以把h1放在宣传语上,这也是不错的选择。总之,选择一种最适合的才是最好的。

关于h2我一般喜欢把它用在首页的大栏目上,如图:

内容页,我更习惯把h2让给文章标题,栏目标题则用h3表示,如图:

h3多用于栏目标题,如图:

农信通产品首页用到的H标签,不仅有清晰的层级关系,而且突出了产品内容的重要性,对搜索引擎来说也非常有利。

下面这个例子也很有意思,如图:

栏目标题用了h2,新闻标题则用了h1,如果依照层级关系来说,它们的顺序颠倒了,但它并没有错,在实际运用H标签的时候,我们也可以根据内容的重要性来定义。所以只有在掌握好基础理论的基础上灵活的运用,才能把它的作用最大化。

从上面的几个例子中不难看出H标签的用法是很灵活的,并不是局限在这几种用法以内,我们在运用中只要遵循依据重要性递减的原则,举一反三,h4-h6亦是如此。

总结了一些些

根据参考资料、前端制作牛人、知名网站等对H标签的理解和运用,我总结了以下规范,希望能带给大家一些参考价值。

h1一级标题

代表重中之重,它的地位在页面中跟关键字的地位一样重要。一般运用于网站标题或者头条新闻上,一些大型网站也运用在LOGO上,虽然h1代码可以写多个,但实际语义上有唯一性,h1标题在一个页面里面最好只出现1次或者没有。

h2二级标题

主要出现在页面的主体内容的文章标题和栏目标题上,三列结构一般在中间,二列结构一般在重要的一边。可与h3搭配使用。

h3三级标题

一般主打页面的边侧栏。h4是它的辅助,出现频率不高。

页面层级关系不能太深,所以h4,h5,h6一般出现较少。

时间: 2024-10-08 23:33:08

HTML和SEO基础知识:H标签全透视的相关文章

SEO基础知识_绝密教程

<p align="center"> </p> <p>   </p> <p align="center"> 第一次接触SEO,请阅读本基础指南入门,也可以注册论坛:<a  1-1.html" target="_blank"><span style="color:black;">从一句话入门</span><span s

编程入门:C语言基础知识全网超全不用到处找了!(文末附清单)

你背或者不背,干货就在那里,不悲不喜 你学或者不学,编程就在那里,不来不去 听到这话的你是否略感扎心? 编程入门:C语言基础知识全网超全不用到处找了!(文末附清单)01基础知识 计算机系统的主要技术指标与系统配置. 计算机系统.硬件.软件及其相互关系. 微机硬件系统的基本组成. 包括:中央处理器(运算器与控制器),内存储器(RAM与ROM),外存储器(硬盘.软盘与光盘),输入设备(键盘与鼠标)输出设备(显示器与打印机).如果大家如果在自学遇到困难,想找一个C++的学习环境,可以加入我们的C++学

SEO基础知识

作为一个网站优化者,有一些基础seo知识点是大家必须要掌握的,网站排名的好快,和这些基础的SEO优化知识有没做好,有没做到位,有着直接的关系!今天,上海SEO就把我前面讲的SEO优化基础知识做个总结,大家优化网站时,比对自己现在做的网站是否存在这样的问题,进行基础的网站优化!这些都没有问题后,我们的网站优化就已经迈开成功的一大步! 一.避免站点有死链接 死链接指的就是失效的链接.错误链接,它原本是正常的,但是后来就变成无效的链接,使得网页中打开这个死链接地址,服务器回应的就是打不开的页面或友好的

SEO基础知识之过度优化的六大现象

网站过度优化,顾名思义,就是指网站SEO优化过于明显,让搜索引擎误以为这是一个垃圾网站,依靠作弊手法提升网站排名.搜索引擎优化的目的是为了更好地服务用户,满足用户需求,为了优化而优化只会导致搜索引擎厌恶你的网站. 一.关键词排名下降 在网站优化过程中,因为激烈的行业竞争,关键词排名上下浮动是一个非常正常的现象.关键词排名是需要不断维护的,甚少有网站能够长时间维持一个稳定的排名.但若是网站关键词排名出现急剧下滑的现象,那就要考虑是否由于过度优化的原因了.通常情况下,对于过度优化的网站,搜索引擎给出

js基础知识总结(全)

1.js版HelloWorld <script type="text/javascript"> alert("HelloWorld"); </script> 2.注释 单行// 多行 /**/ 3.操作符 +.-.*./.%.+=.-=.==(数值一样).===(类型和数值都一样) 4.逻辑运算符 ||.&& 5.定义变量(弱类型) var num= 1; var string = "我是中国人"; var

ASP.NET的SEO:基础知识

本系列目录 首先谈一点我自己的体会,我还是希望能和大家分享: 当你读到一定数量的SEO资料后,你会发现,对同一个问题,众说纷纭,莫衷一是.这其实主要是因为以下一些原因造成的:1. 很多SEO技巧,是"推测"出来的,最多可以算是一种经验总结.因为搜索引擎不可能完全的公布其排名算法,所以就见仁见智了.2. 那么有没有权威的说法呢?还是有的,百度和Google都有类似"优化网站"的指导,百度做得比较简单,见http://www.baidu.com/search/guide

做好SEO需要掌握的20个基础知识

作为一个网站优化者,有一些基础seo知识点是大家必须要掌握的,网站排名的好快,和这些基础的SEO优化知识有没做好,有没做到位,有着直接的关系!今天,伟伟SEO就把我前面讲的SEO优化基础知识做个总结,大家优化网站时,比对自己现在做的网站是否存在这样的问题,进行基础的网站优化!这些都没有问题后,我们的网站优化就已经迈开成功的一大步! 一.避免站点有死链接 死链接指的就是失效的链接.错误链接,它原本是正常的,但是后来就变成无效的链接,使得网页中打开这个死链接地址,服务器回应的就是打不开的页面或友好的

最全的Spark基础知识解答

最全的Spark基础知识解答 时间:2016-12-12 12:00:50      阅读:19      评论:0      收藏:0      [点我收藏] 原文:http://www.cnblogs.com/sanyuanempire/p/6163732.html 一. Spark基础知识 1.Spark是什么? UCBerkeley AMPlab所开源的类HadoopMapReduce的通用的并行计算框架. dfsSpark基于mapreduce算法实现的分布式计算,拥有HadoopMa

Seo:入门须知(六)H 标签的运用方式

H 标签的运用方式 Html知识:H1-H6,一个页面中H1只能用一次 普通网站:H1-H3 重要程度依次递减:H1>H2>H3.楼层理解,H3是H2的附属分支 内容页: H1:文章标题上 H2:相关推荐 H3:用在最新文章,侧边栏等 首页: H1:LOGO H2:大模块 H3:用在H2的分支上,用在底部不重要的模块上 原文地址:https://www.cnblogs.com/chenshuisen/p/11447943.html