语义 HTML
让我们从什么是语义 HTML 开始。
作为构建 Web 的语言，HTML 是一种标记，围绕文本以为其提供结构。
- 内容块周围的
<p>标记表示它是一段文本。 - 句子周围的
<h1>标签表示它是页面的主要标题。 <ol>标签表示有序（通常编号）列表的开头。<img>标签表示您将在网页上加载图像。
语义 HTML 用于对每个网页进行编码。
内容被特定的标签包围，这些标签指示每个内容的用途，然后应用 CSS 使其看起来不错。无论如何，它并不完美，但它奏效了。
这也意味着您可以查看网页的原始 HTML 源代码，并了解该页面试图提供的内容以及如何提供。HTML 标明了页面上每个内容的结构和含义。您只需查看页面的代码即可了解该页面的用途。
然后所见即所得的编辑器和后来的 JavaScript 框架出现了，HTML 退居二线。我们没有得到 <p> 和 <table>，而是无穷无尽的 <div> 和 <span> 标签嵌套。
最终结果是缺乏结构且没有意义的网页 HTML，直到它在浏览器中完全呈现并在屏幕上直观地绘制出来。只有这样，用户（以及试图模拟用户的机器系统）才能理解页面的用途是什么。
这就是为什么谷歌在索引过程中努力渲染页面（尽管它真的不想这样做）。
我们知道谷歌通常没有时间渲染新闻文章，然后才需要在头条新闻和其他地方对其进行排名。因此，原始 HTML 对于新闻出版商来说非常重要。
良好的 HTML 使 Google 能够轻松提取您的文章内容，并将您的故事在 Google 生态系统中排名为应有的位置。
语义 HTML 是这里的一个关键因素。这就是为什么像我这样的 SEO 坚持文章的标题被包裹在 <h1> 标题标签中，并且这是文章页面上唯一出现 <h1> 的原因。
H1 标题表示网页的主要标题。它会标明文章的起点，以便 Google 可以轻松找到文章内容。
哪些 HTML 标签是语义的？
除了 <h1> 标题标签之外，您还可以实现许多其他语义 HTML 元素，使 Google 能够更轻松地提取您的文章内容并将其编入索引。
您应该使用的元素排名不分先后：
- 段落： 不要使用
<div>和<span>标签将文章格式化为段落。自从 HTML 存在以来，就一直有一个标签，它就是<p>标签。使用它。 - 副标题： 使用
<h2>/<h3>/<h4>副标题标签来提供页面结构。在文章中使用副标题在文章中内容的特定部分开头。对具体结构元素上方的标题使用副标题，例如推荐文章。 - 图片： 如果您想显示希望 Google 也看到的图片，请始终使用
<img>代码。谷歌明确建议这样做。 - 可点击链接： 链接到另一个页面（内部或外部）时，请使用
<a>标签和包含目标 URL 的"href"值。这是谷歌肯定会遵循的唯一一种链接。 - 关联链接：
<link>标签允许您在当前 URL 和另一个 URL 之间创建关联。这可以是规范页面、样式表、当前页面的替代语言版本等。 - 列表： 项目符号列表应使用
<ul>标签，编号列表应使用<ol>标签。您可以使用 CSS 使它们看起来像您想要的那样，但请使用列表标签作为基础。 - 强调： 当你想突出显示一个特定的单词或短语时，你应该使用语义 HTML 标签：
<em>表示斜体，<strong>表示粗体。
除<link>外，上述所有标签均用于网页内容，为文本提供结构和含义。
还有其他语义 HTML 标记旨在为页面代码提供结构和含义。
这些标签允许 Google 识别页面上的不同元素，例如导航与侧边栏，并相应地处理它们。
<head>和<body>标签的存在是为了将页面的元数据（在<head>中）与实际内容（在<body>中）分开。每个 HTML 页面都以这两个开头。<header>可用于环绕页面的标题部分，徽标、导航和其他风格元素位于该部分。<nav>应用于您网站的主导航。大型菜单、汉堡菜单、顶部导航链接，无论您的导航采用何种形式，您都应该将其包装在<nav>标签中。- 您可以使用
<section>标签将页面划分为多个部分。一个部分可以是文章;另一个可以是文章下方的评论。 <article>是显示页面实际主要文章文本（包括标题）开始位置的标签。对于新闻出版商来说，这是一个非常有价值的标签。- 使用
<aside>，您可以指示内容块，例如热门故事、推荐文章或最新新闻的侧边栏。 <footer>用于网页的页脚，你猜对了。
这些结构语义标签帮助搜索引擎理解 HTML 每个部分的目的和价值。
它使 Google 能够快速索引您的内容并适当地处理页面的不同元素。
还有更多语义 HTML 标签可供您使用，用于各种不同的目的。很可能，每个可以想象的用例都有一个 HTML 元素。
与其在代码中塞满 <div> 标签来实现某些事情，不如先看看是否有合适的 HTML 元素可以解决问题。
它如何帮助人工智能？
我们知道，像 ChatGPT 和 Perplexity 这样的 LLM 会抓取开放网络以获取训练数据，以及需要来自网络内容的特定用户查询。
你们中的一些人可能不知道的是，LLM 在处理网页时不会渲染 JavaScript。
谷歌是该规则的例外，因为它投入了大量资源来渲染网页作为索引的一部分。
由于 Google 的 Gemini 是唯一基于 Google 索引构建的 LLM，因此 Gemini 是唯一使用完全渲染网页内容的 LLM。
因此，如果您想有机会在 ChatGPT 或 Perplexity 中显示为引用来源，您最好确保完整的页面内容在原始的、未渲染的 HTML 中可用。
使用语义 HTML 来构建代码并提供含义也有助于这些 LLM 轻松识别您的核心内容。
对于 ChatGPT 来说，解析几十个语义 HTML 标签而不是数百个（甚至数千个）嵌套的 <div> 标签来查找网页的主要内容要简单得多。
如果"代理网"成为现实（我持怀疑态度），语义 HTML 可能是成功的一个关键方面。
使用无意义的 <div> 和 <span> 标签，AI 代理更容易误解它应该执行哪些作。
当您对按钮、链接和表单等内容使用语义 HTML 时，AI 代理失败其任务的可能性要低得多。
正确的 HTML 标签固有的含义将告诉 AI 代理该去哪里以及该做什么。
结构化数据呢？
您可能认为结构化数据已经使语义 HTML 过时。
毕竟，通过结构化数据，您可以以简单的机器可读格式为机器系统提供有关页面内容和用途的必要信息。
这在某种程度上是正确的。然而，结构化数据从未打算取代语义 HTML。它服务于完全不同的目的。
结构化数据具有语义 HTML 所没有的局限性。
结构化数据不会告诉机器哪个按钮将产品添加到购物车，关键文本段落之前的哪个副标题，以及读者应该点击哪些链接以获取更多信息。
无论如何，使用结构化数据来丰富您的页面并帮助机器理解您的内容。但出于同样的原因，您也应该使用语义 HTML。
结合使用，语义 HTML 和结构化数据是无与伦比的组合。