In one sentence
This generator turns a title, description, image URL and card type into the twitter: and Open Graph meta tags X reads, warns you about lengths and image problems, and shows a mockup of the resulting card.
How do I use the generator?
Fill in the form from top to bottom, then copy the block under "Your tags" into your page's <head>.
- Pick a card type. Large image is selected by default because it is what most pages should use.
- Write a title of 70 characters or fewer and a description of up to 200. The counters turn red past X's documented limits.
- Paste the absolute URL of your image. If the image is not online yet, load it from your computer with the local image field to check how it crops.
- Add alt text for the image. It goes into both
twitter:image:altandog:image:alt. - Add your site's X handle (
twitter:site) and, if you like, the author's (twitter:creator). The tool accepts@name,nameor a full x.com profile URL. - Copy the tags, deploy, and test the live URL in the X composer.
The checkbox at the bottom controls whether the twitter: text tags are written out in full. Leave it on if you want the markup to be explicit; turn it off for a shorter head that relies on X's documented fallback to Open Graph.
What do the warnings mean?
Red items stop the card from working; amber items make it worse; blue items are notes.
| Message | Why it matters |
|---|---|
| Image URL must be absolute | Crawlers do not resolve relative paths the way browsers do. /img/card.png will not work. |
| SVG is not supported | X accepts JPG, PNG, WEBP and GIF. An SVG card image is ignored. |
| Title over 70 characters | X documents 70 as the maximum. Longer titles get cut. |
| Description over 200 characters | Same idea, with a 200-character limit. |
| No alt text | Screen reader users hear nothing useful about the image. |
| summary_large_image needs an image | Without one, X typically shows the bare link instead of a card. |
What does the generated markup look like?
A typical large image card comes out as about a dozen lines:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@yoursite">
<meta name="twitter:title" content="How we cut our build time in half">
<meta name="twitter:description" content="The three changes that mattered, with numbers.">
<meta name="twitter:image" content="https://example.com/og/build-time.png">
<meta name="twitter:image:alt" content="Bar chart of build times before and after">
<meta property="og:type" content="website">
<meta property="og:title" content="How we cut our build time in half">
<meta property="og:description" content="The three changes that mattered, with numbers.">
<meta property="og:url" content="https://example.com/blog/build-time/">
<meta property="og:image" content="https://example.com/og/build-time.png">
<meta property="og:image:alt" content="Bar chart of build times before and after">
twitter: tags use the name attribute and og: tags use property, which is how both specifications write them. The tool escapes quotes and ampersands so a title like Tom & Jerry "remastered" does not break the HTML.
Player and app cards
Choosing Player adds fields for twitter:player (an HTTPS page that X loads in an iframe), its width and height, and an optional direct stream URL. X's player card page says the player must work on all its clients, must not autoplay content longer than ten seconds with sound, and must use HTTPS for every asset.
Choosing App adds the store fields. The App Store ID is the number in the store URL, not your bundle ID; for Google Play it is the package name. App URL fields take your custom scheme, such as myapp://item/42.
Both types are still listed in X's markup reference as of November 2026, but they are rare in the wild and client support varies, so test them in the composer before relying on them.
Once your tags are live, the Card Preview & Meta Inspector can double-check the page's head, and the image checker can crop your picture to an exact 2:1.
Questions
Do I need both twitter: and og: tags?
You need twitter:card. For the title, description and image, X falls back to og:title, og:description and og:image when the twitter: versions are missing, so the og: set alone is enough for X. Keep og: tags either way, because LinkedIn, Facebook, Slack, Discord and iMessage read them.
Which card type should I pick?
summary_large_image for almost every article, landing page and tool page. Use summary when you only have a square logo or avatar, player for video or audio you host and can play in an HTTPS iframe, and app to link to a store listing.
Why does the preview show my local image but X does not?
The local image option exists only to check framing. X needs a public, absolute https:// image URL in twitter:image or og:image that Twitterbot can download.
Is the preview exactly what X will show?
It is a careful approximation. X changes its card layout from time to time and the apps differ slightly. The definitive check is pasting the URL into the X post composer after your page is live.