SEO视角下<figure>与<figcaption>的正确用法及常见问题

1. 如何正确使用<figure>与<figcaption>标签 #

<figure>是HTML语义化标签，专门用于包裹独立的媒体内容（比如图片、插图、图表、代码片段、音视频等）——这类内容和文档主体相关，但移除后不会破坏核心阅读逻辑。

<figcaption>是<figure>的专属子标签，用来提供该媒体内容的标题、说明或图例，它可以放在<figure>内部的开头或结尾位置。

基础用法示例：

<figure>
  <img src="sample.jpg" alt="风景照片">
  <figcaption>秋日山间的枫叶林</figcaption>
</figure>

2. <figcaption>内嵌套<p>、<h1>等文本标签是否合规？ #

完全合规，不会导致<figcaption>失效。根据HTML规范，<figcaption>属于流内容容器，支持包含标题标签（h1-h6）、段落标签（p）、列表、行内元素等多种内容。

你给出的代码是合法的：

<figcaption>
  <h2>some title</h2>
</figcaption>

这种嵌套反而能强化语义层级，方便后续通过CSS对不同内容做精细化样式控制。

3. 卡片布局（图片右侧、标题左侧）如何添加<figure>和<figcaption> #

针对你提供的flex卡片布局，只需将整个卡片内容包裹在<figure>中，用<figcaption>包裹左侧的标题容器即可——既保留原有布局，又符合语义规范。

修改后的代码示例：

<figure class="d-flex">
  <figcaption class="info-container">
    <h2 class="name">some name</h2>
  </figcaption>
  <div class="img-container">
    <img src="someSrc" alt="someAlt" />
  </div>
</figure>

说明：

• <figure>作为整个卡片的语义容器，关联图片和标题内容
• <figcaption>承载标题信息，通过flex布局保持在左侧
• 图片容器保留在右侧，原有样式逻辑不受影响

内容的提问来源于stack exchange，提问作者Ahmad Reza