Rankite
ServicesResultsToolsTeamAboutBlogCareersContactFree SEO Audit
Free tool

Twitter Card Generator: X Card and Open Graph Tags

Fill in your title, description and image, then copy ready-to-paste X (Twitter) Card and Open Graph meta tags, instantly and free.

Home / Tools / Twitter Card Generator
Your meta tags

Live preview

Roughly how your card appears when the link is shared. Real platforms re-crop and re-cache, so treat this as a guide.

Built by Rankite, the SEO team behind Swordfish AI's +400% revenue and Zluri's +45% organic growth. See the case studies

An X (Twitter) Card turns a plain link into a rich preview with a title, description and image when your page is shared. Those previews come from a handful of meta tags in your page head. This generator writes both the twitter: tags and the matching Open Graph tags, so a single paste makes your link look right on X and every other platform that reads social metadata.

What is a Twitter Card?

A Twitter Card, now branded an X Card, is the preview block that X builds when it sees your URL. X reads tags such as <meta name="twitter:card">, <meta name="twitter:title">, <meta name="twitter:description"> and <meta name="twitter:image"> from the <head> of your page, then renders a card in the timeline. The twitter:site tag attributes the card to your @handle. Open Graph tags like <meta property="og:title"> and <meta property="og:image"> do the same job for Facebook, LinkedIn, Slack and Discord, and X uses them as a fallback when a twitter: tag is absent. That is why a complete setup ships both sets together, which is exactly what the tool above produces.

Summary vs summary_large_image

The twitter:card value decides the layout. summary_large_image renders a full-width banner above the title and description and is the right pick for articles, product pages and landing pages, because the larger image earns more clicks in a busy feed. It expects a 2:1 image, at least 300x157 pixels, with 1200x628 recommended. summary shows a small square thumbnail to the left of the text and suits posts where you only have a logo or icon. It expects a square image, at least 144x144 pixels, with 240x240 or larger recommended. Keep images under 5 MB, host them on an absolute HTTPS URL, and avoid tiny text inside the image since it gets downscaled on mobile.

How to add and test Twitter Cards

Copy the generated block and paste it inside the <head> of your page, ideally near your title tag, then deploy so the tags are live. Each card needs an absolute, public, HTTPS image URL: relative paths and pages blocked in robots.txt will not render. After deploying, run the page through the official X Card validator and a general Open Graph debugger such as the one from Facebook or a free OG preview tool. These crawlers fetch your live page and show the exact card, and they reveal missing tags or images that fail to load. If you update an image, the platforms cache the old one, so re-run the validator to force a fresh fetch. Once the preview looks correct there, it will look the same to everyone who shares the link.

Related articles

FAQ

Twitter Card Generator: questions, answered

What is a Twitter Card?
A Twitter Card (now an X Card) is a rich preview that appears when someone shares your link on X. Instead of a bare URL, your post shows a title, description and image pulled from twitter:card meta tags in the page head. It is the same idea as Open Graph, and the two work best together.
What is the difference between summary and summary_large_image?
summary shows a small square thumbnail beside the title and description. summary_large_image shows a full-width banner image above the text, which earns more attention in the timeline. Use summary_large_image for articles and landing pages, and summary when you only have a logo or square image.
What image size should a Twitter Card use?
For summary_large_image, use a 2:1 image at least 300x157 pixels, with 1200x628 recommended. For summary, use a square image at least 144x144 pixels, with 240x240 or larger recommended. Keep each image under 5 MB and host it on an absolute HTTPS URL.
Do I still need Open Graph tags if I have Twitter Card tags?
Yes. X falls back to Open Graph tags when a twitter: tag is missing, and Facebook, LinkedIn, Slack and most other platforms read only Open Graph. This generator outputs both, so one paste covers X and every other network at the same time.
How do I test my Twitter Card before sharing?
Paste the tags into your page head, deploy, then run the URL through the X Card validator and a general Open Graph debugger. They fetch your live page and show the exact preview. If an image will not appear, confirm the URL is absolute, public and HTTPS, and that you are not blocking the crawler in robots.txt.

More free tools

Let's grow

Ready to own page one?

Get a free, no-obligation SEO audit and a 30-minute strategy session. We'll show you exactly where the growth is hiding.

Book your free audit Explore services
Get in touch

Tell us about your project

Fill out the form and we'll get back to you within one business day. Prefer email? Write to us directly at contact@rankite.com.

Or copy our email and write to us directly: contact@rankite.com