BucketWP
Browse Tools
Menu

Twitter (X) Card Generator

Generate Twitter Card tags for a summary, large image, player or app card, with the Open Graph fallbacks X reads when a tag is missing.

Live output

Enable JavaScript to customise; default output below.

Card type

summary_large_image needs an image of at least 300 by 157, or it quietly falls back to the small card.

Truncated at around 70 characters.

Truncated at 200 characters, and often shown much shorter.

Live preview twitter-card.html 
<!-- Twitter (X) Card. Put these inside <head>. -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="How to migrate a WordPress site without downtime">
<meta name="twitter:description" content="A step by step checklist, from the staging copy to the DNS cutover.">
<meta name="twitter:image" content="https://example.com/img/migration.png">
<meta name="twitter:image:alt" content="A migration checklist on a laptop screen">

<!-- Open Graph. X falls back to these, and every other network reads only these. -->
<meta property="og:title" content="How to migrate a WordPress site without downtime">
<meta property="og:description" content="A step by step checklist, from the staging copy to the DNS cutover.">
<meta property="og:image" content="https://example.com/img/migration.png">

Output is valid and updates as you type.

Generate the Twitter Card tags for a link, including the Open Graph fallbacks that X reads when a twitter: tag is missing and that every other network reads instead.

How to use

  1. Pick the card type. summary_large_image is the one people mean; summary is the small square thumbnail.
  2. Check the image size. A large image card needs at least 300 by 157, and 1200 by 630 is the size that renders everywhere without cropping badly.
  3. Fill in the alt text. X reads it to screen readers, and it takes up to 420 characters.
  4. Keep the Open Graph fallbacks. LinkedIn, Slack, Discord and WhatsApp read only those, so a page with Twitter tags alone previews as a bare link everywhere else.
  5. Validate by posting the link in a draft post, or with a card validator. The preview is cached after the first fetch.

Example

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="How to migrate a WordPress site without downtime">
<meta name="twitter:image" content="https://example.com/img/migration.png">
<meta name="twitter:image:alt" content="A migration checklist on a laptop screen">

<meta property="og:title" content="How to migrate a WordPress site without downtime">

The duplication is deliberate. X prefers the twitter: tags and falls back to Open Graph; nothing else reads twitter: at all.

Pitfalls

  • summary_large_image with an image under 300 by 157 silently renders as a small card. There is no error anywhere.
  • The image must be reachable without a login. A staging site behind basic auth previews as nothing.
  • Previews are cached hard. Fixing the tags does not fix an already-cached preview without a re-fetch.
  • Player cards require HTTPS, an iframe that runs no scripts beyond the player, and approval for some accounts. They are much fussier than they look.
  • twitter:site and twitter:creator are handles, not URLs. A profile URL there is ignored.
  • Relative image URLs resolve to nothing for a crawler. Always absolute.
  • Tags added by JavaScript are not seen. The crawler reads the HTML as served.
  • Duplicate tags, usually one set from the theme and one from an SEO plugin, give unpredictable results.

Compatibility

Twitter Cards are read by X, and the twitter: prefix is still honoured after the rename. Open Graph is read by X as a fallback and by LinkedIn, Slack, Discord, WhatsApp and most chat clients. twitter:image:alt is supported for accessibility. App cards work on the X mobile apps and degrade to a summary card on desktop. The tool runs entirely in your browser.

Frequently asked questions

Do I need both Twitter and Open Graph tags?
You need Open Graph. The twitter: tags only add the card type and the handles; everything else falls back.
Why is my card small?
The image is under the minimum for a large card, or the card type is summary.
Why has my preview not updated?
It is cached. Post the link in a draft or use a card validator to force a fresh fetch.
Are player cards worth it?
Only for a real video product. They need HTTPS, a script-free iframe and, for some accounts, manual approval.
Does the handle need the @?
Both forms are accepted, and including it is the documented shape.

Related tools

Tools that pair with this one, then more from the same toolbox.

Explore all tools

Tools

Open Graph Meta Tag Generator

Generate the Open Graph and Twitter Card tags that decide how a link looks when it is shared, including the image size that actually renders.

SEO

Meta Tag Generator

Generate the head tags a page needs: title, description, canonical, robots directives, viewport and language, with the lengths search engines actually use.

SEO

SERP Snippet Preview

See how a title and meta description are likely to appear in Google on desktop and mobile, measured in pixels rather than characters.

SEO

URL Slug Generator

Turn titles into URL slugs the way WordPress does: accents mapped to their base letter, symbols spelled out, and an optional stop word strip.

SEO

Weekly drops

New tools, when there are new tools

One email when something worth using ships. No schedule to fill, so no filler.

Your address goes nowhere else, and one click unsubscribes.