Overview
Inline diagrams and Open Graph images target completely different surfaces. Inline diagrams live in the page body and serve readers (and AI search crawlers). Open Graph images live in the page head metadata and serve social sharing previews. Both are visual content, but the audience and the technical implementation are different.
Where each one shows up
Inline diagrams render in the page body where readers see them while reading the article. They're part of the content. AI crawlers parse them as content. Google may include them in image search results.
Open Graph images render in link previews when the URL is shared on Facebook, LinkedIn, Slack, iMessage, Discord, WhatsApp, and most other social platforms. They're metadata, not content — the actual page never displays the OG image (unless you intentionally include it twice). The audience is anyone seeing the link shared, before they click.
Different jobs entirely. Both matter for an ecommerce store, but they're solving different problems.
When to use each
Every page should have BOTH. The OG image is a single 1200×630 image declared in `<meta>` tags. It's typically a branded card with the page title overlaid — purpose-built for the social preview audience. Set it once per page template and rarely revisit.
Inline diagrams are content-specific visuals added within articles where they add explanatory value. A pillar page might have one inline diagram. A long-form guide might have five. A homepage might have a hero animation but no inline diagrams. The number and type are content-driven, not metadata-driven.