Twitter / X Card & OG Generator

Generate both Twitter/X Card and Open Graph meta tags together — because X falls back to OG when twitter: tags are missing. Choose a card type, fill in the fields, and watch the live preview update in real time showing exactly how your link will unfurl. Output the full meta-tag block ready to paste into your page's <head>.

How to use the Twitter / X Card & OG Generator

Select the card type: use summary_large_image for most pages (image banner across the top, truncates title at ~70 chars); use summary for small-thumbnail cards (square image to the left, better for news or blog feeds). Fill in title, description, image URL, and canonical URL. The @site handle is your brand's Twitter/X account; @creator is the individual author. The live preview updates instantly to show how the card renders. Click Generate to produce the full tag block — it includes both twitter: tags and the equivalent og: tags. X reads twitter:card first and falls back to Open Graph, so including both ensures coverage across every platform (Facebook, LinkedIn, Slack, Discord all use OG). Paste the output into your page <head>. Validate using X's Card Validator or OpenGraph.xyz.

How Twitter/X Cards and Open Graph work together

When someone shares a URL on Twitter/X, the platform fetches the page and reads its meta tags to build the link preview — the "card". Twitter/X checks for twitter:card first. If absent, it falls back to Open Graph (og:title, og:image, etc.). That fallback means well-written OG tags work on X without any twitter-specific tags, but the twitter:card tag is still required to unlock summary_large_image rendering — without it you get a plain link with no image.

The four card types serve different content: summary works best for articles and profiles (compact, thumbnail left of text); summary_large_image dominates the timeline visually (image fills the width, best for high-impact content); app links to an iOS/Android app in the App Store; player embeds inline video or audio. For most content publishers, summary_large_image is the right choice because it increases engagement and click-through significantly over a plain link.

Image requirements: minimum 144×144 px for summary, 300×157 px for summary_large_image; recommended 1200×630 px for both to look sharp on high-density displays. Twitter truncates title at roughly 70 characters and description at roughly 200. The og:type should be "website" for most pages (use "article" for blog posts).

Common use cases

  • Blog and content marketing — summary_large_image turns a shared link into a visually dominant card — research consistently shows 2-3x higher click-through vs plain URLs.
  • Product launches — Use a compelling hero image and a punchy title to make your launch tweet impossible to scroll past.
  • Open-source project announcements — GitHub repo pages benefit from a custom social image rather than the default repo card — set a custom og:image in the repo settings and validate it here.
  • Cross-platform sharing — Because the generator outputs both twitter: and og: tags simultaneously, the same block works on Facebook, LinkedIn, Discord, Slack, and iMessage link previews.
  • Fixing broken previews — Use the live preview and compare it with what you expect — then identify the exact tag that is missing or malformed in your current implementation.

Frequently asked questions

Why do I need both twitter: and og: tags?
Different platforms read different namespaces. Facebook, LinkedIn, Slack, and Discord use Open Graph. Twitter/X prefers twitter: tags but falls back to og:. By including both, a single set of tags works everywhere.

My card still shows the old image after I updated it — why?
X and other platforms cache card data aggressively. Use the X Card Validator to force a cache bust — entering your URL there triggers a fresh crawl. For Facebook, use the Facebook Sharing Debugger ("Scrape Again" button).

What is the ideal image size?
1200×630 px at 72 dpi, under 5 MB, PNG or JPEG. X enforces a 3:1 width-to-height limit — images taller than they are wide may be cropped or rejected. For summary cards, a 1:1 square image (at least 400×400) looks cleaner.

Does the @creator handle have to be verified?
No — any valid @handle works. But X may not surface the creator credit prominently for unverified accounts. Including it is still good practice as it provides attribution metadata.

Can I use the player card for embedded YouTube videos?
Only if you are the content owner or have explicit permission. The player card requires X to whitelist your domain — submit a request via X's developer portal. Most publishers stick with summary_large_image linking to the video page.