Guides

Open Graph and Twitter card tags: what social platforms actually read

October 11, 2026 · 5 min read

When someone pastes your link into a chat, a social feed, or a messaging app, the platform fetches your page and builds a preview card from a handful of tags in the page head. If those tags are missing or wrong, the card shows a bare URL, a cropped image, or the wrong text. This guide covers the tags that matter, the image rules our checker applies, and the one fact that explains most "but it works in my browser" mysteries.

The Open Graph tags

Open Graph is a set of meta tags that began at Facebook and is now read by most platforms and messaging apps. Four of them do most of the work:

  • og:title is the headline on the card. It does not have to match your title tag, so write it for a feed rather than for a search result.
  • og:description is the summary line under the headline. Without it, previews may show no summary.
  • og:image is the picture. It is the part that most affects whether a shared link gets noticed.
  • og:url is the address the platform should treat as the canonical one for the page.

Open Graph tags use the property attribute: <meta property="og:title" content="...">. A very common mistake is writing them with name instead. Many scrapers will not read them that way, and the checker reports it.

The Twitter card tags

X (formerly Twitter) reads its own tags, written with the name attribute, and falls back to Open Graph for anything it does not find. The one you must set yourself is twitter:card. It tells X what kind of card to draw:

  • summary_large_image draws a wide image above the title.
  • summary draws a small square image beside the title.

Without twitter:card, X shows only a plain link. If you set it, twitter:title, twitter:description and twitter:image are optional, because X uses your og:title, og:description and og:image when they are absent. The checker reports a card with neither a twitter:title nor an og:title, and one with neither a twitter:image nor an og:image. It also flags the reverse of the Open Graph mistake: Twitter tags written with property instead of name.

Image size and ratio, as our checker applies them

These numbers come from the checker's rules. They are measured against what scrapers render, not published platform limits, and platforms can change their behaviour.

For og:image:

  • Use an absolute URL. A relative one is flagged, because many scrapers do not resolve relative URLs.
  • The target size is 1200 by 630 pixels. Below 1200 by 630 the checker notes the image may not render as a large preview. Below 200 by 200 it is an error, and the image is likely to be ignored.
  • The target shape is about 1.91 to 1, with some tolerance. Images far from that ratio are flagged because platforms may crop them.
  • Keep the file under 8 MB. The checker warns above that, and recommends staying well under 1 MB in practice.
  • Add og:image:alt. The checker notes when it is missing, since alt text helps people who use screen readers.

For twitter:card set to summary_large_image:

  • The minimum is 300 by 157 pixels. Below that the checker warns.
  • The target shape is 2 to 1, such as 1200 by 600 pixels, with some tolerance.
  • Keep the file under 5 MB.

The checker also fetches the image itself. It confirms the URL loads as an image, then reports the real pixel dimensions and file weight, rather than assuming your tags are accurate.

Why scrapers do not run JavaScript

Here is the fact behind most broken previews. A browser downloads your HTML, runs your scripts, and shows you the finished page. A social scraper downloads your HTML and stops. It does not execute JavaScript, so any tag your scripts add after load does not exist as far as the scraper is concerned.

If your site is a single-page app that fills in og:image on the client, or a tool that injects tags after the page loads, then you can open developer tools, see perfect tags, and still get a blank card when you share the link.

This is why our free check reads the raw HTML. It sees what the scraper sees. It does not run JavaScript. If the tags appear in your browser inspector but not in the report, they are being added client-side, and the fix is to render them on the server or at build time so they are in the first response.

A rendered-page comparison, which loads the page in a real browser and shows the difference between raw and rendered tags, is available as a paid, opt-in feature. It is useful for finding exactly which tags your scripts are adding. The free check never does this, and the default stays raw HTML.

Checking your tags

  1. Paste your URL into the Open Graph checker. It is free and needs no signup. The free check allows 10 per day per IP address.
  2. Read the findings for the four Open Graph tags and the Twitter card, then the image dimensions and weight.
  3. Fix the tags in your page template, not in a script, so they are in the raw HTML.
  4. For the full set of head tags, including canonical, robots, and schema, run the meta tag checker.
  5. To see how your title and description will look in search results, try the SERP preview tool or the meta description checker, and read our guide on fitting titles and descriptions in search results.