所有分类
  • 所有分类
  • 后端开发

内容编写者的语义 HTML5 — 基本指南

500.jpg

Google 和 Bing 喜欢语义 HTML5非常适合 SEO!本文提供了基本语义 HTML5 简单的标签指南,内容作者和作者应该更好地使用这些标签 Google 和 Bing(以及一般机器)通信。你的竞争对手甚至可能不接近最佳实践,所以在你的内容中正确使用语义 HTML5 标签会让你在这里 2018 年以后领先一步。所以请继续阅读…

什么是语义 HTML5?

如果您对 HTML 如果你知道一些东西,你就会知道 HTML 标签(主要)用于格式化内容;这些标签告诉浏览器如何在页面上显示内容。

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

image.png

H1 到 H6 标签 = 标题

每个人都知道 <h> 标签。它们为您的写作提供结构,并将其分解为子主题和子主题。<h1> 描述了整篇文章所涵盖的主题。下面,其他的 <h> 标记用于为子主题提供层次结构。所以每个 <h2> 都是整个主题(父亲 <h1> 不同子主题的标签)。每个 <h3> 都是其父 <h2> 的子主题 – 所以是子主题的子主题。等等。

<h> 标签非常强大,因为它们可以识别内容的关键主题,它们的相对重要性和它们之间的关系。它传达了大量的语义信息。花时间解决这个问题是非常值得的。

不幸的是,许多网页不遵守 <h> 标签的语义。例如,直接从 <h1> 跳到 <h3> 因为“它看起来更好”。不要这样做。语义使用 <h> 用标签来表示结构,并使用它 CSS / 类别控制文本的视觉方面。

提示:虽然标题来自 H1 一直到 H6,但使用 H4 任何其他内容都非常非常不寻常。一旦你达到 H4,你应该问问自己,你的文章是否涵盖了太多的子主题,可以分解成几篇文章。

在语义上使用标签-例:

image.png

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

从语义上讲,下面的 HTML 完全一样。

image.png

请记住整篇文章中的语义 HTML 标签中文本的视觉呈现不会影响这些标签传达给机器的语义。

STRONG 标签 = 重要

image.png

如果一个词或几个词在句子中比其他词更重要,请使用它 <strong> 标签。

对于 SEO,尽管将 <strong> 标记在所有关键字周围很有吸引力,但不要这样做。过度使用会削弱效果,触发垃圾邮件过滤器。小心使用,正确使用。

EM 标签 = 重点

为了使句子更有意义,应该强调一个词或几个词,所以使用它 <em> 标签。大声朗读这句话,你会把重音放在“这个”这个词上。 
当屏幕阅读器遇到这个标签时,它会强调它们(机器人)的声音。

MARK 标签 = 突出显示在上下文中很重要

这是用来标记(或突出显示)文本以吸引读者对文本的注意,因为它与用户当前的活动/上下文密切相关。例如,突出显示问题的简短答案。

DEL 标签 = 第一次发布后删除的文本 INS 标签 = 第一次发布后插入的文本

您可以使用它来指示更新和修改;结合使用 <ins> 和 <del>。

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

很少使用,但非常适合消除歧义(歧义对于 Google 和 Bing 这是一个巨大的问题)。把这个标签贴在“WHO“这个词清楚地表明我们正在谈论世界卫生组织。

CITE 标签 = 引用作品或人

再一次,我们可以选择任何方式显示文本。引用标签的语义没有改变。

在 HTML5 标签中的文本代表名称或作品名称(如书籍、论文、文章、诗歌、乐谱、歌曲、脚本、电影、电视节目、游戏、雕塑、绘画、戏剧、戏剧、戏剧、歌剧、音乐、展览等)。

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

BLOCKQUOTE 标签 = 长(大概)报价

信息: <blockquote> 应包含一个 <cite> 标记以指示原始来源。您可以使用链接元素(读者看不见)链接 blockquote 标签中的原始来源,或显示标识原始来源的文本(最好有链接)。我在这里展示过(也很好)。

Q标签=短报价

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

FIGURE FICCAPTION 标签 = 说明性元素

<figure> 标签用作周围内容自然流的一部分。就我们的目的而言,这意味着图像、地图和图表。您可以在图像上方或下方添加标题 – 只要把它放在里面 <figure> 内的 <figcaption> 如上所示,标签内。

UL OL 标签 – 列表

<h3 id=”the-choice-of-

    • -or-

      1. -adds-semantics-(meaning)-to-the-list”> <ul> 或 <ol> 将语义(含义)添加到列表中。

这不是严格意义上的语义,但我不能夸大有序和无序列表的用途。它们是结构化的,所以谷歌真的很容易消化和理解。令人惊讶的是,这些东西经常被混淆。

<ul> = 没有指示顺序
<ol> = 顺序(在这种情况下是我的偏好)是明确的

<h2 id=”what,-no-,--and-“> 什么,没有 <b>、<i> 和 <u> ???

BIUS 标签 = 所有的意图和目的都是多余的

这些仍然有效 HTML,但是语义上没用,也没带来 SEO 好处。

image.png

<h4 id=”the-most-overused-(and-useless)-html-tag:-“> 最过度使用(和无用) HTML 标签:<b>

第一个(也是最常见的)错误是用粗体作为 SEO “提升”关键词的技巧。没有。

<h4 id=”the-most-confusing-html-tag:-“> 最容易混淆的 HTML 标签:<i>

斜体也是“提升”关键词 SEO 技能。没有。

<h4 id=”the-most-misleading-html-tag:-“> 最具误导性的 HTML 标签:<u>

有时用于下划线 SEO “提升”关键词的技巧。它没有。此外,它看起来像一个链接。

<i> <b> <s> <u> 没有标签 SEO 价值
,而且所有的意图和目的都是多余的。
在 99% 在这种情况下,本文描述了语义 HTML5 其中一个标记比较合适,应该改用。

HTML5 和可访问性

用于 SEO 的 HTML5 可访问性的最佳实践(适用于弱视者的屏幕阅读器)在很多方面都是对应的。Alt、title、em、strong……

Google 本质上是盲目的,所以任何真正帮助屏幕阅读器的可访问性都是相关的 HTML5 都会帮助 Google(和您的 SEO)。

因此,我的建议是在标记页面时真正考虑可访问性/屏幕阅读器。

结论

语义 HTML5 正确的实现已经非常重要,未来几年将变得更加重要。Google 和 Bing(以及其他爬虫)只能完成一半的工作来识别内容的性质。正如 HTML5 Rocks(几乎)说:“(我们)在标记内容的正确语义上做得越好,机器人就越容易处理。”

目前,大多数内容编写者不知道如何使用语义 HTML5 并使用(错误)非语义标签进行标签。仅仅理解并正确实施上述标签将使您处于领先地位。

额外提示:WordPress 和语义 HTML5

对于 WordPress 对用户来说是个好消息 – 只要您满足以下任何条件,基础知识将为您完成:

  • 直接在 WordPress 写入并使用默认格式按钮
  • 从您的文本处理应用程序(Word、OpenOffice、Google Docs、Pages…)复制/粘贴无格式文本,然后使用 WordPress 文本编辑器应用格式。
原文链接:https://www.icz.com/technicalinformation/web/html5/2023/05/9124.html,转载请注明出处~~~
0
注意:请收藏好网址www.icz.com,防止失联!站内免费资源持续上传中…!赞助我们
显示验证码
没有账号?注册  忘记密码?