SEO Playbook · Element

对比表格:格式与示例

通过语义化标记、完整的维度、清晰的单元格和新鲜的数据,构建帮助读者做出决策并让搜索引擎提取事实的对比表格。

2 min read

对比表格将每个选项放在相同的决策维度下进行评估,使读者能够看到有意义的差异,而无需从分散的段落中自行重构。它是实现转化和答案引擎提取的最高价值页面元素之一——但前提是它以数据形式发布,而非数据的图片。

面向10人营销团队的电子邮件平台对比。检查日期:2026年8月27日。
决策维度NorthstarRelayPostbox
月费,10名用户$90$120不可用
审批工作流包含包含不可用
最低合同期限按月按年未知

图例: “包含”表示该功能包含在所表明的套餐中,无需附加组件。“不可用”表示供应商在该套餐中不提供此功能。“未知”表示无法从指定来源验证该声明。以上名称和数字仅为示例;结构为生产模型。

为什么这个元素很重要

对比是一种认知工作。当三个产品在三个独立的部分中分别描述时,读者必须记住每个价格、规范不同的措辞,并判断一个被省略的功能是缺失还是仅仅未被提及。表格消除了这种记忆负担。它的行声明了决策维度,列承载了选项,每个交叉点提供了答案。读者可以向下浏览一个选项或横向查看一个标准,而不会丢失关联关系。

这种结构还提高了机器可提取性:即搜索系统或答案引擎在重用内容时保持标签与其值之间关系的能力。清晰的标题行、明确的行标题、每个单元格一个事实以及完整的维度,构成了一组紧凑的主语–谓语–值陈述。“Relay — 最低合同期限 — 按年”易于隔离和引用。一个包含相同文字的彩色卡片布局,对有视力的访问者来说可能看起来像一个表格,但无法暴露可靠的行与列关系。

表格的图片不是对比表格。它是一个包含文字的截图。使用屏幕阅读器的人无法导航其标题和单元格。读者无法干净地复制价格、在其中搜索、在不放大整个图像的情况下放大文字,或使其适应窄屏。爬虫和答案引擎可能尝试光学字符识别,但即使字符识别成功,也无法保证正确的值能保持与正确的行和列的对应关系。同样,一堆带样式的div元素可能模仿网格,同时丢弃了表格语义。代价是直接的:页面花费研究精力产生事实,然后将这些事实的关系对许多人和机器隐藏起来。

何时使用

当读者必须至少从三个共享维度评估至少两个选项时,使用对比表格。适用主题包括产品、套餐方案、方法、服务层级、技术规格、资格规则以及简短的排名列表。维度必须是可比较的:价格对价格,支持渠道对支持渠道,合同条款对合同条款。

不要仅仅因为几个事实可以排成行就使用它。关于一个对象的两列标签-值列表是规格表,而非对比表。排期表是时间表。原始测量数据的矩阵可能是数据表,其目的是分析而非选择。长篇叙事论证应使用散文形式,因为单元格不应包含微型论文。

近似错误需要特别留意:

  • 每个选项使用不同的标准: 先分别描述各自的特性,然后仅对共享标准进行对比。维度不匹配的网格会造成平等的假象。
  • 一个结论无支撑维度: 使用直接推荐并解释推理过程。单行表格增加了形式感,而非清晰度。
  • 超过五个选项列: 按受众拆分类别,或使用可筛选、可访问的表格。缩小文字直到所有内容都能放下,会使元素在技术上存在、但实际上不可用。
  • 视觉特性清单: 仅当每个符号都有明确的含义,并且每个选项的每一行都有回答时,才使用表格。
  • 频繁变化的实时数据: 使用维护的数据源和可见的验证日期。如果没有人能保持其最新,就不要发布该表格。

放置位置

将主要对比表格放置在页面定义了受众、选择方法和维度之后,但在逐个选项的详细评审之前。读者需要足够的上下文来理解各行;他们不应在收到对比之前必须阅读整个页面。

在A vs B页面上,主表格通常跟在直接答案和简短的"我们如何对比"说明之后。在候选列表页面上,它跟在入选标准之后,并在详细条目之前。一个较小的规格表可能出现在产品部分内,但它不得与主表格相矛盾,也不得为同一标签引入不同的含义。

