Pair standalone images and code blocks with captions using figure and figcaption
Wrap content-bearing visuals in a figure element with a figcaption to anchor the description.
What this signal tests
We look at content-bearing visuals on your page - block-level images, charts, code listings inside pre tags, blockquotes, and svg illustrations - and check whether each is wrapped in a figure element with a figcaption providing a visible caption. We are looking for at least thirty percent of such content-bearing visuals to use the figure/figcaption pairing.
Why it matters for your visibility in AI
The figure element binds a caption to its content in a way that survives extraction. Without it, the caption is just a paragraph that happens to sit near an image, and AI extractors may pair the caption with the wrong visual or lose the connection entirely. With figure, the relationship is encoded in the markup and extractors hand the model a named, captioned unit - the strongest possible signal for citing the figure. The concrete consequence is that diagrams, screenshots, and code samples in your documentation get cited correctly, with the caption attached. An AI assistant explaining your code can quote "Figure 3: authentication flow" and link readers back to the exact figure on your page, rather than fumbling for context.
Pass criteria at a glance
| Criterion | Passes when |
|---|---|
| >=30% of content-bearing images use figure/figcaption. |
How we test it
We identify content-bearing media on the page: block-level images, pre/code blocks, blockquotes, and svg illustrations sitting alongside text that looks like a caption (short, italic, or styled with a class suggesting caption intent). For each, we check whether it is wrapped in a figure element with a figcaption child. The page passes when at least thirty percent of these candidates use the figure pattern.
Show technical detection method
Find captioned media (block-level images, <pre>, <blockquote>, <svg> with adjacent caption-styled text); assert wrapped in <figure>/<figcaption>.
If your site fails: how to fix it
- Wrap captioned images in <figure><img …><figcaption>…</figcaption></figure>; this is the simplest case and works in every CMS and static site generator.
- For code samples with explanatory text below them, wrap the pre/code in figure and put the explanation in figcaption - extractors then treat the caption as the code listing's title.
- In Markdown-driven sites, use the image caption shortcode your generator provides (Hugo's figure shortcode, MDX components, etc.) rather than placing a bare paragraph beneath each image.
- For pull quotes from external sources, wrap the blockquote in a figure and use figcaption for the attribution, separating the quoted text from the citation cleanly.
- Avoid adding figcaption when there is genuinely no caption - empty or filler captions are worse than no figure at all and waste the structural signal.
Quick facts
| Maturity | ESTABLISHED |
|---|---|
| Weight | medium |
| Category | Content Clarity |
Primary sources
Related signals
Frequently asked questions
Does every image need a figure wrapper?
No. Use figure only when there is a meaningful caption to associate with the visual. Decorative images, inline icons, and images already well-described by surrounding prose do not need figure markup. The element shines when the caption adds information the alt text alone cannot carry.
What is the difference between alt and figcaption?
Alt is a fallback description of what the image depicts, read by screen readers and lifted by crawlers. Figcaption is a visible caption seen by all readers and often quoted as part of the figure's identity. They serve different audiences and should not duplicate each other - alt is descriptive, figcaption is contextual.
Can figure contain multiple images?
Yes. A figure can group several related images under a single caption, for example a before/after pair or a multi-panel diagram. The caption then describes the set as a whole. This is a legitimate pattern AI extractors handle correctly.
Run your own scan
Run a free scan and see how your site grades across all 155 AI-readiness signals.