Open Graph Tags Explained: Why Your Link Preview Looks Wrong

Open Graph tags are <meta> tags in a page's <head> that tell Facebook, LinkedIn, Slack, Discord, WhatsApp, and most other apps which title, description, and image to show when someone shares the link. If they are missing, the platform guesses or shows a bare URL. If they are present but wrong, you get a cropped image, an old title, or no image at all. Most broken previews come down to five causes: a missing tag, a relative image URL, an image of the wrong size or format, a cached old version, or tags added by JavaScript that the platform's crawler never sees.

This post explains how a preview is built, which tags matter, what each platform documents about images, and how to check a page before you share it. FindUtils tools used here: Open Graph Preview, Meta Tag Generator, Image Resizer, and Image Compressor.

How does a link preview get built?

When you paste a link, the platform's crawler fetches the page's HTML, reads the meta tags in the <head>, downloads the image they point to, and stores the result. That stored copy is what everyone sees when the link is shared again. Two consequences follow:

• The crawler reads the HTML it receives. If your tags are only added later by scripts running in the browser, a crawler that does not run them will not find them.
• The first fetch is cached. Meta's documentation for Facebook states that the crawler scrapes and caches the metadata the first time a URL is shared, and that images are cached by their URL.

The four required Open Graph tags

The Open Graph protocol lists four properties that every page should have:

The protocol also recommends optional tags, of which og:description (a one to two sentence summary) and og:site_name are the ones previews use most. A minimal, complete set looks like this:

<class="text-rose-400">meta property="og:title" content="Open Graph Tags Explained" />
<class="text-rose-400">meta property="og:type" content="article" />
<class="text-rose-400">meta property="og:url" content="https://example.com/blog/open-graph/" />
<class="text-rose-400">meta property="og:image" content="https://example.com/images/og-open-graph.jpg" />
<class="text-rose-400">meta property="og:image:width" content="1200" />
<class="text-rose-400">meta property="og:image:height" content="630" />
<class="text-rose-400">meta property="og:image:alt" content="A link turning into a preview card" />
<class="text-rose-400">meta property="og:description" content="Which tags control link previews and how to fix a broken one." />
<class="text-rose-400">meta property="og:site_name" content="Example" />

Open Graph vs X Cards

X (formerly Twitter) uses its own twitter: tags, but its Cards markup reference documents a fallback to Open Graph for most of them:

In practice that means one extra line covers most pages: add <meta name="twitter:card" content="summary_large_image"> to get the large image card, and let the other values come from your Open Graph tags. Add separate twitter: tags only when you want different text on X.

What image size should an Open Graph image be?

There is no single official size, because each platform documents its own. Here is what three of them publish:

A 1200 × 630 image meets Facebook's and LinkedIn's guidance and sits close to X's 2:1 ratio, which is why it is the common default. Keep the title text and logo away from the edges so a slight crop on X does not cut them off. The Aspect Ratio Calculator helps when you resize artwork from another ratio, the Image Cropper and Image Resizer get it to 1200 × 630, and the Image Compressor keeps the file well under the 5 MB limits.

Why your link preview looks wrong: a checklist

Work down this list in order. Each item matches a symptom.

1. No card at all, or only the URL

The page has no Open Graph tags, or the tags are not in the HTML the server sends. View the page source (not the developer tools Elements panel, which shows what scripts added) and search for og:title. If it is not there, the crawler cannot see it either.

2. Title and text appear, but no image

Check that og:image is a full URL starting with https://. A relative path like /images/card.jpg is a common cause of a missing image. Then open the image URL in a private browser window: it must load without a login and return an image, not an HTML error page.

3. The image appears on the second share but not the first

Meta's documentation explains that the crawler has to see an image at least once before it can render it, so the first share may show no image. It lists three fixes: run the URL through the Sharing Debugger first, trigger a scrape through the Graph API, or add og:image:width and og:image:height so the crawler can render the image without waiting to download it.

4. The image is cropped or tiny

The image is the wrong shape or too small. Use 1200 × 630, or at least 600 × 315 for Facebook's larger preview. On X, use the summary_large_image card type; a summary card shows a small square image instead.

5. You changed the image, but the old one still shows

Platforms cache images by URL. Meta's guidance is to give the new image a new URL (for example, add a version to the file name), keep the old file online for existing posts, and then refresh the page in its Sharing Debugger. Updating the image does not change previews of posts that were already shared. LinkedIn's Post Inspector fetches a fresh copy of a URL in the same way.

6. The preview works on Facebook but not on X

Check the image format and the card type. X does not support SVG images, and without a twitter:card tag it may fall back to a small summary card.

7. The wrong title or description appears

Some platforms prefer their own tags when both exist, so an old twitter:title can override a new og:title on X. Search the page source for duplicate or leftover tags, especially from a plugin and a theme both adding them.

How to check a page before you share it

The platform debuggers only work on public URLs, and each shows one platform. For a draft, a staging page, or a quick check across several apps at once, use the Open Graph Preview:

1. Choose Paste HTML and paste your page's <head> or full source, or choose Manual Entry and type the values.
2. Read the Validation panel. It flags missing og:title, og:description, og:image, and og:url tags.
3. Watch the character counters: og:title against 60 characters and og:description against 155, plus 70 and 200 for the X title and description.
4. Switch between the Facebook, Twitter/X, LinkedIn, Discord, Slack, and WhatsApp previews.
5. Click Generate Tags, then Copy Tags, and paste the result into your page's <head>.

If you are writing tags from scratch, the Meta Tag Generator produces the title, description, Open Graph, and X Card tags together, with a search result preview. Check the search snippet itself with the SERP Preview.

After the page is live, run it once through each platform's own debugger before a big launch, so the first share already shows the right card.