Open Graph: Why Your Facebook and LinkedIn Previews Look Wrong
Learn what Open Graph tags do, how to set them correctly, and how to fix the "ugly preview" problem when your link is shared on Facebook, LinkedIn, Discord and Slack.
What you will learn in this guide
- What Open Graph (OG) tags are
- The five OG tags that matter most
- Twitter Card tags and how they differ
- Image size and aspect ratio rules
- How to clear cached previews on Facebook and LinkedIn
1 What Open Graph does
Open Graph is a meta tag standard originally from Facebook, now used by almost every social platform to determine how your link appears when shared. Without OG tags, social platforms guess from your HTML — usually badly.
2 The 5 OG tags that matter most
| Tag | Purpose | Example |
|---|---|---|
| og:title | Title shown in preview | "5 Ways to Improve Page Speed" |
| og:description | Description text | One-sentence summary of the page |
| og:image | Preview image | Absolute URL to a 1200x630 image |
| og:url | Canonical URL | Full https URL of the page |
| og:type | Content type | "article" for blog posts, "website" for pages |
3 Twitter Card tags
Twitter has its own card tags. Modern Twitter respects OG tags as fallback, but for the best preview add explicit twitter:* tags:
| Tag | Purpose |
|---|---|
| twitter:card | "summary_large_image" or "summary" |
| twitter:title | Title for Twitter preview |
| twitter:description | Description for Twitter preview |
| twitter:image | Image (Twitter accepts up to 4096x4096; 1200x675 is safe) |
| twitter:site | @yourtwitterhandle |
4 Image rules
- 1Use 1200x630 pixelsThis works for Facebook, LinkedIn, Discord, Slack and most other platforms.
- 2Keep file under 1MBMost platforms will refuse larger files.
- 3Avoid text near edgesSome platforms crop the edges differently. Keep important elements in the centre 1000x500.
- 4Use a CDNOG images need to load fast for social platforms. Use a fast CDN or your image host (Cloudinary, Bunny, etc.).
5 Clearing the cache — the step that fixes most problems
The single most common support question about Open Graph is "I fixed the tags and the preview is still wrong". The tags are almost never the problem. The cache is.
Facebook, LinkedIn, Slack and most other platforms fetch your page the first time somebody shares the link, and then they keep what they found. They do not come back to check. Editing your OG tags afterwards has no effect on a preview that has already been stored — the platform is not looking at your page any more, it is looking at its own copy.
The fix is to force a re-fetch, and every major platform provides a tool for exactly this. Facebook's Sharing Debugger and LinkedIn's Post Inspector are the two you will use most: paste the URL, ask for a fresh scrape, and the preview updates. Slack refreshes on its own schedule but usually responds to re-sharing the link after a change. X will re-fetch when the card is next requested.
6 What OG tags do not do
It is worth being direct about this, because the internet is full of advice implying otherwise: Open Graph tags do not help your Google rankings.
Google does not use og:title or og:description as ranking signals. Adding them will not move a page up the results, and a page with perfect OG markup will rank exactly where a page without it would have ranked. The tags exist to control how your link appears on platforms other than search engines, and that is the whole of their function.
That is not an argument against using them. It is an argument for using them for the right reason. A link shared into a Slack channel or a LinkedIn feed with a clear image and a description written for a human is a link people click. A link that shows a cropped logo and the first sentence of your cookie banner is a link people scroll past. The benefit is in the click-through on shares, and it is genuine and easy to measure — it is just not a ranking benefit, and pretending it is leads people to spend time on OG tags when their page has a more fundamental problem.
The related overclaim to avoid: og:description is not a place to put keywords. Nothing reads it except the platform rendering the preview, and the reader who sees the preview is a person deciding whether to click. Write it for that person.
7 The image is the tag that matters
If you only get one tag right, get og:image right. In a feed or a chat window the image occupies most of the preview's visual footprint, and it is doing nearly all of the work of persuading somebody to click.
Four rules, in order of how often they are broken:
- 1Use an absolute URL, over HTTPSA relative path in og:image is the most common cause of a preview with no image at all. The platform is fetching your page from the outside; it cannot resolve /images/hero.png against a context it does not have.
- 2Keep important content away from the edgesDifferent platforms crop to different ratios. Text that sits close to the left or right edge will lose its first or last words somewhere, and you will not see it happen because it happens on somebody else's phone.
- 3Make any text in the image largePreview thumbnails are frequently rendered far smaller than the source image. Text sized for a desktop screenshot is illegible by the time a reader sees it in a feed.
- 4Give each important page its own imageA single company logo used site-wide produces a preview that is technically valid and tells the reader nothing. If the page is worth sharing, it is worth an image that says what the page is about.
8 Where to spend the effort
You do not need Open Graph tags on every page, and rolling out a generic template site-wide is a poor use of an afternoon. The pages that get shared are a small and fairly predictable set: the homepage, the pricing or main product pages, and the handful of articles that people link to.
Do those properly. A real image, a title that reads well out of context, and a description written for somebody scrolling a feed rather than for a search engine. Then set a sensible fallback for everything else — the site name, a default image, the page title — so that nothing ever produces a genuinely broken preview.
And check your work from the outside. Share the link into a private Slack channel or a draft post and look at what appears. It costs a minute, and it is the only test that shows you what your visitors actually see. Everything a validator tells you is about the markup; only the preview tells you about the result.
9 Frequently asked questions
Not directly. Google does not use og:title or og:description as ranking signals, and adding them will not move a page up the results. What they do is control how your link looks when somebody shares it — on Facebook, LinkedIn, Slack, Discord, WhatsApp and most messaging apps. That matters commercially because a share with a broken preview gets fewer clicks than a share with a good one, and links that people actually click are links that bring readers. The benefit is real; it is just a sharing benefit rather than a ranking one, and it is worth being clear about which is which.
The platform guesses. It will usually take the page title or the meta description, and for the image it will scrape whatever it finds first in the markup — which is very often a logo, a sidebar advertisement, a tracking pixel, or a cropped fragment of something irrelevant. That is the "ugly preview" problem: nothing is broken, no error appears, and your link simply looks careless everywhere it is shared. Because it happens outside your site, nobody on your team ever sees it unless they share the link themselves.
Almost always because the platform has cached it. Facebook, LinkedIn and Slack fetch your page once when a link is first shared and then keep what they found, sometimes for a long time. Editing the tags changes nothing about a preview that has already been cached. Each platform provides a debugger that re-fetches the page — Facebook's Sharing Debugger and LinkedIn's Post Inspector are the two you will need most — and running the URL through those forces a refresh. This single step accounts for the large majority of "my OG tags do not work" reports.
1200 by 630 pixels is the safe default: it matches the roughly 1.91:1 ratio the major platforms expect, and it degrades gracefully everywhere else. Keep the file under about a megabyte, serve it over HTTPS from an absolute URL, and never place important text near the edges, because different platforms crop differently and your headline will lose its first and last words on somebody's phone. If the image contains text at all, make it large — a preview thumbnail is often displayed at a fraction of its true size, and body-copy-sized text in an OG image is unreadable by the time anybody sees it.
Not strictly. X falls back to Open Graph tags when the twitter:* equivalents are absent, so a page with correct OG tags will produce a reasonable preview there without any extra work. The reason to add them anyway is control: twitter:card lets you choose between a small thumbnail and a large image card, and the large card is substantially more visible in a feed. If you add them, add all of them — a page with twitter:card but no twitter:image is a page asking for a large image card and not supplying an image, which produces a worse result than having said nothing.
Yes, and this matters more than it looks. Platforms use og:url to decide whether two shares are the same link, so it is the field that aggregates share counts and engagement. If your page is reachable at several URLs — with tracking parameters, with and without a trailing slash, with a session identifier — and og:url reflects whichever variant the sharer happened to have in their address bar, then each variant is treated as a different link. Set og:url to the canonical URL, absolute and with the protocol included, and the shares consolidate as they should.
The ones people share, which on most sites is a small and predictable set: the homepage, the main product or pricing pages, and the articles that get linked to. Doing those properly, with a real image and a description written for a human scrolling a feed, takes an afternoon and is worth more than a site-wide rollout of generic tags. A shared template with the company logo as the image on every page is barely better than no tags at all — it produces a preview that is technically correct and tells the reader nothing about what they are being invited to click.