SEO中不可忽视的h1到h6的应用

那天在群里有位SEO大拿,于是我吵吵着让大佬帮我看下我的博客优化还能怎么搞,他回我说我的博客缺少h1标签。从这里拉开了话题。着重聊了些h1标签的内容,其实也都是老生常谈。因为当时重建这个博客的时候就考虑到优化因素在内,所以今天抽空将我所理解的h1到h6的使用记录下来,也是于大佬们探讨。

h系列标签是什么?

h标签是html中常用的元素,通常都是用于定义页面中的标题,也就是说h标签的含义非常明确,就是做标题,无他,所以h标签不像p标签或者span标签那样呈现的是页面结构属性,一般认为它呈现的是目录属性。

h标签又细分为h1、h2、h3、h4、h5、h6六种规格。层级关系依次递减,相对于搜索引擎来说,它们圈定的标题重要性也同样依次递减。如何科学规范的使用h标签是做SEO的基础学问。

h系列标签的样式如何处理?

h标签在使用的时候,由于默认加载的样式通常无法满足页面设计。样式需要被重置,可以在样式表中定义h系列标签的样式。有两个问题需要注意:1、h系列标签不能使用align属性。2、h系列标签的着重是递减关系,所以自定义的字号需要递减,以免误导搜索引擎。

h系列标签的使用。

1、h系列标签的递减关系存在,所以在页面应用是不能颠倒使用顺序,例如h6标签防止在h1标签的前面。它们是一个纵向层级关系。也因此,不同等级的h标签不要出现在同一行内。h1标签内容具有唯一性,所以不同页面的h1标签内容最好是不相同的,在html页面嵌套使用中要注意这点。

2、所有h标签仅包含文字内容,不要将图片等其它类型资源包含在h标签内。

3、h标签内部是标题,这就限定了它内部应该是一个完整的句子,不能是词语,更有甚者在里面堆砌关键词。

4、h1标签作为重点,它仅能在当前页面出现一次,并且只能出现在body标签内部。越接近body越好。一般作为当前文档的主标题使用。那它和title有什么区别?title是在head中,title的内容通常显示在浏览器的标签上,它的作用更多的是提供机器使用和识别。而h1则不同,它是完完整整针对访问者的。只需记住title的内容可以直接套用h1标签的内容。而h1标签的内容则不能完全引用title的内容。

5、h2通常作为副标题使用,作为h1的注解,一般意义上h2标签在页面中同样最好仅使用一次。

6、h3到h6标签作为段落标题、小节标题在使用数量上则没有限制了,仅需遵守不要颠倒次序即可。

本站h系列标签的使用情况。

首先本站并没有使用h1和和标签,最大的层级是h3标签,大家可以看到本文的标题使用的是h3,且未定义任何样式,仅受父级元素约束。h3标签内的文本使用文章标题,且没有添加本站的关键词“安吉网站建设”。本页面title的内容是套用h3标签内容后补加了网站名称西枫里博客,正如上面所说h1和title的关系。本文段落间小标题使用的是h4标签,且h4的样式被深度定制,以利于阅读。

最后说了这么多,其实都是老生常谈的内容,并没有新鲜花样。主要还是告诉大家h系列标签的两个重要使用原则:审慎原则和层级原则。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网杂技

深入理解视觉格式化模型

“理论不懂就实践,实践不会就学理论”,非常赞同bluedavy的这句话。实践过程中经常会遇到某个属性的使用,浏览器渲染效果与预期效果不符,虽然通过死记硬背能避免...

3469
来自专栏前端新视界

Vue.js 系列教程 5:动画

原文:intro-to-vue-5-animations 译者:nzbin 译者的话:经过两周的努力,终于完成了这个系列的翻译,由于时间因素及个人水平有限,并没...

3337
来自专栏非著名程序员

目标:双向拖动的自定义View

国际惯例先预览后实现 ? 我们要实现的就是一个段位样式的拖动条,用来做筛选条件用的, 细心的朋友可能会发现微信设置里面有个一个通用字体的设置, 拖动然后改变字...

2156
来自专栏编程之旅

iOS开发——影响图形性能的因素以及检测方法

我想各位攻城狮们肯定听过一句话:“过早的优化是万恶之源”。若是你有着丰富的项目经验,一定会对这句话有着自己的体会,而若是编程新手,那么,请牢记这句话。在一个项目...

1112
来自专栏一“技”之长

iOS动画开发之一——UIViewAnimation动画的使用

      一款APP的成功与否,除了完善的功能外,用户体验也占有极大的比重,动画的合理运用,可以很好的增强用户体验。iOS开发中,常用的动画处理有UIView...

1103
来自专栏Android先生

一种粗暴快速的Android全屏幕适配方案

由于Android碎片化严重,屏幕适配一直是开发中较为头疼的问题。面对市面上五花八门的屏幕大小与分辨率,Android基于dp与res目录名称来适配的方案已无法...

1213
来自专栏前端说吧

css笔记 - transition学习笔记(二)

transition过渡 :用于当元素 从一种样式变换为另一种样式 时为元素添加效果。

863
来自专栏非典型技术宅

iOS动画系列之六:利用CABasic Animation完成带动画特效的登录界面1. 画风突变的笑脸2. 心跳3. iOS实践:实现一个带动效的登录界面

1356
来自专栏守候书阁

编写自己的代码库(css3常用动画的实现)

在月初的时候,发了CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)。js的代码库也发过两次,两篇文章。之前也写了css3的热身实战,既然热身完了...

1552
来自专栏我分享我快乐

响应式jquery小效果实现思路

有很多同学在实现jquery效果时,不知道怎样符合响应式布局。我写了个小案例,帮大家找找思路,希望能帮到你。 效果如下: ? 代码如下: <!doct...

38111

扫码关注云+社区