Open Graph Tags, and Why the Preview Is Often Wrong
Enter a URL and this fetches the page server-side, extracts its Open Graph and Twitter Card tags, and renders how the link will appear when it is shared — alongside a list of what is missing, what is too long, and what has been quietly inherited from somewhere else.
This matters more than it looks. A shared link is a small advertisement you do not get to write twice, and the difference between a card with an image and a bare blue link is most of the difference in whether anyone clicks it.
At a glance
- A missing og:image is the single most damaging omission — with twitter:card set to summary_large_image and no picture, some platforms render nothing at all.
- Where a value came from is shown, so you can see when a platform is falling back to the page title rather than a real tag.
- The preview is built from your actual tags, not from a template with your text dropped in.
- Platforms cache aggressively. Fixing a tag does not fix the preview until the cache is cleared.
How to Use This Tool
Enter the page URL
Fetched server-side, so it works on any public page without an extension and without logging in to a platform debugger.
Look at the previews
Facebook, X, LinkedIn and Slack render the same tags differently — different crop ratios, different amounts of description, different behaviour when the image is missing.
Read the issue list
Errors are the ones that visibly break a card. Warnings are things that will work but will not look their best.
Check where each value came from
A description shown as coming from the meta description rather than og:description means the platform is falling back, which works until the day it does not.
Clear the platform cache after fixing
Facebook's Sharing Debugger and LinkedIn's Post Inspector both have a re-scrape button. Without it, the old preview persists for days.
What Open Graph Is
Open Graph is a small set of meta tags that tell any platform how to display your page when someone shares it: a title, a description, an image, a URL and a type. Facebook introduced it in 2010 and effectively every platform now reads it, including ones with no connection to Facebook at all.
Without these tags, platforms guess. They will usually take the page title and meta description and hunt for an image somewhere in the markup, and the result is unpredictable — often the site logo, sometimes an icon from the header, sometimes nothing.
The tags exist so you decide instead of the guesser. That is the whole value proposition, and it is why the fallback behaviour is worth understanding: a page can look fine when shared today because a platform happened to pick something sensible, and look wrong tomorrow because it picked differently.
The Tags That Matter
- og:title — the headline on the card. It can differ from the page title, and often should: a title written for search results is not necessarily the one you want in a feed. Around 60 characters before truncation.
- og:description — two lines of context. Roughly 155 characters on most platforms, though several show far less on mobile than they do on desktop.
- og:image — the one that decides whether anyone looks. 1200×630 is the safe size, and it should be an absolute URL. This is the tag most often missing.
- og:url — the canonical URL for the shared page. Its job is to make sure shares of the same page with different tracking parameters are counted as the same thing.
- og:type — website for most pages, article for posts. Minor, but it affects how some platforms lay the card out.
- twitter:card — summary_large_image gives the big image card, summary gives the small square one. If you set summary_large_image and provide no image, X may show no card whatsoever.
Why Your Preview Looks Wrong After You Fixed It
This is the most common frustration with Open Graph, and it is almost never a tag problem.
Platforms cache what they scrape, sometimes for days. Once Facebook has fetched your page, it keeps that copy and will show the old card no matter how many times you correct the markup. The same applies to LinkedIn, X and Slack, each with its own cache and its own expiry.
The fix is to force a re-scrape. Facebook's Sharing Debugger has a Scrape Again button, LinkedIn's Post Inspector re-fetches on demand, and Slack refreshes when you unfurl the link again after a while. X is the least cooperative — its cache tends to expire on its own schedule and there is not much to do but wait.
There is a related trap worth knowing: a page that was shared before its tags existed can have a cached empty preview, which then looks like the tags are still missing. Check the source, not the card, when deciding whether a fix landed.
The og:image Mistakes
- A relative URL. Open Graph requires an absolute address with the protocol. A relative path is the most common reason an image that clearly exists never shows up.
- The wrong aspect ratio. Platforms crop to their own shape, and a tall image loses its middle. Design for 1200×630 and keep anything important away from the edges.
- Text in the image that is unreadable at card size. Cards render small, particularly on mobile, and detailed text in an image is effectively decoration.
- An image blocked to crawlers. If robots.txt disallows your image directory, the platform scraper cannot fetch it. Our Robots.txt Tester will tell you whether a specific image path is reachable.
- A file too large. Several platforms have limits around 5MB and will silently skip anything past them.
- No image at all, with twitter:card set to summary_large_image. This combination is the worst case: the platform is told to expect a large image, finds none, and can end up rendering nothing.
Twitter Cards and Open Graph
X reads Open Graph tags as a fallback, so a page with good og tags and no twitter tags will usually still produce a reasonable card. You do not need a duplicate set of everything.
The one tag genuinely worth adding is twitter:card, because it decides the card's shape and there is no Open Graph equivalent. Without it, you get the small square layout rather than the large image.
The others — twitter:title, twitter:description, twitter:image — are only worth setting when you want X to show something different from every other platform. Most sites do not, and maintaining two sets of tags that must be kept in sync is a reliable way to end up with two that disagree.
Where Sharing Fits
Open Graph is not a ranking factor. Google does not read these tags for search results, and no amount of card optimisation moves you up a results page.
The value is downstream. A link that renders as a proper card gets clicked and shared far more than one that renders as a bare URL, and those shares produce visits and sometimes links — which do matter. It is a distribution improvement, not a ranking one, and worth doing for what it actually does.
For the search side of the same page, our SERP Snippet Preview shows how the title and description will look in Google, which is a different set of limits and a different audience. Our Social Media Character Counter helps you fit the copy to each platform before you write the tags, and the HTTP Header Checker is where to look if a scraper cannot reach the page at all.
Frequently Asked Questions
Why is my og:image not showing?
In order of likelihood: the URL is relative rather than absolute, the platform has cached an older version of the page, the image is blocked by robots.txt, or the file exceeds the platform's size limit. Check the source first to confirm the tag is really there, then force a re-scrape.
What size should an og:image be?
1200×630 pixels, a 1.91:1 ratio. Platforms crop to their own shapes, so keep anything important away from the edges, and avoid small text — cards render at a fraction of the original size.
Do I need Twitter Card tags if I have Open Graph tags?
Mostly no. X falls back to Open Graph for title, description and image. The one worth adding is twitter:card, which decides whether you get the large image layout or the small square one and has no Open Graph equivalent.
Do Open Graph tags help SEO?
Not directly. Google does not use them for ranking or for search snippets. They help indirectly, because links that render as proper cards get clicked and shared more, and that traffic and those shares can lead to things that do matter.
How do I clear a cached preview?
Facebook's Sharing Debugger has a Scrape Again button and LinkedIn's Post Inspector re-fetches on demand. Slack refreshes after its own expiry. X gives you no manual control, so a corrected card there can take a while to appear.
Should og:title be the same as my page title?
Not necessarily. A page title is written for a search result, where the reader is scanning for a match to what they typed. A card in a feed is competing for attention against everything else in the feed, and often wants a different phrasing.
What does og:url do?
It names the canonical URL for the page, so shares of the same page carrying different tracking parameters are treated as one thing rather than several. It should be the clean, canonical address.
Why does the preview differ between platforms?
Each platform crops images to its own ratio, truncates text at its own length, and behaves differently when something is missing. The same tags legitimately produce different-looking cards, which is why previewing several at once is more useful than checking one.
How do I add Open Graph tags in WordPress?
SEO plugins such as Yoast and Rank Math add them automatically and include a social tab in the editor for setting a custom title, description and image per page. Without a plugin, add the meta tags to your theme's header.
Related Tools
Social Media Character Counter
Fit your card copy to each platform's limit before writing the tags.
SERP Snippet Preview
See how the same page looks in Google, where the limits are different.
HTTP Header Checker
Check whether a scraper can reach the page and its image at all.
Robots.txt Tester
Confirm your image directory is not blocked to crawlers.