不要将表格直接放置在其他密集的对比表格、不相关的行动号召或全宽截图旁边。相互竞争的网格使阅读路径不清晰。不要在标题和表格之间插入促销横幅,也不要在行和其限定事实之间插入来源说明。将标题、验证日期、图例、表格和来源说明作为一个完整的单元。行动号召可以跟在对证据的解释之后,而不是打断证据。

结构

标注图片必须标识以下区域,且不能将解释内容嵌入图片本身:

  1. 标题: 说明对比的内容、目标受众、以及所依据的套餐或场景。
  2. 验证日期: 提供检查价格和可用性的确切日期。
  3. 列标题: 标明选项名称;第一个标题命名决策维度列。
  4. 行标题: 每行命名一个与决策相关的维度。
  5. 正文单元格: 包含一个事实、一个带单位的数字或一个已定义的符号。
  6. 高亮列: 在存在编辑推荐时指明推荐选项;它从不改变或隐藏底层事实。
  7. 图例: 以可见文字定义每个符号和状态标签。
  8. 来源说明: 命名用于验证声明的主要来源或方法。

示例图例: ✓ = 指定套餐中可用;— = 该套餐中不可用;N/A = 该维度不适用;Unknown = 团队无法验证该事实。发布的组件还必须将这些含义暴露给辅助技术——例如,每个单元格中可见或视觉上隐藏的文字——而不是仅依赖这些字符本身。

设计示例

每种变体使用相同的语义核心。视觉处理可以改变强调和密度,但不能将单元格变成图片、移除标题、合并单元格或仅通过颜色编码含义。

标准: 两到四个选项,三到八个决策行,无编辑高亮。当页面解释权衡而非宣布一个优胜者时,此为默认样式。

高亮推荐: 某个选项列可以接收文字标签,如"最适合小团队"。颜色为辅助手段。高亮不能改变行顺序、隐藏缺点或使其他选项的文字对比度降低。

符号主导: 适用于重复的二元可用性事实。仅在图例可见且每个单元格保留可访问的文字替代时使用。价格、限制和限定条件保持为文字形式。

带粘性首列的移动端: 表格在其自身带标签的容器内水平滚动。页面本身绝不能出现水平滚动条。保持首列粘性,以便读者在横向浏览选项时保留维度信息;保留滚动区域的键盘访问和可见焦点状态。

参数

以下参数构成了可移植的内容合约。“来源"指作者或渲染器获取值的位置,而非商业声明所引用的证据。

对比表格接口参数
名称类型必填最少/最多默认来源
caption纯文本字符串8–24个单词属性
verification-dateISO日期一个确切日期属性
columns有序列表总计3–6列,包括维度列正文中的标题行
rows等长列表的有序列表推荐3–10行正文
symbol-legend符号到文本映射条件性每个符号或状态1个定义表格后的正文
highlight-column列标识符0–1个选项列无高亮属性
source可含可选URL的纯文本外部声明必填1–3个主要来源图例后的正文

三个选项列加上行标题列是常见且可读的默认设置。总计六列是编辑表格的正常上限。更大的数据集需要有意的筛选或分段,而不是逐步缩小的字号。

语法与代码示例

所有三种形式必须映射到相同的标题、检查日期、列顺序、行、图例和高亮。Markdown管道表格是类型化指令内的源数据;外部元素提供元数据和行为。

可移植的Markdown指令

:::comparison-table{caption="面向10人团队的电子邮件平台" verification-date="2026-08-27" highlight-column="relay"}
| 决策维度 | Northstar | Relay | Postbox |
|---|---:|---:|---:|
| 月费,10名用户 | $90 | $120 | 不可用 |
| 审批工作流 | 包含 | 包含 | 不可用 |
| 最低合同期限 | 按月 | 按年 | 未知 |

图例:包含 = 指定套餐的一部分;不可用 = 该套餐中不存在;未知 = 未经核实。

来源:供应商套餐和定价页面。
:::

Hugo短代码

现有的通用表格辅助工具没有将标题、验证日期、行标题作用域、图例、来源或高亮作为一等字段。在其渲染器满足此合约之前,请使用语义化HTML制作实时对比表格,而非接受视觉上相似但结构不完整的网格。预期的Hugo映射方式为:

