Meta Tag Generator
Fill in your page details to generate title, Open Graph, and Twitter Card meta tags — with a live Google, Facebook, and Twitter preview.
Why Open Graph and Twitter Card tags matter
A page's <title> and meta description control how it shows up in a Google search result, but they have zero effect on how the same link looks when it's pasted into Facebook Messenger, Slack, iMessage, or posted on X. Those platforms scrape a separate set of tags — Open Graph (og:*) for Meta-owned apps and most link-preview bots, and Twitter Card (twitter:*) for X — to build the image, headline, and blurb shown in the preview card. Fill in the fields above and this generator writes both blocks alongside your standard title and description tags, so you can copy one snippet into your page's <head> and get a consistent preview everywhere the link is shared.
Worked examples
Sharing a how-to article on X
A blogger wants their new tutorial to show a full-width photo and a clean headline when readers repost the link on X, instead of X guessing at an image from the page body.
- Title
- 10 Minimal Desk Setups for Small Home Offices
- Image
- 1200 × 630 px desk photo
- Handle
- @exampleblog
Card shows the desk photo, bold title, and @exampleblog credit instead of a blank card.
Sharing a product link in a Facebook group
A small shop wants a product link pasted into a Facebook group to show the product photo and a price-inclusive title — not the site's generic logo or a random paragraph.
- Title
- Ceramic Pour-Over Set — $38
- Site name
- Example Goods Co.
- Image
- Product photo URL
Card shows the product photo, priced title, and "EXAMPLEGOODS.COM" byline instead of a bare link.
Which tags each platform actually reads
Search engines, chat apps, and social platforms each read a different subset of the tags in your page's <head>, so one set of fields has to feed three separate outputs. This tool writes all three blocks from the same six inputs, keeping the title, description, and image consistent everywhere the link ends up.
| Tag group | Read by | Controls |
|---|---|---|
| <title> + meta description | Google, Bing, browser tabs | Search result snippet and tab title |
| og:title, og:description, og:image, og:url, og:site_name, og:type | Facebook, LinkedIn, Slack, iMessage, Discord | Link preview card on Meta-owned and most chat apps |
| twitter:card, twitter:title, twitter:description, twitter:image, twitter:site | X (Twitter) | Card shown when the link is posted or DM'd on X |
X's card renderer checks the twitter:* tags first and falls back to the matching og:* tag for anything left out, so an Open Graph block alone still produces a usable X card — the twitter:* tags just let you override the image, title, or description specifically for X.
Frequently asked questions
Why do I need Open Graph tags if the page already has a title and meta description?
The <title> and description meta tag are what Google and other search engines read to build a search result snippet — they never control how a link looks when it's pasted into Facebook, LinkedIn, Slack, or iMessage. Those apps scrape the Open Graph (og:*) tags instead, and if none exist they fall back to guessing from the page's raw content, which usually grabs the wrong image or a truncated block of body text. Adding the Open Graph block is the only way to control that preview on purpose.
What size should my og:image be?
1200 by 630 pixels is the safe default that renders sharp on every major platform's large-image card, including Facebook, LinkedIn, and X's summary_large_image layout. Most platforms require at least 600 by 315 pixels and will refuse to show a large card below that, silently falling back to a small thumbnail or no image at all — undersized images are the most common reason a shared link looks broken.
Why does my title or description show a warning color while I'm typing?
Google generally shows around 60 characters of a page title and roughly 155 characters of the description before truncating the rest with an ellipsis — the exact cutoff shifts with pixel width and device, so treat those numbers as a guideline rather than a hard rule. The counters under each field switch to a warning color once you cross that guideline so you can trim the copy before it gets cut off in a real search result.
I don't have a Twitter/X handle — can I skip that field?
Yes. The twitter:site tag only credits an account when the link is shared on X; it isn't required for the card itself to render. Leave it blank and the generator still outputs a full Twitter Card block from twitter:card, title, description, and image, which is all X needs to build the preview.
Why doesn't my updated preview show up on Facebook or X after I paste the new code?
Both platforms cache the scraped tags the first time a URL is shared and reuse that snapshot for future shares, sometimes for days. After changing your meta tags, run the URL through Facebook's Sharing Debugger or X's Card Validator and use their "scrape again" action to force a fresh read — reposting the same link usually just shows the stale cached card.
Does this tool upload my title, description, or image anywhere?
No. Every field you type stays in your browser's memory and is only used to render the live preview and build the code block on this page — nothing is sent to a server, logged, or stored once you close the tab.