Open Graph Tags: What They Are and How to Get Perfect Link Previews (2026)

Every time someone shares your link on LinkedIn, Facebook, Slack, WhatsApp or iMessage, the app builds a little preview card: an image, a headline, a line of text. That card decides whether anyone clicks. And what goes on it is controlled by a handful of tags most websites get slightly wrong.

Those are Open Graph tags. Get them right and every share of your page looks like a polished ad. Get them wrong and your link shows up as a bare URL, the wrong image, or your homepage title on every page.

This guide explains what Open Graph is, the tags you need, the right image size in 2026, how each platform uses them, and how to fix previews that won't update.

What is Open Graph?#

Open Graph is a protocol, originally created by Facebook in 2010, that lets a web page describe itself to the apps that link to it. You add a few <meta> tags to the page's <head>, and any app that builds a link preview reads them to decide the title, description and image it shows.

<meta property="og:title" content="Open Graph Tags: The Complete 2026 Guide">
<meta property="og:description" content="What Open Graph tags are, the image size to use, and how to fix broken link previews.">
<meta property="og:image" content="https://example.com/images/og-guide.png">
<meta property="og:url" content="https://example.com/open-graph-tags">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Example">

Facebook invented it, but today almost everything reads it: LinkedIn, Slack, Discord, WhatsApp, iMessage, Telegram, Microsoft Teams, Pinterest, and X as a fallback.

Why Open Graph tags matter#

Open Graph tags don't affect your Google rankings directly. They matter because of what happens after someone shares your page:

• They control your first impression. A clear image and headline get far more clicks than a plain URL.
• They stop platforms guessing. Without tags, each app scrapes whatever it finds: a random image from the page, your cookie banner text, or the first line of your footer.
• They make every share look consistent. The same card appears whether a customer shares you in Slack, a colleague posts you on LinkedIn, or a friend sends you on WhatsApp.

The Open Graph tags you need#

The Open Graph protocol defines four required properties and several optional ones. In practice, these six cover almost every page:

Useful extras:

• og:image:width and og:image:height tell the app the image size before it downloads it, so the first share renders correctly.
• og:image:alt describes the image for screen readers.
• og:locale sets the language, such as en_US.

A few rules apply to all of them:

• Use absolute URLs. og:image and og:url must start with https://. A relative path like /images/og.png is the most common reason previews show no image.
• Make them page specific. Every important page should have its own title, description and image. Repeating your homepage tags on every page makes every share look the same.
• Keep the title short. Around 60 characters, or it gets cut off on most platforms.

Open Graph image size in 2026#

Make one image per page at 1200 x 630 pixels. That's a 1.91:1 ratio, and it renders cleanly on nearly every platform. Here's what each platform publishes:

The practical takeaways:

• Use JPG or PNG. They're the safest formats across every platform.
• Keep the file small. Aim for under 300 KB. A well-compressed 1200 x 630 JPG easily fits, and it stays under WhatsApp's 600 KB limit.
• Keep text and faces in the center. Some apps crop the edges, so leave a margin around anything important.
• Make the text readable on a phone. Most shares are viewed on mobile, where your 1200 pixel image shows at a fraction of the size.

Twitter and X cards: do you need separate tags?#

X has its own tags, called Twitter Cards. The good news: X falls back to your Open Graph tags when its own are missing. So if your Open Graph tags are correct, you only need one extra tag to get the large image card:

<meta name="twitter:card" content="summary_large_image">

Add twitter:site with your X handle if you want the card attributed to your account. Only add twitter:title, twitter:description or twitter:image if you want X to show something different from everyone else.

How each platform uses Open Graph tags#

• Facebook reads og:title, og:description, og:image and og:url, and caches the result. Use the Sharing Debugger to see what it sees.
• LinkedIn reads the same core tags. A small image can collapse into a thumbnail beside the text. The Post Inspector shows the preview and forces a fresh scrape.
• Slack unfurls links using Open Graph tags, and also reads Twitter Card tags.
• Discord builds an embed from Open Graph tags and can show a large image when twitter:card is summary_large_image.
• WhatsApp reads Open Graph tags and needs a small image file, so it's the first place an oversized image fails.
• iMessage generates a rich link preview from og:title and og:image on the sender's device.

Why your link preview won't update#

You've fixed your tags, shared the link, and the old preview still appears. That's almost always caching. Platforms store the preview the first time a URL is shared and reuse it.

How to force a refresh:

1. Facebook: open the Sharing Debugger at developers.facebook.com/tools/debug, paste the URL and click Scrape Again.
2. LinkedIn: paste the URL into the Post Inspector at linkedin.com/post-inspector. Inspecting it makes LinkedIn fetch the page again.
3. Slack, Discord and others: they don't offer a public refresh tool. Adding a harmless query string, like ?v=2, makes the app treat it as a new URL.

If the preview still looks wrong after a fresh scrape, the problem is on your page, not in the cache.

Common Open Graph mistakes#

• Relative image URLs. content="/og.png" instead of the full https:// address.
• The same tags on every page. A theme hard-codes the homepage title and image site-wide.
• Image blocked from crawlers. The image sits behind a login, a firewall rule, or a robots.txt rule that stops the platform's crawler.
• Image too large or too small. Over WhatsApp's 600 KB, over LinkedIn's 5 MB, or so small it collapses into a thumbnail.
• Tags added with JavaScript. Most link preview crawlers don't run JavaScript, so tags injected after the page loads are invisible to them. Put them in the HTML the server sends.
• Tags lost in a redesign or plugin change. The new theme or SEO plugin stops outputting Open Graph tags, and nobody notices until someone shares a page and it looks broken.

How to check your Open Graph tags#

1. View the page source (not the inspector) and search for og:. You should see each tag once, in the <head>, with absolute URLs.
2. Use a meta tag checker. MyKavo's free Meta Tag Checker reads a page's og:title, og:description and og:image alongside its title, meta description, canonical, robots meta and H1, and flags anything missing.
3. Preview it on the platforms that matter. Run the URL through the Facebook Sharing Debugger and LinkedIn Post Inspector before a launch or campaign.

Keep your link previews from breaking#

Open Graph tags are set once and forgotten, which is exactly why they break quietly. A theme update, a new SEO plugin or a site migration can drop them from every page at once, and you only find out when a big share goes out with no image.

MyKavo watches the pages you choose against an approved baseline and alerts you when their content and important elements change, with a before and after view, so a release that breaks your page is caught on the next scan instead of in front of your audience.

The bottom line#

Add og:title, og:description, og:image, og:url, og:type and og:site_name to every important page, with absolute URLs and a 1200 x 630 image under 300 KB. Add twitter:card for X, test with the Facebook and LinkedIn tools, and recheck after every redesign.

Check any page now with the free Meta Tag Checker, then start free with MyKavo so a theme update or plugin change can't quietly break your pages.