Skip to content
WebAuditOS
Start free audit

Test your website now

Free, no card. We read only public pages.

Run free audit →

Technical SEO

What are Open Graph tags, and how do link previews work?

Open Graph tags control the title, text and image of your link previews in social apps and chats. The tags you need, image sizes, and how to test them.

Open Graph tags are meta tags in your page's head that tell social networks and chat apps what to show when someone shares your link: a title, a description, an image and the canonical URL. Without them, apps guess, often badly. Add og:title, og:description, og:image with an absolute URL, and og:url to every page.

Published · Last updated

By Michal Měřínský. Audit methodology.

What Open Graph is

Open Graph is a protocol originally created by Facebook and now read by most apps that show link previews: LinkedIn, Slack, Discord, WhatsApp, iMessage, Telegram and others. When a link is pasted, the app fetches the page and reads these tags:

<meta property="og:title" content="Pricing - Example">
<meta property="og:description" content="Plans from 19 EUR a month, with a 14-day trial.">
<meta property="og:image" content="https://example.com/og/pricing.png">
<meta property="og:url" content="https://example.com/pricing">
<meta property="og:type" content="website">

X reads its own twitter:card tags and falls back to Open Graph for most fields. Add twitter:card with the value summary_large_image to get a large image.

The image

  • Use an absolute URL starting with https://. A relative path breaks previews in most apps.
  • 1200 by 630 pixels is the common size, about a 1.91 to 1 ratio, and works across most platforms.
  • Keep important text away from the edges. Some apps crop to a square.
  • Keep the file small enough to load quickly. Apps time out on slow images.
  • Use a different image per important page if you can. One generic image on every link wastes the preview.

Why previews are wrong or missing

  • The tags are added by JavaScript. Link preview bots generally do not run JavaScript, so single-page apps built with React, Vite or AI app builders often show the same preview, or none, for every route.
  • The image URL is relative, redirects several times, or is blocked for bots.
  • The app cached an old preview. Platforms cache aggressively, sometimes for days.
  • A firewall or bot protection blocks the preview crawler.

How to test

Check what the server actually returns, without JavaScript:

curl -s https://example.com/pricing | grep -i 'property="og:'

Then use the platforms' own preview tools, such as Facebook's Sharing Debugger and LinkedIn's Post Inspector, which also refresh their cache for that URL.

Does it matter for SEO?

Open Graph tags are not a Google ranking factor. They decide how your links look everywhere people share them, which affects clicks from social, chat and newsletters, and therefore traffic and the links other people make to you.

What a scan can and cannot tell you

WebAuditOS reads the served HTML for og:title, og:description and og:image, warns if some are missing and fails if all are. It checks that og:image is an absolute URL, that og:url is declared, and that a non-empty twitter:card declaration is present, without validating its value or the other card fields. Tags added only by JavaScript count as missing, which matches what most preview bots see.

It does not fetch the image, check its size, or show how a particular app renders the card. Use the platform debuggers for that.

If every route of your app shares one preview, the problem is almost always client-side rendering, not the tags themselves.

Short answers

What size should an og:image be? 1200 by 630 pixels works on most platforms.

Why does my preview show an old image? The platform cached it. Use its debugger to refresh.

Do I need Twitter card tags too? Add twitter:card. X falls back to Open Graph for the rest.

Why do all my pages share the same preview? Your app sets the tags with JavaScript, which preview bots do not run.

In the product

The checks this maps to

Every check named here runs on every scan, on every plan - what a plan changes is how many pages are crawled, how long the history is kept and what you can do with the result. These are the ids the findings carry, so you can match a line in a report to the explanation above.

Technical SEO

What is a meta description, and how long should it be?

A meta description summarizes a page for search results. How long to make it, why Google rewrites it, and the mistakes that make it useless.

Technical SEO

What is schema markup, and how do you add it to a website?

Schema markup is structured data that describes your page to search engines in a fixed vocabulary. Which types matter, how to add JSON-LD, and how to test it.