SEO · 4 min read

Open Graph & Twitter Cards Explained

How Open Graph and Twitter Card tags control the preview when your links are shared, the image sizes to use, and why your preview may be blank.

By the ToolsHub team · Updated May 1, 2026

When you paste a link into Facebook, LinkedIn, WhatsApp, Slack or X, the rich card that appears — title, description and image — is controlled by special meta tags. Get them right and your links look professional and earn more clicks. Build them with our Open Graph Generator and Twitter Card Generator.

Open Graph — most platforms

The Open Graph protocol (originally from Facebook) is read by nearly every platform: LinkedIn, WhatsApp, Slack, Discord and more. The key tags are og:title, og:description, og:image and og:url. Use a 1200×630 pixel image for a crisp preview.

Twitter Cards — X

X reads its own twitter: tags, falling back to Open Graph for anything missing. The twitter:card tag chooses the style: summary_large_image for a big edge-to-edge image, or summary for a compact thumbnail.

Why your preview might be blank

  • The image URL is relative — it must be an absolute https:// URL.
  • The image is too small, or the tags are missing entirely.
  • The platform cached an old version — re-scrape it in the platform's sharing debugger.

Making your link previews look right

A good social preview needs only a handful of tags done well:

  • og:title and og:description — concise, specific to the page.
  • og:image — ideally 1200×630 pixels so the large card renders sharply.
  • og:url and og:type — the canonical link and content type.
  • twitter:card — set to summary_large_image for a big image on X.

Build and preview all of these with our Open Graph Generator and Twitter Card Generator. If a preview looks stale after a change, re-scrape the URL with the platform's own debugger.

Frequently asked questions

What are Open Graph tags?
Open Graph tags are meta tags that control how your page looks when shared on platforms like Facebook and LinkedIn — the title, description and preview image in the link card.
What's the difference between Open Graph and Twitter Cards?
Open Graph is used by most platforms; Twitter Cards are X's own twitter:* tags. X falls back to Open Graph, but Twitter Card tags let you set the card type and image precisely.
What image size should I use for social previews?
A 1200x630 pixel image works well for large link cards across platforms. Set it with the og:image tag; our Open Graph Generator helps you build the tags.
Why isn't my link preview showing?
Usually missing or wrong Open Graph tags, an unreachable image, or cached old data. Check the tags are present and re-scrape with the platform's debugging tool.

Try the tool