Open Graph is a protocol introduced by Facebook that lets any web page become a rich object in a social graph. In practice, that means when someone shares your URL, platforms read Open Graph meta tags in your HTML to build the preview card.
Core tags every page needs
<meta property="og:title" content="Your page title"><meta property="og:description" content="A compelling summary."><meta property="og:image" content="https://example.com/og.jpg"><meta property="og:url" content="https://example.com/page"><meta property="og:type" content="website">| Tag | Purpose |
|---|---|
og:title | Headline shown in the preview card |
og:description | Supporting text below the title |
og:image | Large visual — the most impactful tag for CTR |
og:url | Canonical URL for the shared page |
og:type | Content type (website, article, product, etc.) |
Optional but useful tags
og:site_name— Brand name above the title (visible on Discord, Facebook).og:locale— Language code (en_US,de_DE).og:image:width/og:image:height— Helps platforms allocate layout before the image loads.
Where tags must live
Open Graph tags belong in the <head> of your HTML document. Tags injected only via client-side JavaScript are invisible to many crawlers — including Facebook, LinkedIn, and Slack — because they do not execute JavaScript.
Server-side rendering or static HTML is essential for reliable previews.
Open Graph vs. standard meta tags
Standard <meta name="description"> is for search engines. Open Graph tags are specifically for social sharing. Many sites duplicate content across both, but they serve different consumers. Always set both.
How to audit your tags
Paste any URL into OpenGraph Check to see the exact tags crawlers receive, preview how the card looks on multiple platforms, and get a checklist of missing or invalid values.