{{< comparison-table caption="面向10人团队的电子邮件平台" verification-date="2026-08-27" highlight-column="relay" >}}
| 决策维度 | Northstar | Relay | Postbox |
|---|---:|---:|---:|
| 月费,10名用户 | $90 | $120 | 不可用 |
| 审批工作流 | 包含 | 包含 | 不可用 |
| 最低合同期限 | 按月 | 按年 | 未知 |

图例:包含 = 指定套餐的一部分;不可用 = 该套餐中不存在;未知 = 未经核实。

来源:供应商套餐和定价页面。
{{< /comparison-table >}}

渲染器必须输出原生的<table class="art-table"><caption><thead><tbody>;在列标题上使用scope="col";在行标题上使用scope="row";以及一个包含的水平滚动区域。此标记并非允许用卡片或图片替代。

WordPress区块或短代码

[comparison_table caption="面向10人团队的电子邮件平台" verification_date="2026-08-27" highlight_column="relay"]
决策维度 | Northstar | Relay | Postbox
月费,10名用户 | $90 | $120 | 不可用
审批工作流 | 包含 | 包含 | 不可用
最低合同期限 | 按月 | 按年 | 未知
[legend]包含 = 指定套餐的一部分;不可用 = 该套餐中不存在;未知 = 未经核实。[/legend]
[source]供应商套餐和定价页面。[/source]
[/comparison_table]

自定义WordPress区块可以在表单控件中暴露相同的字段。它必须保存或渲染原生的表格标记,并在样式或脚本失效时保留关系。

示例

优秀案例:可用于决策的对比

示例:面向8人机构的不同项目计划。检查日期:2026年8月27日。
决策维度入门版团队版工作室版
月费,8个席位$64$96$160
客户端访客访问不可用10位访客无限制
审批历史30天1年无限制
单点登录不可用不可用包含

这个做法有效,因为每个计划回答了每个决策维度,数字包含其单位和席位假设,缺失是明确的,检查日期限定了声明的时效。与决策最相关的行——针对实际团队的总价——排在第一位。每个单元格包含一个事实,而非销售宣传。

糟糕案例:看似有说服力的网格

计划对比
功能入门版团队版工作室版
价值超值最受欢迎!终极体验
协作
高级工具强大你需要的一切

糟糕版本甚至在考虑样式之前就已经失败。“超值"和"强大"是营销用语,没有可验证的含义。勾选标记没有图例。“高级工具"未定义。入门版中的空白单元格可能表示缺失、不适用、未知或忘记填写。“你需要的一切"将无限量的声明打包进一个单元格。各行遵循推广主题而非购买者决策,没有检查日期,也没有来源。

修复方法是命名精确的维度,如访客限制、审批历史期限和单点登录可用性;对照每一行验证所有三个计划;用明确的状态替换空白;定义符号;并注明审查日期。如果无法获得这些事实,诚实地写明"未知”,而非有利的推断。

Schema标记与无障碍

没有通用的Schema.org类型或属性用于对比表格。该元素仍然是所在ArticleProduct或集合页面的一部分。只有当页面独立满足该结构化数据的资格和证据规则时,事实才可填入有效的产品、报价或评分属性。不要将高亮列转换为aggregateRatingreviewoffers标记,除非底层内容真正提供了这些值。

无障碍来自关系,而非外观。每个选项标题使用<th scope="col">,每个决策维度使用<th scope="row">。添加简洁的<caption>来标识表格。避免合并单元格,因为rowspancolspan使导航和提取更加困难;改为重复标签或拆分表格。保持源代码顺序逻辑性,不要将表格从无障碍树中移除。

在小屏幕上,将溢出放置在表格周围的容器上,切勿放置在页面上。为可键盘聚焦的滚动区域提供可访问的名称和可见的焦点状态。粘性首列可能有助于保留上下文,但不得覆盖聚焦的内容或依赖脚本来暴露数据。符号需要可见的文字定义和单元格级别的文字替代。颜色可以高亮推荐列,但标题也需要文字标签。

写作规则

根据决策价值选择行,而非根据便利性。将最可能改变读者选择的标准放在首位,然后是必备功能、总成本、约束条件、支持和次要细节。字母顺序仅当读者已了解维度名称时有用;对于购买决策来说通常不适用。按供应商导航顺序排列是推广分类法,而非读者优先级。

维度对等性是绝对的:每个选项必须在每一行上被评估。空白仍然是一种回答,但它是模棱两可的,因此在已发布的表格中禁止出现空白。请精确使用以下状态:

  • 不可用: 该选项在所声明的套餐或条件下不提供该功能。
  • 不适用: 该维度逻辑上不适用于该选项。
  • 未知: 团队无法从适当来源验证答案。

