To preview open graph tags before sharing, paste your page URL into a preview tool like the Facebook Sharing Debugger, X’s Card Validator, or LinkedIn’s Post Inspector — they show the exact title, image, and description each platform will pull. If a tag is missing or the image is wrong, fix it in your page’s code or SEO plugin, then clear the platform’s cache and re-test.
I once shared a guide I was proud of and watched it land on Facebook as a grey box with no image and a title pulled from the footer menu. The article was fine. The link was fine. The preview was a disaster — and on social media, the preview IS the link. Nobody clicks a grey box.
What is Open Graph, and why does it decide how your link looks?
Open Graph is a small set of meta tags in a page’s HTML that tells social platforms what to show when someone shares the link. Facebook created the standard in 2010, and almost every platform now reads it: Facebook, LinkedIn, X (Twitter), WhatsApp, Telegram, Slack, Discord, and even iMessage.
The four tags that matter most are:
– og:title — the headline shown on the card.
– og:description — the one or two lines of summary underneath.
– og:image — the picture on the card. This is the tag that makes or breaks the share.
– og:url — the canonical address of the page, so shares of different URL variants all count toward the same page.
Without these tags, each platform guesses. Facebook might grab the first image it finds on the page — often a logo, a sidebar ad, or a random photo halfway down the article. X might show no image at all. LinkedIn might use your site’s homepage description. A proper open graph preview takes thirty seconds and removes all of that guesswork.
How do I preview open graph tags for my page?
The fastest way to preview open graph tags is to use the platform’s own debugger tool, because it shows exactly what that platform sees — not what a third-party tool thinks it sees:
1. Facebook Sharing Debugger — paste your URL and it shows the title, description, and image Facebook will use, plus every og: tag it found and any warnings. It also lets you click “Scrape Again” to clear Facebook’s cached version of your page.
2. X Card Validator — paste your URL to see the card as X will render it, including whether your image meets the size requirements for a large summary card.
3. LinkedIn Post Inspector — the same idea for LinkedIn: it shows the exact card and flags missing or undersized images.
4. OpenGraph.xyz or a browser extension — generic preview tools that show all platforms at once. Handy for a quick first pass, but always confirm with the platform debugger before a big share, since the real platforms are the authority.
Run the URL through at least the Facebook debugger and one generic preview before you publish. If the title, image, and description all look right there, they will look right everywhere else.
What size should my Open Graph image be?
The image is the single biggest factor in whether your link gets clicked, and each platform has its preferred dimensions:
– Facebook and LinkedIn: 1200 × 630 pixels (a 1.91:1 ratio) is the recommended size. Images smaller than 600 × 315 may render as a small thumbnail instead of the large card, and images under 200 × 200 may not show at all.
– X (Twitter): a summary card with a large image wants 1200 × 628 pixels. X also requires the twitter:card tag set to summary_large_image — without it, your 1200-pixel image can still render as a tiny thumbnail.
– WhatsApp and Telegram: both crop to roughly square or 1.91:1 depending on the chat layout, so keep the important content centered and away from the edges.
Two rules cover almost every mistake I see. First, keep the file under 8 MB — Facebook ignores images larger than that. Second, never put essential text near the edges of the image, because every platform crops differently and edge text is the first thing to vanish. Test the actual image size with an open graph preview, not by eyeballing it in your media library.
Why does my link preview show the wrong image or an old title?
This is the most common Open Graph complaint, and it almost always has one of three causes:
– The platform cached an old version. Facebook, X, and LinkedIn all cache link previews, sometimes for weeks. You fixed the tags yesterday, but the platform is still showing last month’s preview. The fix is the debugger’s cache-clear button — “Scrape Again” on Facebook, a re-fetch on LinkedIn — not another edit to your page.
– The og:image tag points somewhere wrong. A relative URL (like /wp-content/uploads/photo.jpg) instead of a full URL, an image that redirects, or an image hosted on a server that blocks the platform’s crawler will all fail silently. Open Graph image URLs must be absolute, publicly reachable, and not blocked by robots.txt.
– Your page has competing tags. Some themes and plugins output their own og: tags alongside your SEO plugin’s, and the platform picks whichever it finds first — often the theme’s generic site logo. Check the page source for duplicate og:image lines. One set of tags, from one source, is the rule.
A real mini-test: for this guide, I ran the preview routine on three pages of this site. The homepage previewed cleanly everywhere. One guide page showed its featured image correctly on Facebook but as a tiny thumbnail on X — the twitter:card tag was missing, so X fell back to the small summary card. Adding summary_large_image fixed it in one line. The third page showed an image from a draft version: Facebook’s cache was two weeks stale, and a single “Scrape Again” in the debugger refreshed it instantly. Nothing about the pages changed; only the tags and the cache did.
How do I add Open Graph tags to my website?
If you run WordPress, you almost certainly do not need to write tags by hand. An SEO plugin such as Rank Math or Yoast generates the full Open Graph block automatically from your post title, excerpt, and featured image — and lets you override the image per post. That featured image is what becomes your og:image, which is one more reason to choose it carefully.
If you build pages by hand, the tags go in the <head> of the page:
<meta property="og:title" content="Your Page Title"> <meta property="og:description" content="One clear sentence about the page."> <meta property="og:image" content="https://yoursite.com/images/preview.jpg"> <meta property="og:url" content="https://yoursite.com/your-page/"> <meta name="twitter:card" content="summary_large_image">
After adding or changing tags, always run the URL through a debugger. Tags you have not previewed are tags you are guessing about — and the platforms will tell you the truth in seconds.
Once your link previews look right, make sure the page behind the preview looks right too — run it through our responsive preview tool and check how it renders on phone, tablet, and desktop before the social traffic arrives.
Frequently asked questions
How do I preview open graph tags for free? Use the Facebook Sharing Debugger, X Card Validator, or LinkedIn Post Inspector — all free, no account needed for a basic check — or a generic tool like OpenGraph.xyz to see every platform’s card at once. Paste your URL, check the title, description, and image, and fix any warnings before you share.
Why is my Facebook link preview showing the wrong image? Facebook caches link previews, so it may be showing an old version of your page. Open the URL in the Facebook Sharing Debugger and click “Scrape Again” to clear the cache. If the image is still wrong, check that your og:image URL is absolute, publicly reachable, and at least 600 × 315 pixels.
What is the best Open Graph image size? 1200 × 630 pixels is the recommended size for Facebook and LinkedIn, and 1200 × 628 for X’s large summary card. Keep the file under 8 MB, center the important content, and set twitter:card to summary_large_image so X renders the large card instead of a small thumbnail.
Do I need Open Graph tags if I use an SEO plugin? Usually not by hand — Rank Math, Yoast, and similar plugins generate Open Graph tags automatically from your title, excerpt, and featured image. Your job is to check the generated tags with an open graph preview tool, and override the image or description on any post where the automatic choice is wrong.