- Open Graph tags are meta tags in <head> that platforms read when someone posts your URL. They set the preview card's title, description and image; without them the platform guesses, and often guesses wrong.
- Required: og:title, og:description, og:image, og:url and og:type. Add og:site_name and og:image:alt too.
- og:image: 1200x630 px at 1.91:1, an absolute https URL, under about 5 MB, no login wall, plus og:image:width and og:image:height.
- Twitter/X: twitter:card summary_large_image, twitter:title and twitter:image; X falls back to the og: tags when its own names are missing.
- Stale preview: platforms cache the card. Force a refresh with Facebook's Sharing Debugger and LinkedIn's Post Inspector.
What Open Graph is
Open Graph is a set of <head> meta tags that decide how a link looks when it is shared. Facebook, LinkedIn, X, Discord, iMessage and others read the og: tags on your URL and build a preview card: a title, a description and an image. If the tags are missing, the platform picks whatever text and image it can find - often the wrong image, or no image at all.
Open Graph was originally Facebook's protocol (ogp.me), but most platforms use it. Twitter mostly reads the same og: tags, with a few twitter: names of its own.
The Open Graph tags you need
These five belong on every page worth sharing:
- og:title - the preview title, often the page's <title> or H1.
- og:description - the one-or-two-sentence preview description.
- og:image - the preview image; see the size rules below.
- og:url - the canonical URL of this page, matching your <link rel="canonical">.
- og:type -
articlefor a blog post or guide,websitefor a home page.
Add these two as well: og:site_name (your site's name, shown in the card) and og:image:alt (a short image description for accessibility).
Copy-paste this into <head>
<meta property="og:type" content="article" />
<meta property="og:site_name" content="My Site" />
<meta property="og:title" content="Page title" />
<meta property="og:description" content="One or two sentences." />
<meta property="og:url" content="https://www.example.com/page" />
<meta property="og:image" content="https://www.example.com/images/share.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Short image description" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Page title" />
<meta name="twitter:description" content="One or two sentences." />
<meta name="twitter:image" content="https://www.example.com/images/share.jpg" />Twitter/X tags
Use twitter:card summary_large_image for the big-image card on X. With twitter:title and twitter:image you control the card exactly; if any twitter: name is missing, X falls back to the matching og: tag (og:title, og:image, og:description). That is why a complete og: set also fixes most Twitter previews.
X does not publish a public preview debugger like Facebook's; the card is generated when someone posts the link, so check the URL after the first share.
og:image rules: size, URL and what blocks it
- 1200x630 px at 1.91:1. That is the platform-preferred size; smaller images shrink down and very large ones are downscaled or cropped to the same ratio.
- An absolute https URL. og:image must be a full address starting with https://; a relative path such as /images/share.jpg is not resolved reliably by the crawlers.
- Under about 5 MB. That is the practical ceiling Twitter and LinkedIn apply, so one image works everywhere.
- No login wall. Facebook's crawler, LinkedIn's crawler and X's fetcher must be able to download the image without signing in, or the card shows nothing.
- Declare the size: og:image:width="1200" and og:image:height="630" remove guesswork for the crawlers.
If you change the image, keep the URL the same only if the picture is actually the same - crawlers cache by URL, which leads to the next section.
Why a share preview stays old
Platforms cache the preview card for a URL, sometimes for days. After you add or change og: tags, a shared link can still show the old title, description or image because Facebook, LinkedIn or X is reusing a fetched copy, not reading your page again.
- Facebook: paste the URL into the Sharing Debugger and run "Scrape again" - it fetches your page fresh and updates the card.
- LinkedIn: use the Post Inspector to refresh the cached preview for a URL.
- X: no public debugger exists; the card rebuilds on the next post of that URL.
Each platform crawls your page itself, so the fix is on your URL: once the tags are live and the cache is refreshed, new shares show the new card.
Common mistakes
- Relative og:image. "images/share.jpg" or "/images/share.jpg" may work on your domain but the sharing crawlers request an absolute address; use https://www.example.com/images/share.jpg.
- og:url that differs from the canonical. If og:url says one URL and <link rel="canonical"> says another, platforms can associate the card with the wrong URL.
- Image blocked by robots.txt. If robots.txt disallows the image URL, Facebook's and LinkedIn's crawlers cannot fetch it and the card has no image. Test the image URL in a crawler-friendly checker.
- No og:image:alt. The card is harder to understand for anyone using assistive technology, and some platforms show the alt text where the image cannot load.
How to test it before you share
Paste your URL into the free Open Graph checker. It reads every og: and twitter: tag on the page, fetches og:image to confirm it is reachable and sized right, and renders the share preview exactly as platforms will show it - before you post.
For the rest of the page's indexability signals (robots meta, canonical, X-Robots-Tag, heading structure), run the same URL through the on-page SEO checker.
Remember: the preview is built from your live page at share time, not from your CMS settings. Check the public URL, not a draft or a localhost address.
Questions and answers
Open Graph tags questions
What are Open Graph tags?
They are meta tags in a page's <head> - og:title, og:description, og:image, og:url and og:type - that platforms such as Facebook, LinkedIn and X read to build the preview card for a shared link.
Which Open Graph tags are required?
og:title, og:description, og:image, og:url and og:type are the five to set on every page worth sharing; add og:site_name and og:image:alt as well.
What size should og:image be?
1200x630 px at 1.91:1, served from an absolute https URL, under about 5 MB, with no login wall, and declared with og:image:width and og:image:height.
Why does my link preview still show the old image?
Facebook, LinkedIn and X cache the preview card for a URL. Refresh Facebook's cache with the Sharing Debugger (scrape again) and LinkedIn's with the Post Inspector; X rebuilds the card on the next post of that URL.
Do I need twitter: tags if I already set og: tags?
X falls back to the og: tags when the twitter: names are missing, so a complete og: set covers most Twitter previews. Add twitter:card summary_large_image, twitter:title and twitter:image when you want full control on X.
Sources
- The Open Graph protocol — ogp.me, the og: tag definitions
- Sharing Debugger — Facebook's tool to scrape a URL again and refresh its cached preview
- Post Inspector — LinkedIn's tool to inspect and refresh a link's cached preview
- X card markup — X's documentation of twitter:card and the fallback to og: tags
- Open Graph checker — MrKeyword's free tool that reads og: and twitter: tags and tests og:image
