Open Graph and Twitter Cards: make your links look good when shared

WebAudit 360 TeamWebAudit 360 TeamAugust 30, 20264 min read
Open Graph and Twitter Cards: make your links look good when shared

Paste a link into LinkedIn, Slack, iMessage, or X and you usually get a little preview card: an image, a headline, a line of description. That card isn't automatic magic; it's built from a handful of meta tags in your page. Set them well and your links look like something worth clicking. Leave them out and you get a bare URL or a sad gray box pulling whatever text it can find.

For something that shapes every share of your content, it's a small amount of code.

The two systems (that mostly overlap)

There are two vocabularies, and you want both:

  • Open Graph (og:), created by Facebook, now read by almost every platform (LinkedIn, Slack, Discord, iMessage, WhatsApp, and more).
  • Twitter Cards (twitter:), X's tags, which fall back to Open Graph for anything they don't specify.

The good news is they overlap heavily, so a complete setup is maybe seven tags, not fourteen.

The tags that matter

<!-- Open Graph -->
<meta property="og:title" content="Product analytics for SaaS teams" />
<meta property="og:description" content="See which features drive retention, no cookies." />
<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" />

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Product analytics for SaaS teams" />
<meta name="twitter:description" content="See which features drive retention, no cookies." />
<meta name="twitter:image" content="https://example.com/og/pricing.png" />

Our check looks at the completeness of this set, particularly that you have a title, description, and image, the three that actually render in a card. Miss the image and your beautiful share collapses to a text-only line that gets a fraction of the clicks.

The image is the part people skip

The og:image is what makes a card stop the scroll, and it's the tag most often missing or broken. A few practical notes:

  • Size: aim for 1200×630 pixels. It's the ratio every platform crops to cleanly.
  • Absolute URL: use the full https://… path, not a relative one. Crawlers fetch it from outside your site.
  • Keep it readable small: these render tiny on mobile. Big text and a clear focal point beat a busy screenshot.
  • One per important page ideally, so a shared article shows its image, not a generic sitewide one. A sitewide default is a fine baseline if per-page is too much work.

How this connects to the rest

These tags reuse the thinking from your title tag and meta description, often the same words, tuned for a social context. They're separate from search ranking (sharing previews aren't a ranking factor), but they drive real referral traffic and shape how your brand looks every time someone passes a link along. They also overlap with structured data: both describe your page to machines, just for different surfaces.

How to test it

Don't guess. Use the platforms' own preview tools. Share a link into Slack or iMessage and see what renders. For X, the Card Validator; for general OG, sites like opengraph.xyz will show you the card. A common gotcha: platforms cache previews, so if you fix a tag and the old card still shows, you may need to re-scrape it with the platform's debugger.

Common mistakes

  • No og:image, so shares render as plain text.
  • Relative image URLs that crawlers can't resolve.
  • Wrong image dimensions that crop awkwardly.
  • A single generic card sitewide, so every shared article looks identical.
  • Forgetting twitter:card, which controls whether X shows a large image or a tiny thumbnail.

FAQ

Do Open Graph tags affect SEO rankings?

Not directly. They control how your links look when shared, which drives clicks and referral traffic: valuable, but separate from ranking.

Do I need both Open Graph and Twitter tags?

Add the core Open Graph tags plus twitter:card. X falls back to Open Graph for title, description, and image, so you don't need to duplicate everything.

What image size should I use?

1200×630 pixels is the safe standard. Use an absolute URL and keep any text large enough to read at thumbnail size.

Why does my updated preview still show the old card?

Platforms cache previews. Use the platform's debugger (e.g. the X Card Validator or Facebook's Sharing Debugger) to force a re-scrape.

Key Takeaways

  • Open Graph (og:) tags are read by almost every platform, including LinkedIn, Slack, Discord, iMessage, and WhatsApp, while Twitter Card (twitter:) tags fall back to Open Graph for anything they don't specify.
  • A complete share setup is about seven tags, and the three that actually render in a card are the title, description, and image.
  • Use an og:image sized 1200x630 pixels with an absolute https:// URL; a missing or broken image collapses the card to a text-only line that gets far fewer clicks.
  • Open Graph tags are not a search ranking factor, but they drive referral traffic and control how your brand looks every time someone shares a link.
  • Platforms cache share previews, so after editing a tag you may need to force a re-scrape with the X Card Validator or Facebook's Sharing Debugger.

Want to see which pages are missing their share title, description, or image? Run a free audit. We check social tag completeness. More in the SEO explainers.

← Back to the blog