Meta Tag Generator
Fill in your page details and get ready-to-paste <title>, meta description, Open Graph and Twitter Card tags — with a live search and social preview.
Titles over 60 characters may be cut off in Google search results.
Descriptions over 160 characters may be cut off in Google search results.
Use an absolute URL, e.g. https://tool-hub.me/your-page, so the canonical link and previews work correctly.
Add an OG image URL above so the large image card displays properly.
Google search preview
Social share preview
All fields are processed in your browser. Nothing you type is uploaded or stored on a server.
Why a handful of meta tags decide how your page is found and shared
A browser tab never shows your beautifully designed page when someone shares a link in Slack, pastes it into iMessage, or scrolls past it in a Google result — it shows whatever your meta tags say. Get the <title> and description right and a listing reads like a clear, clickable answer to someone's search. Get Open Graph and Twitter Card tags right and a shared link turns into a card with an image, headline and summary instead of a bare, unstyled URL. This tool builds all of it from one form: type once, and the <title>, meta description, canonical link, robots directive, Open Graph tags and Twitter Card tags are generated together, correctly escaped, and ready to paste into your page's <head>.
What each tag actually controls
- <title> — the blue, clickable headline in a Google result and the text shown in a browser tab. It is also the fallback title most platforms use if
og:titleis missing. - Meta description — the gray summary line under a search result. Google sometimes rewrites it from on-page content if it thinks a better snippet exists, but a well-written description still wins the click more often than not.
- Canonical URL (
<link rel="canonical">) — declares the one true address for a page when it's reachable through several URLs (with or without a trailing slash, with tracking parameters, onhttpvshttps). This prevents duplicate-content confusion from splitting your ranking signals. - Robots directive — tells crawlers whether to index a page and whether to follow its links.
noindexis the standard way to keep a thank-you page or internal search result out of Google entirely. - Open Graph tags (
og:title,og:description,og:url,og:image,og:site_name) — read by Facebook, LinkedIn, Slack, Discord and most link-preview bots to build the image-and-text card shown when a link is shared. - Twitter Card tags (
twitter:card,twitter:title,twitter:description,twitter:image) — read by X (Twitter) specifically. X checks these first and only falls back to your Open Graph tags if a twitter tag is absent.
Title and description length, without the guesswork
Google truncates by pixel width, not character count, so the exact cutoff shifts with the letters you use — a title full of narrow lowercase letters fits more characters than one in capitals. As a practical target, keep titles to roughly 50–60 characters and descriptions to roughly 150–160 characters; past that, an ellipsis becomes likely on a typical desktop result. The character meters under each field here turn amber near that limit and red once you're over it, so you can trim the sentence before it gets cut mid-word instead of finding out after the page is live.
Example — a product page. Title: "Wireless Noise-Cancelling Headphones — FreeAir Pro" (52 characters, safely under 60). Description: "The FreeAir Pro blocks up to 35dB of noise, lasts 30 hours per charge, and folds flat for travel. Free shipping, 2-year warranty." (132 characters, comfortably under 160, with room to add a call to action if needed).
Example — a blog post with a long working title. "Everything We Learned About Sourdough Starters After 200 Failed Loaves (A Complete Beginner's Guide)" runs 103 characters — more than 40 over the safe range. Trimmed to "Sourdough Starters: A Complete Beginner's Guide" (48 characters), it keeps the core promise and fits with room to spare.
Common mistakes this tool helps you avoid
- Forgetting
og:url: without it, some platforms resolve the share card against the URL the crawler happened to fetch, which can be wrong behind redirects or tracking parameters. This tool reuses your canonical URL forog:urlautomatically. - Only setting Open Graph tags: a card that looks perfect on Facebook can still show as a bare link on X if the
twitter:*tags are missing — the two systems don't share fields. - An
og:imagethat's the wrong shape: most platforms crop to roughly a 1.91:1 ratio (1200×630 is the common recommendation); a square or portrait image gets cropped awkwardly. The social preview here mimics that crop so you can catch it before publishing. - Unescaped quotes or ampersands: a title containing
&or"breaks the HTML if pasted in raw. This tool HTML-escapes every value automatically. - Setting
noindexby accident: a robots directive ofnoindexleft over from a staging environment is one of the most common reasons a real page silently disappears from search. Double-check this dropdown before you copy the code.
What this tool does not do
It generates tags from what you type — it does not crawl your live page, does not verify that the image URL you entered actually exists on your server long-term, and does not submit anything to Google or any indexing API. Paste the generated block into your page's <head>, then use each platform's own debugger (Facebook's Sharing Debugger, X's Card Validator) to confirm the live page renders the card as expected, since those tools also account for caching that this generator can't see.
Sources & further reading
Frequently asked questions
What meta tags does this generator create, and where does each one appear?
This tool builds four groups of tags from one form: the page <title> and meta description, which Google displays in search results; the canonical link and robots directive, which control indexing and duplicate-URL signals; Open Graph tags (og:title, og:description, og:url, og:image, og:site_name), which Facebook, LinkedIn, Slack and Discord read to build a share card; and Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image), which X (Twitter) reads first before falling back to your Open Graph tags. Fill in a title to see all four groups appear in the generated code, ready to paste into your page's <head>.
How long should my title and meta description be before they get cut off?
Google doesn't enforce a strict character limit — it truncates based on pixel width, which varies by character and device — but roughly 50 to 60 characters for a title and 150 to 160 characters for a description is a safe target that avoids an ellipsis on most desktop results. This tool's character meters turn amber as you approach those limits and red once you're over them, so you can trim before publishing rather than guessing how Google will cut your text.
What is a canonical URL and why does every page need one?
A canonical URL tells search engines which address is the "real" version of a page when the same content is reachable through more than one URL — with or without a trailing slash, with tracking parameters, through HTTP and HTTPS, or on both a mobile and desktop subdomain. Without it, search engines may split ranking signals across duplicates or index the wrong version. Enter your page's preferred, absolute URL and this tool generates the <link rel="canonical"> tag and reuses the same URL for og:url.
Why do I need both Open Graph and Twitter Card tags — isn't one enough?
X (Twitter) reads its own twitter:* tags first and only falls back to Open Graph tags if a twitter tag is missing, so relying on og:* alone can give you a broken or generic-looking card on X specifically. Every other major platform — Facebook, LinkedIn, Slack, Discord, iMessage — reads Open Graph tags and ignores twitter:* entirely. Generating both from the same title, description and image, as this tool does, is the only way to guarantee a consistent share card everywhere.
Does this tool upload my title, description or image anywhere?
No. Every tag is built with JavaScript running in your own browser, and nothing you type is sent to a server or saved anywhere outside your device's local storage, which only remembers your last inputs so you don't lose them on refresh. The one exception is the image URL: if you paste one into the OG image field, your browser requests that image directly from the address you provided so it can show a preview — that request goes straight to the image's own host, not through this site.