Imagebox：图片信息框规则与示例

图片信息框将一张图片与一段聚焦的说明配对，使读者将其视为一个整体的编辑单元。图片可能承载文字所解读的证据，也可能对文字完全解释的观点进行说明。作者必须声明其执行哪种任务，因为这一选择控制了文案、替代文本、图注、结构化数据，以及该元素在无视觉条件下是否仍然有效。

这是内容图片变体：可见的日期和状态是证据，而相邻文字解释了它们之间的关系。如果图片仅仅是装饰性的日历，那么文字需要独立地说明整个时效性要点，且图片应使用空的替代文本。

为什么这个元素很重要

读者不会自动将一张图片和一段遥远的段落视为一个整体概念。当图片出现而没有明确的文字关系时，他们必须自行决定要检查什么、为什么重要、以及它是否支持周围的论断。图片信息框通过将一幅视觉内容和一段说明放置在一个清晰的边界内来减少这种不确定性。标题指出要点；图片展示它；文字告诉读者注意什么或理解什么。

心理上的好处是共同注意力：设计将注意力引向视觉对象，同时文案确立其相关性。一张图表截取可能暗示上升、波动或日期边界；相邻的说明选择出相关的解读方式。

机器可提取性是软件在不丢失各部分之间关系的情况下隔离内容单元的能力。语义化的图片信息框在一个容器中暴露图片、无障碍描述、图注、标题、说明和声明的图片角色。文本必须仍然包含论断：计算机视觉绝不能成为获取数字、指令、限制或结论的唯一途径。

元素编写规则 规定了共享的指令语法、正文映射、路径和优先级。本页面在定义图片信息框特有的内容与插图区分、其允许的字段以及单图片限制方面具有优先权。

何时使用

当一张图片和一段说明具有直接、必要的关系，且两者都不需要独立的完整章节时，使用图片信息框。典型用途包括：聚焦的界面截取配以解读、产品细节配以影响适配性的说明、过程照片配以质量控制规则、或简单的概念插图配以简洁的解释。

首先确定图像是内容还是插图：

• 内容图像： 读者必须检查图像以验证论断、识别特征、比较状态或理解视觉事实。文字指出相关细节并解释其意义。替代文本是有意义的，通常还要有图注。
• 说明性图像： 图像增强了语气、记忆或理解，但相邻的文字提供了完整的论断。移除图像会使块变得不那么吸引人，但不会降低准确性。除非插图本身传达了额外信息，否则替代文本为空。

使用移除测试。如果图像加载失败会移除证据或使说明不完整，则声明 role=content。如果只移除了视觉强化，则声明 role=illustration。

接近但不适用的情况很常见：

• 当视觉内容需要完整阅读宽度而文字仅作标识时，使用独立图片。
• 当读者需要定位多个界面区域时，使用带标注的截图 。
• 对重复的比较标准使用表格，对系统或流程图使用图表，对同等级图片使用画廊。
• 当视觉内容仅仅重复一句话时，使用普通散文。

不要使用图片信息框来让薄弱的部分看起来经过精心设计。一群人指着笔记本电脑的库存照片并不能解释"协作"，一个通用机器人也不能使关于人工智能的论断更加具体。如果图像可以替换为不相关的图像而文案无需任何变化，那么这个配对就没有编辑契约。

放置位置

将图片信息框放置于介绍其所阐述的论断或概念的段落之后。在操作流程中，将其放置在操作步骤之后、成功检查之前，这样视觉证据就不会中断指令。

只有当其内部标题更具体时，它才可以直接位于 H2 下方。保持引用或限定条件紧邻其所限制的论断；切勿将图片信息框插入它们之间。

它不得紧邻另一个图片信息框、画廊、全宽图形、视频、表格或双列信息框。在视觉容器之间插入解释文字，合并真正的同级别元素，或创建独立的子章节。

不要将其放置在项目符号、步骤、标注框、表格单元格、折叠面板或可点击卡片内部。不要在块内或在其图像与说明之间放置行动召唤。

在桌面上，图像可以出现在文字之前或之后。在移动设备上，保留可预测的源代码、键盘和屏幕阅读器顺序；不要依赖冲突的 CSS 重新排序。

结构

结构由含义而非颜色、阴影或列宽来定义。

1. 容器： 将恰好一个图形和一段说明作为一个整体编辑单元进行分组。
2. 图像： 根据声明的角色展示证据或提供插图。
3. 替代文本： 对内容图像传达相关的视觉目的；对冗余的装饰性插图为空。
4. 图注： 标识内容图像展示的内容，并提供状态、日期或比例等必要背景信息。
5. 标题： 陈述见解或主题，而非文件名或"示例"等通用标签。
6. 说明： 告诉读者注意什么、为什么重要以及对解读的任何限制。
7. 署名： 当版权、出处或编辑政策要求时，注明创作者或来源。
8. 阅读顺序： 当两列折叠为一列时，保持图文关系的连贯性。

