搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > SEO答疑学堂 > 「知识」HTML语义元素含义与SEO详细讲解

「知识」HTML语义元素含义与SEO详细讲解

SEO答疑学堂 2018-02-28

耐心点、坚强点,总有一天,你承受过的疼痛会有助于你,生活从来不会刻意亏欠谁,它给了你一块阴影,必会在不远地方撒下阳光。


今天给各位同学具体讲解这些HTML语义元素在SEO中都包含哪些意思,到后期SEO优化将会越来越重视细节优化,希望各位同学能在这节课中学到新的知识。

— — 及时当勉励,岁月不待人。


HTML语义元素含义介绍


时本文总计约 2000 个字左右,需要花 8 分钟以上仔细阅读。


上期我讲过HTML语义元素构建网页的一些基础知识“”,没有看的同学可以先看看这篇文章。


如果各位同学对HTML有所了解,那么就会知道HTML标签(大部分)用于格式化内容; 这些标签告诉浏览器如何在页面上显示内容。


一些标签传达语义信息(即含义)。以下是您需要了解的语义HTML5最有用的标签。

接下来,各位同学请继续阅读来了解下每种方法的正确用法。

1
 H1到H6=标题


我相信每个人都应该知道<H>标签。H标签将主体内容分解成子主题和子子主题。<h1>描述了整篇文章所涵盖的主题。在这之下,其他<h>标签用于给子主题分级。所以每个<h2>都是整个主题(父<h1>标签)的一个不同的子主题。每个<h3>都是其父<h2>的子主题 - 因此是该子主题的子主题。


<h>标签非常强大,因为它们识别内容的关键子主题,它们的相对重要性以及它们之间的关系。这是很多正在传达的语义信息。这是非常值得我们来花时间更深入的去理解H标签的含义。


但是,在目前来说,我看到过许多网页并不尊重<h>标签的语义。例如,直接从<h1>跳到<h3>,或是运用多个H1标签,还有的就是H2-H6标签包含的内容根本就与H1标签包含的内容毫无关联。这些做法,各位同学千万不要这样做。在语义上使用<h>标签来表示结构并使用CSS /类来控制文本的视觉方面。


提示:虽然标题从H1到H6都可以使用,但使用H5和H6的时候几乎不存在。一旦你达到H4,我们就要问问这些内容真的就与主体相关吗?真有这么多子主题吗?


在语义上使用标签,例子:

「知识」HTML语义元素含义与SEO详细讲解

重要!上例中文本的颜色,大小和水平位置与标签的语义完全无关。


在语义上,下面的HTML是完全一样的东西。

「知识」HTML语义元素含义与SEO详细讲解

在本文中请记住,语义HTML标签中文本的可视化表示不会影响这些标签传递给机器的语义含义。


2
 strong标签=重要

「知识」HTML语义元素含义与SEO详细讲解

如果一个关键词或是一句话在该段落中或全文中比较重要,那么请使用<strong>标签而不是<B>标签。


对于strong标签的意义来说,我们千万不要过度使用该标签,要不然会导致搜索引擎误认为过度优化的嫌疑。谨慎使用并正确使用。


3
 em标签=重点、强调

「知识」HTML语义元素含义与SEO详细讲解

如果为了使句子更有意义,应该更多地强调一个关键词或多个关键词,然后使用<em>标签。


其实,在有些阅读器中遇到这个标签时,他们会强调他们的(机器人)声音。

4
 mark标签=突出显示的文本内容

「知识」HTML语义元素含义与SEO详细讲解

这用于标记(或突出显示)文本,由于该段内容在上下文的适用性很强,因此可以引起读者对文本的关注。例如突出显示问题的简短答案。


5
 del/ins标签=初始发布后删除的文本/初始发布后插入的文本

您可以使用它来指示更新和修改; 结合<del>使用<ins>,这两个标签对于我们来说应用的比较少,只做些了解即可。


