Skip to content
SocialTools

Twitter Card Generator

Choose an X card type and get the five twitter: meta tags your page head needs, escaped and ready to paste.

X (Twitter) ToolsSEO
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="SocialTools Online" />
<meta name="twitter:description" content="Free social media tools for creators" />
<meta name="twitter:image" content="https://socialtools.online/og.png" />
<meta name="twitter:site" content="@socialtools" />

Runs in your browser. Nothing you enter is uploaded.

What it does

This generator writes the twitter: meta tags that tell X how to render a shared link. You choose the card type from a dropdown (summary, summary_large_image or player), fill in the title, description, image URL and twitter:site handle, and the tool outputs one self-closing tag per line.

It is aimed at developers and site owners adding X support to a template, especially when they want the compact summary card rather than the large image layout. The Open Graph Generator writes og: tags that Facebook, LinkedIn and most apps read. This one writes the twitter: namespace only and shows no visual, so pair it with the Twitter Card Previewer if you want to see a large image card.

How to use it

  1. 1

    Choose summary, summary_large_image or player in Card type.

  2. 2

    Type the Title and Description.

  3. 3

    Paste an absolute address into Image URL.

  4. 4

    Enter the account handle in twitter:site, including the @.

  5. 5

    Click the copy button next to Meta tags and paste the block inside the page head.

What you get

Five self-closing meta tags in a fixed order (twitter:card, twitter:title, twitter:description, twitter:image, twitter:site), with quotes, ampersands and less-than signs escaped.

When to use it

Blog archives with thumbnails
Select summary to get the compact card with a small square image beside the text, a common choice for docs and article archives.
Different copy on X
Write a shorter title or an X-specific description here when your og:title is too long for a card, since X prefers twitter: tags when both exist.
Site-wide twitter:site handle
Enter the brand account once and paste the block into a shared layout so every page credits it.
Starting a player card
Choosing player sets twitter:card to player, but the twitter:player, width and height tags a video card needs are not generated and must be added by hand.

Example

Input

Card type: summary
Title: Pricing FAQ
Description: Plans, limits & billing questions answered.
Image URL: https://docs.example.com/img/pricing-square.png
twitter:site: @exampleapp

Output

<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Pricing FAQ" />
<meta name="twitter:description" content="Plans, limits &amp; billing questions answered." />
<meta name="twitter:image" content="https://docs.example.com/img/pricing-square.png" />
<meta name="twitter:site" content="@exampleapp" />

The ampersand in the description is written as &amp; so the attribute value stays valid HTML.

Tips

  • All five tags are output even when a field is blank, so delete any line that ends up with content="" instead of shipping an empty twitter:image.
  • Match the image to the card: a square image for summary, a 2:1 image for summary_large_image.
  • twitter:site credits the publisher's account. There is no twitter:creator field, so add that tag by hand if you want author credit.
  • If your og: tags already hold the right title, description and image, you can keep just twitter:card and twitter:site and let X fall back to Open Graph.

Questions

Should a blog post use summary or summary_large_image?

summary_large_image puts a wide image above the text and suits articles with a strong visual. summary shows a small square thumbnail beside the text and suits docs, product pages or archives where the image is mostly a logo.

Does picking player give me a working video card?

Not on its own. The tool only sets twitter:card to player. X also needs twitter:player (an HTTPS embed URL) plus twitter:player:width and twitter:player:height, which you add yourself.

Do I still need twitter: tags if my page has Open Graph tags?

At minimum add twitter:card, because it is the only way to choose the card layout. Title, description and image can fall back to their og: equivalents.

When should I use the Twitter Card Previewer instead?

Use the previewer when you want to see a large image card before sharing, and this generator when you need the summary or player type or a fixed five-tag block for a template.

Related tools