每个单元格包含一个事实、数字或已定义的符号。包含单位和条件:"$49/月,5个席位"是可用的;“价格实惠"则不是。“每个工作区10 GB"是可用的;“存储空间充足"则不是。如果某个值需要限定条件,请保持简短并将来源说明附加到表格中。如果需要一整段来解释,请在表格下方说明,并在单元格中使用简洁的标签,如"有条件限制”。

总结性对比使用三到八行,除非有充分理由,否则不超过十行。使用两到五个选项列,加上行标题列。保持标题具体且平行。不要在单元格中放置按钮、表单、自动播放媒体、段落长度的销售文案、推荐语、没有说明评分方法的分级评分或嵌套表格。编辑对比中绝不使用合并单元格。

检查日期是必需的,因为价格、库存、套餐名称和功能可用性会变化。写确切的日期,而不是"最近"或"当前”。在发布前分配负责人和审查节奏。过时的表格比没有表格更糟糕:其整洁的结构使过时的声明看起来异常权威且易于被重复引用。

使用此元素的内容类型

按内容类型划分的必需和常见放置位置
内容类型用途首选位置
A vs B对比必需的主要证据元素在结论和对比方法之后;在详细分析之前
最佳X for Y指南当选项共享维度时必需的候选列表摘要在选择标准之后;在单个推荐之前
X替代方案页面当替代品可以一致地评估时必需在更换理由和入选标准之后
分类页面可选,为有限范围内的产品提供决策支持在分类概述之后;在完整产品网格之前
产品页面可选的套餐或型号对比在核心价值主张之后;在购买操作之前
列表指南当列表条目共享标准时推荐使用在方法说明之后;在编号列表之前

postTypes前置元数据是与这六个文档的机器可读连接。可见表格解释了标识符本身无法承载的编辑放置位置。

QA检查清单

  • 输出是原生HTML表格,而非图片、Canvas、CSS网格或一堆div元素。
  • 表格有有用的标题、一个清晰的标题行、列标题作用域和行标题作用域。
  • 每个选项在每个维度上都被评估;没有已发布的单元格是空白的。
  • “不可用”、“不适用"和"未知"按其各自含义使用。
  • 每个单元格包含一个事实、带单位的数字或已定义的符号——绝无营销用语。
  • 每个符号有可见的文字图例和单元格中的可访问文字替代。
  • 行按决策相关性排序,而非按字母顺序或供应商页面顺序。
  • 表格保持在列数限制内,或内容已被有意分段。
  • 在移动端,水平滚动被控制在带标签的表格区域内,页面不会横向滚动。
  • 粘性首列(如使用)保持可读、键盘安全和高对比度。
  • 没有合并单元格,也没有单元格包含嵌套表格或复杂的交互控件。
  • 存在精确的检查日期和适当的首要来源说明。
  • 高亮列(如有)有文字标签,并且不压制不利事实。
  • 当自定义样式和脚本不可用时,表格仍然能传达其关系。

常见问题

对比表格应包含多少个选项?

主表格中使用两到五个选项列。如果需要更多选项,将对比拆分为针对特定受众的表格,或提供保留原生表格语义的可筛选界面。

对比表格可以使用勾号和叉号吗?

可以,但每个符号需要有可见的文字图例和可访问的文字替代。形状或颜色本身不是答案,因为读者无法可靠地推断其含义是包含、推荐、已测试还是仅仅存在。

空白单元格应表示什么?

什么也不表示。空白单元格是被禁止的,因为其含义不可知。请写明"不可用”、“不适用"或"未知”,并根据各自的定义使用每个术语。

对比表格需要结构化数据吗?

通常不需要。没有通用的对比表格Schema存在。将其保留在页面有效的Schema范围内,并且仅当页面拥有这些属性所需的证据时,才映射产品、报价或评分属性。

表格应多久检查一次?

根据变化频率匹配节奏。定价和套餐权益可能需要每月或每季度审查;稳定的规格可能变化较少。每种情况下,都要显示确切的最后检查日期,以便读者自行判断时效性。

← All SEO Playbook guides

准备好付诸实践了吗?

免费检查 · 7天试用 · 无需信用卡