Meta tag generator with Google SERP preview
Fill in a title, description, canonical and Open Graph image and get the complete <head> snippet — with a live Google result preview that measures your title and description in pixels, not characters, so you can see exactly where they will be cut.
Free · no sign-up · runs in your browser
322 px used of 580
582 px used of 920
Leave blank to reuse the page title.
1200 x 630. Must be absolute — crawlers do not resolve relative URLs.
Google result preview
example.com › tools
Free developer tools for the browser
Small, fast utilities that run entirely in your browser — no sign-up, no uploads, nothing stored.
Widths are estimated from Arial metrics; real results vary by a few pixels.
Social card preview
example.com
Free developer tools for the browser
Small, fast utilities that run entirely in your browser — no sign-up, no uploads, nothing stored.
Copy the head block
<head> tags
<title>Free developer tools for the browser</title>
<meta name="description" content="Small, fast utilities that run entirely in your browser — no sign-up, no uploads, nothing stored." />
<link rel="canonical" href="https://example.com/tools" />
<meta name="robots" content="index, follow" />
<meta name="theme-color" content="#b9471b" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Free developer tools for the browser" />
<meta property="og:description" content="Small, fast utilities that run entirely in your browser — no sign-up, no uploads, nothing stored." />
<meta property="og:url" content="https://example.com/tools" />
<meta property="og:site_name" content="Example" />
<meta property="og:image" content="https://example.com/og.png" />
<!-- X / Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Free developer tools for the browser" />
<meta name="twitter:description" content="Small, fast utilities that run entirely in your browser — no sign-up, no uploads, nothing stored." />
<meta name="twitter:image" content="https://example.com/og.png" />Search engines truncate a title by how wide it is, not by how many characters it has: "Illinois" and "Wallwork" are both eight letters and almost twice the width apart, which is why the "60 characters" rule passes titles that get clipped and flags ones that would have fitted. This measures the rendered width instead, shows you the result as Google would draw it, and hands back the full set of meta, Open Graph and X card tags ready to paste into your head.
How it works
- 01Type a title and description. Each is measured in CSS pixels using per-character widths for Arial, the face Google renders results in, rather than counted as characters.
- 02The preview shows the result the way a search page draws it: the URL as a breadcrumb, the title in blue, the snippet underneath — each truncated at the real limit, with an ellipsis, cut at a word boundary.
- 03A pixel counter under each field shows how much of the budget you have used, so you can fill the space without going over it.
- 04The canonical URL and Open Graph image are checked for being absolute. Crawlers do not resolve a relative URL in a meta tag the way a browser resolves one in an anchor, so a relative og:image is simply no image.
- 05Open Graph title and description fall back to the page title and description, which is what most pages want — fill them in only when the social copy should differ from the search copy.
- 06The output is the whole <head> block: title, description, canonical, robots, theme-color, the Open Graph set and the X card set, with every value escaped for an HTML attribute.
Use cases
- Writing the head block for a new landing page and seeing the search result before it ships.
- Checking whether a title that reads well in a CMS field will survive the cut on a results page.
- Getting the Open Graph and X card tags right in one pass instead of debugging them in a link-preview debugger.
- Auditing an existing page by pasting its current title and description in to see how much is being clipped.
- Deciding between two headline options by comparing their rendered widths rather than their character counts.
- Producing tags for a page whose social copy needs to differ from its search copy.
Frequently asked questions
How long should a meta title be?
Long enough to use the space and short enough not to be cut — which is a width, not a count. Google clips a desktop title at roughly 580 pixels, which is about 60 characters of average text but only about 45 of wide capitals, or nearly 90 of narrow lowercase. The counter above measures your actual text, and the preview shows where the cut lands.
How long should a meta description be?
Around 920 pixels, roughly 155 to 160 characters of typical text. Descriptions are not a ranking factor, but they are the sales copy on the results page, so a truncated one wastes the pitch and a very short one leaves space unused. Both are flagged above.
Why does Google show a different title than the one I set?
Google rewrites titles when it judges its own version more useful — commonly when the title is keyword-stuffed, boilerplate across many pages, or does not match the page's visible H1. A clear, specific, unduplicated title that matches the page content is the reliable way to keep yours. This tool cannot predict a rewrite; it shows what yours would look like if it is used.
Do I need separate Open Graph and Twitter tags?
Not usually. X falls back to Open Graph tags for title, description and image, so the only tag you really need is twitter:card to choose the layout. The full set is generated here anyway because some tools and crawlers read the twitter:* names specifically, and duplicating four tags costs nothing.
What size should the og:image be?
1200 x 630 pixels, a 1.91:1 ratio, is the safe default for a large card on every major platform. Keep it under about 5 MB, use an absolute https URL, and remember that crawlers do not execute JavaScript — the image has to exist at that URL when it is fetched.
Does a canonical tag have to be an absolute URL?
Yes. Relative canonicals are technically permitted but widely mishandled, and a wrong canonical is worse than none — it can point search engines away from the page you want indexed. Always use the full https URL including the domain. This tool flags a canonical that is not absolute.
Related resources
Related reading
- Frontend5 Frontend Tools Worth Bookmarking in 2026A short, opinionated list of the frontend tools and references we reach for every week — frameworks, styling, components, and icons.
More tools
Tailwind CSS color palette generator
Open →Turn one hex code into a full Tailwind color scale — 11 OKLCH-tuned shades from 50 to 950, with contrast ratios, ready to paste into Tailwind v4's @theme block or a v3 config. Free, no sign-up, runs in your browser.
CSS clamp() calculator for fluid typography
Open →Generate a responsive CSS clamp() font size from a minimum and maximum size and the viewport range they should grow across — with the slope and intercept shown, a live preview, and the rendered size at every common screen width. Free, no sign-up.
SVG to JSX converter for React components
Open →Paste an SVG and get a React component back — attributes camelCased, class turned into className, style strings converted to objects, xmlns removed, with optional currentColor, a size prop and TypeScript output. Runs entirely in your browser; nothing is uploaded.
Favicon generator — .ico, PNG set and manifest
Open →Turn a PNG or SVG, or just a couple of letters, into the full favicon set: 16, 32, 48, 180, 192 and 512 PNGs, a real multi-size favicon.ico, a web app manifest and the <head> tags. Everything runs in your browser — nothing is uploaded.
JSON-LD schema generator and validator
Open →Build valid JSON-LD structured data for Article, FAQPage, Product, Organization and BreadcrumbList from a form, or paste existing markup to have it pretty-printed and checked for the mistakes that stop a rich result appearing. Free, runs in your browser.
robots.txt generator with validation
Open →Build a robots.txt from user-agent groups, allow and disallow rules, crawl-delay and sitemap URLs — with presets for allowing everything, blocking AI crawlers, or locking down a staging site, and warnings for the mistakes that quietly block your whole site.
UTM link builder and campaign URL generator
Open →Build correctly encoded UTM tracking links from a URL and your source, medium and campaign — with the existing query string and fragment preserved, values properly percent-encoded, and warnings for the capitalisation and spacing that split one campaign across several rows in an analytics report.
Colour contrast checker with WCAG suggestions
Open →Check any two colours against WCAG 2 — normal text, large text and UI components — see the ratio and live samples, and get the nearest passing colour when a pair fails, adjusted in OKLCH so the hue stays yours. Free, runs in your browser.
Image converter — WebP, AVIF, JPEG and PNG
Open →Convert and resize images to WebP, AVIF, JPEG or PNG at the quality you choose, see exactly how many bytes each one saved, and download them one at a time or as a zip. Everything happens in your browser — no image is uploaded.
JSON formatter and validator — free, in your browser
Open →Format, minify and validate JSON in your browser. Broken documents get the exact line and column of the error. Nothing is uploaded, and there is no size limit but your machine.
JSON to TypeScript — generate interfaces from a payload
Open →Paste a JSON payload and get TypeScript interfaces: merged array shapes, optional properties, and real unions instead of any. Runs in your browser — nothing is uploaded.
OG image generator — free 1200×630 social cards
Open →Generate an Open Graph image for any page: type a title, pick a theme, download a 1200×630 PNG. Runs entirely in your browser — no account, no upload, no watermark.