patternjavascriptModerate

Open Graph tags for rich social sharing previews

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

open graphog tagssocial sharingfacebook previewlinkedin previewlink preview

Problem

Without Open Graph meta tags, Facebook, LinkedIn, and other platforms generate poor link previews with wrong images, titles, or missing descriptions, reducing engagement when content is shared.

Solution

Add og:title, og:description, og:image (1200x630px minimum), og:url, og:type, and og:site_name to every shareable page. Use absolute URLs for og:image and og:url.

Why

Open Graph is the protocol used by Facebook, LinkedIn, and most social platforms to extract metadata for link previews. Without it, platforms fall back to scraping raw HTML which produces inconsistent results.

Gotchas

og:image must be an absolute URL, not a relative path
Facebook caches OG tags aggressively — use the Sharing Debugger to clear cache
og:image should be at least 1200x630px; smaller images may not render as large cards
Some platforms require og:image:width and og:image:height to avoid layout shifts in the preview

Code Snippets

Complete Open Graph tag set

<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description for social sharing." />
<meta property="og:image" content="https://example.com/images/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Brand Name" />

Context

Blog posts, product pages, articles, or any page meant to be shared on social media

Revisions (0)

No revisions yet.