说明必须直接指代主题，而不是使用"左侧的图像"等方位指示。位置在不同断点、翻译和联合发布中会发生变化。“过期状态和更新日期标识出需要审核的目标"在任何地方都是正确的。

设计示例

设计系统支持四种角色和位置的组合。没有一种改变内容要求。

内容图像，图像前置

当读者应在解读之前检查证据时，使用此默认布局。

内容图像，图像后置

当说明必须在证据之前建立视角时使用此布局。

插图，图像前置

当特定概念的视觉内容在文字承载全部含义的同时提高识别度时使用此布局。

插图，图像后置

当说明是主要部分而插图作为视觉收尾时使用此布局。

窄视口行为

每个变体都会变成单列，无需水平滚动或改变含义的裁剪。图注保持与其图形相连。

参数

内容契约将编辑含义与呈现分离。宽度比例、间距、边框、背景、圆角、阴影和断点属于渲染器。

仅在资源存在后才发布 src。待定截图使用截图注释和 screenshotsPending = true。role 没有默认值，因为将证据静默视为装饰会造成无障碍失败。

第一个正文标题成为 title；其后的所有内容成为 content。正文允许段落、强调、内联代码和一个上下文链接。禁止列表、嵌套标题、表格、媒体、按钮、表单、引用、折叠面板和组件。

语法和代码示例

所有三种符号保留相同的角色、图像、标题、说明、图注、署名和阅读顺序。这些是可移植的适配器契约；它们不意味着未注册的本地短代码或块已存在。

可移植 Markdown 指令

:::imagebox{src="/cdn-assets/seo-playbook/examples/freshness-status.png" role=content position=image-start alt="Freshness report row showing a stale status beside an update date of 12 February 2026" caption="The stale status is evaluated against the recorded update date."}
## See why the page needs review

The visible update date explains why the audit classified this URL as stale. Verify whether the page has changed since that date before assigning a rewrite.
:::

示例路径仅演示语法。在该资源存在之前，生产环境验证必须拒绝它。

Hugo 短代码

{{< imagebox src="/cdn-assets/seo-playbook/examples/freshness-status.png" role="content" position="image-start" alt="Freshness report row showing a stale status beside an update date of 12 February 2026" caption="The stale status is evaluated against the recorded update date." >}}
## See why the page needs review

The visible update date explains why the audit classified this URL as stale. Verify whether the page has changed since that date before assigning a rewrite.
{{< /imagebox >}}

适配器仅使用命名参数。在注册之前，请使用语义化的 <figure> 后接散文。适配器会验证资源并保留指令正文映射。

WordPress 块

<!-- wp:amicited/imagebox {"src":"/cdn-assets/seo-playbook/examples/freshness-status.png","role":"content","position":"image-start","alt":"Freshness report row showing a stale status beside an update date of 12 February 2026","caption":"The stale status is evaluated against the recorded update date."} -->
<figure class="wp-block-image">
  <img src="/cdn-assets/seo-playbook/examples/freshness-status.png" alt="Freshness report row showing a stale status beside an update date of 12 February 2026">
  <figcaption>The stale status is evaluated against the recorded update date.</figcaption>
</figure>
<div class="imagebox__content">
  <h2>See why the page needs review</h2>
  <p>The visible update date explains why the audit classified this URL as stale. Verify whether the page has changed since that date before assigning a rewrite.</p>
</div>
<!-- /wp:amicited/imagebox -->

WordPress 应暴露一个媒体字段和一个受限制的文本区域。如果不可用，请使用原生图像、标题和段落块；即使没有并排布局也要保留含义。

示例

好示例：图像是证据

这个示例有效，因为图像证明了两个物理细节，而文案解释了它们的操作后果。标题陈述了见解，图注标识了可见证据，说明保持具体而不试图枚举整张照片。

坏示例：作为证据的通用装饰

用清晰的数据更智能地工作 图像：一个面带微笑的普通人在笔记本电脑前，旁边是彩色图表。 我们创新的平台将数据转化为可操作的洞察，让每个团队都能解锁更好的决策，取得更多成就。

这个示例失败，因为双方都没有提供可验证的信息。图像可以宣传任何软件产品，而文案包含广泛的结果却没有机制、界面细节、限制或示例。这种配对创造了视觉突出性，但没有创造读者或机器可以提取的含义。应将其替换为聚焦的产品状态和对它所支持的一个决策的解释，或者移除图片信息框并将论断作为带证据的普通散文来撰写。

