Meta Tag Generator
Title, description, Open Graph and JSON-LD with a live preview. Runs in your browser.
About this meta tag generator
This meta tag generator writes the HTML for your page's <head>: title, meta description, canonical, robots, Open Graph, X card and basic JSON-LD. It shows a live Google preview and measures your title and description in pixels, so you can see where Google will cut them.
You fill in a short form and the code updates as you type. The meters turn red when a title passes about 600 pixels or a description passes about 920 pixels at Google's font sizes. A title in capital W's runs out of room long before one full of i's and l's, so pixels matter more than characters.
It's for anyone launching or fixing a page: shop owners, bloggers, web designers and developers who want a clean block to paste. Nothing you type leaves your browser, so you can draft titles for pages that aren't live yet.
Features
Pixel-width meters
Titles are measured at 20px Arial and descriptions at 14px Arial with your browser's text engine, the same fonts Google uses in results. You see the width, the limit and the character count.
Live Google preview
A desktop and mobile result shows your site name, breadcrumb URL, title and snippet. Text that passes the limit is cut at a word boundary with " ...", just like a real result.
Robots options in plain words
Tick boxes for index, follow, nosnippet and max-image-preview:large. The robots tag is only written when you change something, because index, follow is already the default.
Open Graph and X card tags
Title, description, URL, site name, image, alt text, type and locale for Facebook, LinkedIn, WhatsApp, Slack and Discord. X tags reuse your Open Graph values, so nothing is duplicated.
JSON-LD structured data
Add an Organization, WebSite or Article block in schema.org format, with logo, social profiles, author and dates. The JSON is escaped so it can't break out of its script tag.
Checks as you type
Warnings appear for a missing title or description, relative image or canonical URLs, noindex left on by mistake, and an Article with no published date.
How to use the meta tag generator
- 1Type your title, description and page URL.
- 2Watch the pixel meters and the Google preview, then set robots, social and schema options.
- 3Copy the HTML or download it, and paste it into your page's <head>.
When to use it
Setting up a new site
Generate the full head block for your home page with Organization schema and social tags, then paste it into your template.
Hiding a thank-you page
Untick Allow indexing to get a noindex tag for order confirmation or test pages you don't want in search results.
Fixing ugly link previews
Add the missing og:image and site name so links shared in chat apps show a proper card. Then preview the card on six platforms.
How long should a title tag be?
Aim for a title that fits in about 600 pixels on desktop. That's roughly 50 to 60 characters of normal text, but the real number swings a lot. "Wild Swimming in Wales" is narrow. "MOM'S WORLD-FAMOUS BBQ" is wide. That's why this tool measures pixels instead of trusting a character count.
Put the words people search for near the start and the brand at the end, so a cut costs you the brand, not the keyword. Google rewrites titles that are stuffed with keywords or don't match the page, so write for the reader first.
How long should a meta description be?
On desktop Google shows about 920 pixels of description, roughly 150 to 160 characters. On mobile it's often less, around 680 pixels. The description isn't a ranking factor, but it is your pitch in the results, so it affects whether people click.
Write one or two sentences that answer the search and give a reason to choose your page: a price, a time, a number. Google may pick other text from the page if it fits the query better. A clear description that matches the page makes that less likely. To see whether your main phrase actually appears in the page copy, check how often your keyword appears.
Which meta tags does Google actually use?
Google reads a short list of tags. This tool generates the useful ones and leaves out the rest.
- title: the clickable headline in results. Used.
- meta description: often used for the snippet. Used.
- meta robots: controls indexing and snippets (noindex, nofollow, nosnippet, max-image-preview). Used.
- link rel=canonical: tells Google which URL is the main copy of the page. Used as a strong hint.
- meta viewport: needed for mobile-friendly pages. Used.
- meta keywords: ignored by Google since 2009. Not generated.
- revisit-after and meta language: ignored. Use the lang attribute on <html> instead.
What are Open Graph and JSON-LD for?
Open Graph tags come from the Open Graph protocol. Facebook, LinkedIn, WhatsApp, Slack and Discord read them to build link previews. X reads its own twitter: tags first and falls back to Open Graph, so one set of values covers almost every app. Use a 1200 × 630 pixel image with a full https:// URL.
JSON-LD is structured data written with the schema.org vocabulary. It doesn't change how the page looks. It tells search engines what the page is about: the organization behind the site, the site's name, or an article with its author and dates. Organization markup helps Google pick your logo, WebSite markup helps it show your site name, and Article markup helps with dates and bylines.
Why use Mavros
| Mavros | Typical upload sites | |
|---|---|---|
| Length check | Pixel width at Google's fonts, plus characters | Character count only |
| Outdated tags | Leaves out meta keywords and revisit-after | Still generates them |
| Social and schema tags | Open Graph, X card and JSON-LD in one block | Basic tags only, or a separate tool |
| Preview | Desktop and mobile Google result, live | None, or after pressing a button |
| Your drafts | Stay in your browser | Sent to a server, or a URL fetch is needed |
| Sign-up or ads in the way | None | Common |
Tips
- Give every page a unique title and description. Duplicates across many pages make Google more likely to rewrite them.
- Use a full https:// URL for the canonical and the image. Relative paths like /img/og.jpg don't work in link previews.
- Turn on max-image-preview:large if you want large image thumbnails in Google Discover.
- After you paste the tags, add the page to your XML sitemap so search engines find it sooner.
- Don't block a page in robots.txt if you want Google to see its noindex tag. A blocked page can't be crawled, so the tag is never read.
Questions
What is the ideal title tag length?
Keep titles under about 600 pixels, which is usually 50 to 60 characters. Google has no fixed character limit; it cuts titles that are too wide for the result. Wide letters like W and M use up the space faster.
Why measure pixels instead of characters?
Because Google truncates by display width, not by count. In Arial a capital W is about four times wider than a lowercase i, so two 60-character titles can differ by hundreds of pixels.
Does the meta description affect rankings?
No, Google doesn't use the meta description as a ranking signal. It does show it as the snippet in many results, so a clear, specific description can raise your click-through rate.
Should I still use the meta keywords tag?
No. Google has ignored meta keywords since 2009, and Bing has said that stuffing it can count against a page. This tool doesn't generate the tag.
Where do I paste the generated tags?
Paste them inside the <head> element of your page, before </head>. In WordPress or Shopify, use your SEO plugin or theme settings for the title and description, and the theme's head section for the rest.
Do I need both Open Graph and Twitter tags?
No, Open Graph alone covers most apps. X falls back to og:title, og:description and og:image, so you only need twitter:card. This tool adds twitter:title and the others only when Open Graph is turned off.
Is anything I type sent to a server?
No. The tags and the preview are built in your browser, and the page makes no network requests while you use it. You can safely draft titles for pages that aren't published yet.