Open Graph and Twitter Card meta tags: controlling real social previews
When a real link gets shared on social media, the resulting preview card — image, title, description — isn't generated by the platform reading the page's actual title and meta description from part 14. It comes from a separate, dedicated set of meta tags. Without them, the platform falls back to guessing, often badly. This part adds the real ones.
Open Graph tags: the real standard most platforms read
<meta property="og:type" content="website" />
<meta property="og:url" content="https://brightleafcoffee.com/" />
<meta property="og:title" content="Bright Leaf Coffee — Small-batch coffee, roasted weekly" />
<meta
property="og:description"
content="Small-batch coffee roasted weekly and shipped within 24 hours. Gift and monthly subscriptions available."
/>
<meta property="og:image" content="https://brightleafcoffee.com/images/og-homepage.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />Open Graph, originally introduced by Facebook, is now the real, widely adopted standard most platforms (Facebook, LinkedIn, Slack, Discord, WhatsApp) read to build a link preview. og:image at a real 1200×630 dimension is the current practical standard — smaller images get cropped or padded inconsistently across platforms, and this exact aspect ratio is what most platforms' preview cards are actually designed around.
Twitter (X) Cards: a real, separate but overlapping set
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Bright Leaf Coffee — Small-batch coffee, roasted weekly" />
<meta
name="twitter:description"
content="Small-batch coffee roasted weekly and shipped within 24 hours. Gift and monthly subscriptions available."
/>
<meta name="twitter:image" content="https://brightleafcoffee.com/images/og-homepage.jpg" />X (formerly Twitter) has its own, separate meta tag namespace rather than reading Open Graph directly, though it does fall back to Open Graph tags for any Twitter-specific tag that's missing. twitter:card with a value of "summary_large_image" is what produces the real, large, prominent image preview rather than a small thumbnail — genuinely worth setting explicitly rather than relying on the platform's default.
Why real, absolute image URLs are required here
<!-- wrong: og:image with a relative path -->
<meta property="og:image" content="/images/og-homepage.jpg" />
<!-- correct: a real, complete, absolute URL -->
<meta property="og:image" content="https://brightleafcoffee.com/images/og-homepage.jpg" />Unlike the relative paths used throughout this series for internal links and images (part 5), og:image and og:url genuinely need complete, absolute URLs. The reason is structural: the platform reading these tags (Facebook's crawler, Slack's link-unfurling bot) has no "current page" context to resolve a relative path against — it's fetching this page's raw HTML from an entirely separate server, with no browser tab or address bar establishing a base URL the way a real visitor's browser does.
A shared link with no Open Graph tags at all doesn't fail silently — most platforms fall back to grabbing the first image and paragraph of text they can find on the page, which is frequently the wrong image (a logo, an unrelated icon) or an awkward, out-of-context snippet of body text. Real Open Graph tags aren't a nice-to-have polish item; they're the only reliable way to control what a shared link actually looks like.
Testing real preview cards before they're actually shared
Real preview cards are genuinely hard to verify by simply looking at the raw HTML — the actual, practical way to check them is a platform's own official preview-debugging tool (Facebook's Sharing Debugger, X's Card Validator, LinkedIn's Post Inspector), which fetches the live page the same way the real platform would and shows the resulting card. Worth running before a real page ever gets shared publicly, since a broken preview card is a real, visible embarrassment that's easy to catch in advance and hard to fix retroactively once cached by a platform.
Next: structured data — JSON-LD in HTML, the real markup that helps search engines and AI systems understand exactly what a page represents.