---
url: https://findutils.com/blog/open-graph-tags-explained-why-link-previews-look-wrong
title: "Open Graph Tags Explained: Why Your Link Preview Looks Wrong"
description: "Learn which Open Graph and X Card tags control link previews, the image sizes Facebook, LinkedIn and X document, and how to fix a missing or stale preview."
category: seo
content_type: blog
cluster: seo
locale: en
read_time: 8
status: published
author: "olgunozoktas"
published_at: 2026-10-18T08:08:00Z
excerpt: "A shared link turns into a card only if the page tells the platform what to show. This post explains the four required Open Graph tags, how X falls back to them, the image sizes each platform documents, and a checklist for previews that are blank, cropped, or out of date."
tag_ids: ["open-graph", "social-media", "meta-tags", "seo", "link-preview"]
tags: ["Open Graph", "Social Media", "Meta Tags", "SEO", "Link Preview"]
primary_keyword: "open graph tags"
secondary_keywords: ["og image size", "link preview not showing", "twitter card vs open graph", "og:image not working", "facebook link preview image", "linkedin preview image size"]
tool_tag: "open-graph-preview"
related_tool: "open-graph-preview"
related_tools: ["open-graph-preview", "meta-tag-generator", "serp-preview", "image-resizer", "image-cropper", "image-compressor", "aspect-ratio-calculator"]
updated_at: "2026-10-18T08:08:00Z"
og_image: "/images/content/blog/open-graph-tags-explained-why-link-previews-look-wrong-cover-20261018.webp"
image_alt: "A plain link on the left turns into a rich preview card on the right, with an image block, a title bar, and a short description line."
---
Open Graph tags are `` tags in a page's `` 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](/seo/open-graph-preview/), [Meta Tag Generator](/seo/meta-tag-generator/), [Image Resizer](/convert/image-resizer/), and [Image Compressor](/convert/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 ``, 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](https://ogp.me/) lists four properties that every page should have:
| Tag | What it holds | Example |
|-----|---------------|---------|
| `og:title` | The title as it should appear in the card | `The Rock` |
| `og:type` | The kind of object, such as `website` or `article` | `video.movie` |
| `og:image` | The URL of the image that represents the page | `https://example.com/rock.jpg` |
| `og:url` | The canonical URL, used as the page's permanent ID | `https://example.com/the-rock/` |
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:
```html
```
## Open Graph vs X Cards
X (formerly Twitter) uses its own `twitter:` tags, but its [Cards markup reference](https://web.archive.org/web/20260116124848/https://developer.x.com/en/docs/x-for-websites/cards/overview/markup) documents a fallback to Open Graph for most of them:
| X tag | Falls back to | Notes from X's documentation |
|-------|---------------|------------------------------|
| `twitter:card` | none (see note) | If `og:type`, `og:title`, and `og:description` exist but `twitter:card` is absent, a summary card may be rendered |
| `twitter:title` | `og:title` | Maximum 70 characters |
| `twitter:description` | `og:description` | Maximum 200 characters |
| `twitter:image` | `og:image` | Under 5 MB; JPG, PNG, WEBP, or GIF; SVG is not supported |
| `twitter:image:alt` | `og:image:alt` | Maximum 420 characters |
In practice that means one extra line covers most pages: add `` 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:
| Platform | What its documentation says |
|----------|-----------------------------|
| Facebook | At least 1200 × 630 pixels for the best display on high-resolution devices; at least 600 × 315 for the larger link preview; minimum 200 × 200; file size up to 8 MB; keep the ratio close to 1.91:1 to avoid cropping |
| LinkedIn | Minimum 1200 × 627 pixels; recommended ratio 1.91:1; maximum file size 5 MB |
| X, `summary_large_image` card | Aspect ratio 2:1; minimum 300 × 157, maximum 4096 × 4096 pixels; under 5 MB; SVG not supported |
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](/calculate/aspect-ratio-calculator/) helps when you resize artwork from another ratio, the [Image Cropper](/design/image-cropper/) and [Image Resizer](/convert/image-resizer/) get it to 1200 × 630, and the [Image Compressor](/convert/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](https://www.linkedin.com/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](/seo/open-graph-preview/):
1. Choose **Paste HTML** and paste your page's `` 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 ``.
If you are writing tags from scratch, the [Meta Tag Generator](/seo/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](/seo/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.
## Key takeaways
- Four Open Graph tags are required: `og:title`, `og:type`, `og:image`, and `og:url`. Add `og:description` too.
- X reads Open Graph tags as a fallback; add `twitter:card` with `summary_large_image` for a large image.
- A 1200 × 630 image fits Facebook's and LinkedIn's documented guidance and is close to X's 2:1 ratio.
- Use absolute image URLs, put tags in the server HTML, and change the image URL when you replace an image.
- Preview drafts before publishing, then refresh the live URL in each platform's debugger.
## FAQ
### What are Open Graph tags?
They are `` tags in a page's `` that tell social platforms and messaging apps which title, description, image, and URL to show in a link preview. The format is defined by the Open Graph protocol at ogp.me.
### Do I need both Open Graph and Twitter Card tags?
Usually you need Open Graph tags plus one `twitter:card` line. X's documentation lists Open Graph fallbacks for the title, description, and image, so separate `twitter:` tags are only needed when you want different text or a different image on X.
### What is the best og:image size?
1200 × 630 pixels is the common choice. Facebook recommends at least 1200 × 630, LinkedIn asks for at least 1200 × 627 at 1.91:1, and X's large image card uses a 2:1 ratio.
### Why is my Facebook preview still showing the old image?
Facebook caches images by URL. Upload the new image under a new file name, update `og:image`, and refresh the page in Meta's Sharing Debugger. Posts shared before the change keep their old preview.
### Do Open Graph tags help SEO rankings?
They control how links look when shared, not how pages rank in search. A clear title, description, and image can make people more likely to click a shared link, but the tags are not a search ranking factor in themselves.
### Can I preview Open Graph tags without publishing the page?
Yes. Paste the HTML into the FindUtils Open Graph Preview to see Facebook, X, LinkedIn, Discord, Slack, and WhatsApp previews from a draft. The platform debuggers need a public URL.
## Related reading
- [Technical SEO checklist: sitemap, robots.txt and hreflang](/blog/technical-seo-checklist-sitemap-robots-hreflang/)
- [How to fix a page's heading structure](/guides/heading-structure-analyzer-guide/)
- [How to compress images without losing quality](/guides/how-to-compress-images-without-losing-quality/)
## Sources
- [The Open Graph protocol](https://ogp.me/)
- [Meta for Developers: Images in link shares (archived December 2025)](https://web.archive.org/web/20251209235958/https://developers.facebook.com/docs/sharing/webmasters/images/)
- [LinkedIn Help: Make your website shareable on LinkedIn](https://www.linkedin.com/help/linkedin/answer/a521928)
- [X Developer Platform: Cards markup tag reference (archived January 2026)](https://web.archive.org/web/20260116124848/https://developer.x.com/en/docs/x-for-websites/cards/overview/markup)
- [X Developer Platform: Summary card with large image (archived January 2026)](https://web.archive.org/web/20260112050218/https://developer.x.com/en/docs/x-for-websites/cards/overview/summary-card-with-large-image)