Meta Tag Generator
Generate SEO, Open Graph and Twitter Card meta tags.
example.com
Your page title appears here
Your meta description appears here once you start typing.
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="index, follow" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />What are meta tags, and why do they matter?
Meta tags are snippets of HTML in a page's <head> that never appear on the page itself but tell search engines and social platforms how to treat it. The title and meta description become your listing in Google search results. The canonical link tells search engines which URL is the "real" one when the same content is reachable at more than one address. The Open Graph and Twitter Card tags control the title, image and description shown when the page is shared on Facebook, LinkedIn, Slack, Discord or X.
Getting these right doesn't guarantee rankings, but getting them wrong can cost you clicks: a truncated title, a missing preview image, or a page that quietly gets marked noindex all reduce how many people ever see your content.
How to use this generator
- 1Enter your page title and description — the counters turn red once you're past Google's typical display length.
- 2Add the canonical URL, site name and a social share image (og:image).
- 3Choose a Twitter Card type and set indexing/follow behaviour.
- 4Check the Google result preview, then copy the generated HTML into your page's <head>.
Best practices for titles, descriptions and previews
Keep titles under about 60 characters and descriptions under about 160 — Google truncates longer ones with an ellipsis in the search results, and the words that get cut off are wasted. Make every title and description unique per page; duplicating them across a site is one of the most common technical SEO mistakes. Use an og:image of at least 1200×630 pixels so it renders crisply on link previews, and always set a canonical URL if the same content is ever reachable through more than one path (with or without a trailing slash, with tracking parameters, and so on).
Frequently asked questions
›Where do these meta tags go in my HTML?
Paste the generated block inside the <head>...</head> section of your page, ideally near the top, before large scripts or stylesheets. If you're using a framework like Next.js, most of these fields map directly to that framework's metadata API instead of raw HTML.
›Does a longer title or description hurt my Google ranking?
Not directly — length isn't a ranking factor. But Google truncates the display with an ellipsis once it estimates the pixel width is exceeded, roughly 55-60 characters for titles and 150-160 for descriptions, so anything past that point is invisible to searchers.
›What's the difference between noindex and disallowing a page in robots.txt?
noindex (set via the robots meta tag) tells a search engine that has already crawled the page not to include it in search results. Disallowing the URL in robots.txt instead stops crawlers from fetching it at all — which means they can't see a noindex tag on it. Use noindex, not robots.txt, to keep a page out of search results.
›Why do I need both Open Graph and Twitter Card tags?
Open Graph (og:*) is the standard most platforms use, including Facebook, LinkedIn, Slack and Discord. X (formerly Twitter) reads its own twitter:* tags first and only falls back to Open Graph if they're missing, so setting both guarantees a consistent preview everywhere.
›Is my data uploaded anywhere when I use this tool?
No. Every field you type and the HTML that's generated stay in your browser — nothing is sent to a server. You can even use this tool offline once the page has loaded.