Twitter Card Generator

Generate X (Twitter) card meta tags with a title, description, image, and card type, with HTML-safe escaping.

Independently verified for accuracy

Calculator by Toolsloft ↗
Meta tags
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Post">
<meta name="twitter:description" content="A great and bold post">
<meta name="twitter:image" content="https://example.com/image.png">

Generate the Twitter, now X, card meta tags for a page so links show a rich preview with a title, description, and image. Fill in the fields, pick the card type, and paste the tags into the head of your page. Special characters in your text are escaped so the HTML stays valid.

How this is calculated

The tool outputs the twitter:card and twitter:title meta tags every time, and adds twitter:description and twitter:image only when you provide them. Ampersands, quotes, and angle brackets in the values are escaped to keep the tag attributes valid.

How to use

  1. Enter the card title and description.
  2. Add an image URL for a large image card.
  3. Choose the card type: summary or summary with large image.
  4. Copy the meta tags into the head of your page.

Examples

  • Large image: 4 tags including twitter:image
  • Title only: card + title tags

FAQ

Where do these tags go?
Inside the head element of your page HTML, alongside your other meta tags. X reads them when someone shares the link to build the preview card.
What is the difference between the card types?
Summary shows a small square thumbnail, while summary with large image shows a wide banner image. Use the large image type when you have a high-quality wide image.

Embed this calculator

Add this free calculator to your own site. Copy the code and paste it where you want it to appear.