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

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

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

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

HTML语义元素含义介绍

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

上期我讲过HTML语义元素构建网页的一些基础知识“SEO深入学习---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是完全一样的东西。

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

2

strong标签=重要

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

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

3

em标签=重点、强调

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

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

4

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

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

5

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

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

6

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

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

7

cite标签=定义作品的标题

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

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

8

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

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

9

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

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

10

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

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

11

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

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

<ul> =无序

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

12

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

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

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

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

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

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

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

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

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

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

总结:

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

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

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

本文分享自微信公众号 - SEO答疑学堂(shareseo),作者:黄伟

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-02-27

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 「谷歌」Hreflang标签知识与多国语言网站SEO优化

    黄伟SEO
  • 「知识」SEO策略的4个关键领域

    黄伟SEO
  • SEOer必学网站分析神器(第三节课)

    黄伟SEO
  • JS设置标签的内容和样式

    上一期堡堡给大家分享了操作符与数据类型转换。掌握JS操作符的目的是为了能够灵活的操作变量,以便完成JS的各种逻辑处理;掌握数据类型转换可以让我们避免一些不该发生...

    HTML5学堂
  • 从数据仓库到百万标签库,产品经理如何用好大数据?

    大数据深度挖掘、大数据精准营销、大数据科研等是目前比较热门的大数据应用关键词,随着大数据发展,利用大数据做营销的手段越来越丰富,但也越来越难了。

    孔雀
  • 前端基础-HTML

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    cwl_java
  • vim-tabe多标签切换

    原文链接:https://www.cnblogs.com/liqiu/archive/2013/03/26/29819...

    ccf19881030
  • 【CSS选择符】后代选择符

    在学习后代选择符之前,首先要了解一下组成一个网页的HTML家谱,每个HTML标签标示其中一个家庭成员。网页中的第一个HTML标签(标签),相当于所有其他标签的始...

    企鹅号小编
  • Jsoup代码解读之六-parser(下)

    读Jsoup源码并非无聊,目的其实是为了将webmagic做的更好一点,毕竟parser也是爬虫的重要组成部分之一。读了代码后,收获也不少,对HTML的知识也更...

    哲洛不闹
  • 房上的猫:HTML5基础

    一.W3C标准  1)W3C标准不是某一个标准,而是一系列的标准的集合,一个网页主要由三部分组成,即结构(Structure),表现(Presentation)...

    房上的猫

扫码关注云+社区

领取腾讯云代金券