6
 abbr标签=缩写/首字母缩略词

「知识」HTML语义元素含义与SEO详细讲解

这种用法较少,但对消除歧义很有用(歧义对搜索引擎而言是一个巨大的问题)。把这个标签放在“世卫组织”一词中明确表明我们正在谈论世界卫生组织。


7
 cite标签=定义作品的标题

「知识」HTML语义元素含义与SEO详细讲解

在HTML5中,标签内的文字代表一个人的名字或作品的标题(例如书,论文,散文,诗歌,乐谱,歌曲,剧本,电影,电视节目,游戏,雕塑,绘画,戏剧制作,戏剧,歌剧,音乐剧,展览等)。


在上面的例子中,我们明确指出我们正在谈论这本书。


8
 blockquote标签=定义一个摘自另一个源的块引用:


 <blockquote>应包含一个<cite>标记以指示原始来源。您可以使用链接元素(读者不可见)链接到blockquote标签中的原始源,或显示标识原始源的文本(最好使用链接)。不过该标记用的还是比较少的。


9
 q标签=定义一个短的引用

「知识」HTML语义元素含义与SEO详细讲解

<q>标签更适合简短的引用。浏览器通常使用引号括住<q>文本。如果引用跨越多行,则应使用<blockquote>标记。


10
  figure figcaption标签=图形标签说明元素


「知识」HTML语义元素含义与SEO详细讲解

<figure>标记用于包含周围内容一部分的独立内容。就我们的目的而言,这意味着图片、图标等,可以在图片的上方或下方添加标题 - 只需将<figcaption>标签放入<figure>标签内,如上所示。


11
 ul ol标签=图形标签说明元素

「知识」HTML语义元素含义与SEO详细讲解

不严格的语义,虽然不能夸大有序和无序列表的用处。但它们是结构化,因此搜索引擎消化和理解起来非常简单。


<ul> =无序

<ol> =有序(我一般喜欢用这个)


12
 HTML语义标签是不包含B/I/U标签

「知识」HTML语义元素含义与SEO详细讲解

虽然这些都是仍然有效的HTML,但语义上无用,并没有带来SEO的好处。


最滥用(且无用)的HTML标签:<b>

第一个(也是最常见的)错误是使用粗体作为SEO技巧来“提升”关键字。但是它是没有多大用处的。


最令人困惑的HTML标签:<i>

斜体也是“提升”关键字的SEO技巧。同样它也是没有什么用处的。


最具误导性的HTML标签:<u>

下划线有时被用作SEO技巧来“提升”关键字。它也是没有什么用处。


<i> <b> <s> <u>标签没有带来SEO价值,并且对于所有意图和目的而言,都是多余的。


在99%的案例中,本文中描述的语义HTML5标记之一更合适,应该用来代替。


总结:


正确使用语义HTML5已经非常重要,并且在未来几年会变得更加如此。百度、谷歌(以及其他抓取工具)在识别内容的性质时只能完成一半的工作。黄伟老师可以在这告诉你:“标记正确语义的内容的页面,机器人就越容易处理理解它。”


目前,大多数SEOer不知道如何使用语义HTML5标签,并使用(错误的)非语义标签。希望这次所讲的内容,能让各位同学对HTML语义元素有更深刻的理解。


您的关注与分享就是我最大的动力

┉ END ┉


有任何疑问?

请留言……

我会尽快回复您的问题。

如果需要转载,请在下方回复“转载”即可。


互联网SEO知识分享

微信ID:shareseo
长按加个关注撒


点击
阅读原文,看以往发布的SEO知识

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《「知识」HTML语义元素含义与SEO详细讲解》的版权归原作者「SEO答疑学堂」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注SEO答疑学堂微信公众号

SEO答疑学堂微信公众号:shareseo

SEO答疑学堂

手机扫描上方二维码即可关注SEO答疑学堂微信公众号

SEO答疑学堂最新文章

精品公众号随机推荐