How to add Open Graph tags to your website (HTML)
Open Graph tags are invisible labels in the <head> of your page that decide how your link looks when someone shares it on X, LinkedIn, Facebook, WhatsApp, Slack or Discord. Without them, platforms pick something themselves — usually a bare, ugly preview. Here is how to set them up properly.
The free checker shows your previews for nine platforms — from X and WhatsApp to iMessage, Discord and Bluesky.
Put the tags in the <head>
Open Graph tags belong in the <head> of your HTML document, before the closing </head>. They work per page: every URL that can be shared deserves its own tags.
Use at least these four
og:title (the card headline), og:description (1-2 sentences), og:image (the image, as a full https URL) and og:url (the canonical URL of the page). Add twitter:card with the value "summary_large_image" so X shows the large card.
Get the image right
Use 1200×630 pixels (1.91:1 ratio), as JPG or PNG under 1 MB. The URL must be absolute (starting with https://) — relative paths are ignored by many scrapers.
Test before you share
Paste your URL into the MetaPeek checker and you see instantly how the card looks on every platform, plus what is missing. Note: platforms cache previews — after a change it can take a while before an already-shared link refreshes.
Code example
<!-- Open Graph -->
<meta property="og:title" content="Your page title" />
<meta property="og:description" content="A short, compelling description (110-160 characters)." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:image" content="https://yoursite.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Your site name" />
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your page title" />
<meta name="twitter:description" content="A short, compelling description." />
<meta name="twitter:image" content="https://yoursite.com/og-image.png" />Common mistakes
- Relative image URLog:image="/img/photo.png" does not work reliably. Always use the full URL including https:// and your domain.
- Title or description too longPlatforms truncate around 60-70 characters (title) and 150-200 characters (description). If you would hate to see it cut off, do not write it.
- Forgetting the platform cacheFacebook, LinkedIn and X remember a previously scraped preview. Seeing an old version? Your change is probably live — the cache just is not.
Frequently asked questions
What is the difference between <title> and og:title?
The <title> is for the browser tab and Google; og:title is specifically for the share card on social media. Without og:title, most platforms fall back to the <title>.
Do I need twitter: tags next to og: tags?
X reads og: tags as a fallback. Only twitter:card is really needed to force the large card (summary_large_image); everything else can inherit from og:.
How fast do platforms see my change?
New links: instantly. Previously shared links: only when the platform cache refreshes — which can take hours to days.
Paste your URL and see within two seconds whether everything is right — on every platform.