结构化数据标记和无障碍

图片信息框没有专用的 Schema.org 类型。其文本仍是包含页面实体的一部分。当内容图像具有稳定的 contentUrl、准确的图注、尺寸以及所需的署名或许可元数据时，它可以是一个 ImageObject。装饰性插图不需要单独的实体。

页面级结构化数据可以引用同一个代表性图像。产品详情照片可以为可见产品的 image 属性提供内容，但图表截取不会成为 Dataset，截图也不会成为 SoftwareApplication。

使用一个 <figure> 和 <figcaption> 加上一个带标签的说明区域。设置固有的 width 和 height；响应式输出不得水平滚动或裁剪命名的细节。

替代文本应命名内容图像的相关主题、状态和决定性细节。不要以"图像显示"开头，不要重复图注，也不要堆砌关键词。冗余插图使用 alt=""；省略该属性可能会暴露文件名。

不要仅依赖位置、颜色或像素。在文本中重复关键的数值、标签、警告和结论。保持链接键盘可触达，永远不要使整个框成为一个链接，保留源代码顺序，并在 200% 缩放下测试。

编写规则

在选择图像之前先撰写说明，然后选择保留必要上下文的最小裁剪范围。

• 撰写 3–10 个词的标题，陈述见解、主题或关系。避免使用"图像”、“概述”、“了解更多"和"查看实际操作”。
• 将说明性文案控制在 40–140 词，一至两个段落。该元素支持一个要点，而不是一篇微型文章。
• 将图注保持在 5–25 词。标识所示内容以及解读所需的背景；将推理放在正文中。
• 有意义的替代文本使用 40–180 字符，以 250 为硬性上限。优先考虑准确性而非填满范围。
• 包含恰好一张图片和不超过一个上下文文本链接。仅当目标地址能实质性深化说明时才添加链接。
• 在标题、图注和正文中使用统一的语气和时态。优先使用具体的名词和动词，而非推广性的形容词。
• 当图像仅显示一种状态、日期、裁剪范围、设备或示例时，在解读旁声明限制。

切勿在其中放入列表、表格、推荐语、价格、表单、媒体、下载、按钮、多步骤说明、免责声明或行动召唤。不要使用两张图像，不要在像素中嵌入关键文案，不要暴露客户数据，也不要发布权利不明的作品。

避免写"正如你所见"。读者可能看不到图像，即使是视力正常的读者也需要知道什么观察结果重要。直接陈述：“当连接器完全插入时，锁定卡舌与表面齐平。”

使用该元素的文章类型

以下行由 postTypes 前置元数据驱动。“使用"描述了合适的角色，而非强制在每个页面中都加入图片信息框。

QA 检查清单

在发布前，验证整个元素：

• 图像和说明共同构成一个要点，且属于一个编辑单元。
• role 明确为 content 或 illustration，并通过移除测试选择。
• 源文件存在、已批准，且不包含私有数据、未知版权或占位资源。
• 标题以 3–10 个词陈述见解，正文以 40–140 词进行解释。
• 内容图像具有有意义的替代文本和简洁的图注；冗余插图使用空的 alt 文本。
• 文本陈述了每一个不能依赖视觉的关键数字、标签、指令、警告和结论。
• 图注标识了图像，而不重复正文或替代文本。
• 任何必需的创作者、来源、许可或署名链接准确且可见。
• 块中包含一张图像、一段说明和至多一个上下文文本链接。
• 不包含嵌套的列表、表格、媒体、按钮、表单、行动召唤或交互式卡片。
• 没有替代更适合的带标注截图、对比、图表、画廊或全宽图形。
• 桌面和移动布局保留语义化的源代码顺序、图注附着和键盘顺序。
• 有意义的裁剪范围在响应式缩放、200% 缩放和图像加载失败时保持完好。
• 宽度和高度预留空间，同时延迟加载不会延迟首屏图像。
• 结构化数据（如果输出）与可见内容匹配，且不将装饰描述为单独的实体。
• 可移植 Markdown、Hugo 和 WordPress 映射保留相同的角色、字段和含义。

常见问题

学院模板渲染本页面 [[faq]] 前置元数据中存储的五条审阅过的问题。它们涵盖了内容与插图的判断测试、装饰性替代文本、描述范围、行动召唤和 ImageObject 结构化数据。

当读者能立即回答两个问题时，图片信息框即为成功：“这张图片贡献了什么？“以及"这个贡献为什么在此处重要？“如果任一答案模糊不清，请加强关系或移除该框。