Tooltrusty

Open Graph & Twitter Card Preview

The card that appears when someone shares your link is controlled by six tags. Here they are, with a preview.

Preview

Large image card (X, LinkedIn, Slack)

Small card (summary)

Tags to paste into your <head>

Runs in your browser. Everything you type or load here is processed locally by JavaScript on this page. Nothing is uploaded to Tooltrusty or to any third party.

What the open Graph & Twitter Card Preview does

When someone pastes your link into Slack, LinkedIn, X, WhatsApp or Facebook, the platform fetches your page and looks for Open Graph tags to build a preview card. If it finds none, it improvises from whatever it can scrape — usually the title tag and the first stretch of text, with no image — and the result is a bare blue link that gets a fraction of the clicks.

Six tags do almost all the work. og:title and og:description are the card's headline and subtitle, and they do not have to match your SEO title and meta description — a share card is read by a person scrolling a feed, not matched against a query, so it can be punchier. og:image is the single biggest factor in whether anyone stops. og:url should be the canonical address, so shares of tracking-parameter variants consolidate. og:type and og:site_name add context.

Twitter Cards are a parallel set of tags with an name="twitter:" prefix. X falls back to Open Graph when they are missing, so strictly you only need twitter:card to choose the layout — but including the full set lets you write different copy for that audience. This generator outputs both.

The image is where most cards fail. Use 1200 × 630 pixels, an absolute URL (a relative path will not resolve for a scraper), under about 5 MB, and keep text away from the edges since several platforms crop to different ratios. Declaring the width and height helps platforms lay the card out before the image finishes downloading.

How to use it

  1. Fill in the title, description, URL and image for the page you are sharing.
  2. Check both previews — some platforms use the large card, others the small one, and your copy has to survive both.
  3. Copy the generated tags into the <head> of your page.
  4. After publishing, re-scrape the URL in each platform's debugger so their cached copy updates.

A worked example

A complete, correct set of tags for an article:

<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/guides/running-shoes-flat-feet">
<meta property="og:title" content="Best Running Shoes for Flat Feet in 2026">
<meta property="og:description" content="We tested 24 stability shoes over 600 miles. Five held up.">
<meta property="og:image" content="https://example.com/img/shoes-card.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">

Note that og:title here drops the | Stride Lab suffix that the SEO title carries. In a search result the brand adds trust; in a social feed the site name is already displayed above the headline, so repeating it just spends characters twice.

Frequently asked questions

What size should my og:image be?

1200 × 630 pixels, a 1.91:1 ratio, is the safe standard for large cards. Keep important content away from the edges, because some platforms crop to square or to a different ratio. Always use an absolute URL — a relative path will not resolve for an external scraper.

I updated my tags but the old card still shows. Why?

Platforms cache aggressively, sometimes for weeks. Use each platform's own debugger to force a re-scrape: Facebook's Sharing Debugger, LinkedIn's Post Inspector, and X's card validator. Until you do, everyone sharing the link sees the stale version.

Do I need both Open Graph and Twitter Card tags?

Not strictly. X falls back to Open Graph when Twitter tags are absent, so only twitter:card is really required to pick the layout. Including the full set is worth it when you want different wording for that audience.

Do Open Graph tags affect search rankings?

Not directly — they are not a ranking signal. They affect how many people click a shared link, which affects traffic and the chance of someone linking to you. The effect on SEO is real but indirect.