Title Tag Optimization: How to Write Titles That Rank and Get Clicked
A practical guide to writing title tags that rank: ideal length in pixels, keyword placement, why Google rewrites titles, and how to preview yours before you publish.
Type your page title and brand once and watch the exact Google title render for desktop and mobile in real time. We assemble the final “Title | Brand” string the way Google does and warn you the instant it would be truncated, measured by rendered pixel width, exactly like Google, never a rough character count. Everything runs on your device.
Meta Title Preview assembles your "Title | Brand" string the way Google does and renders it for desktop and mobile, measuring rendered pixel width to flag exactly where truncation lands. Front-load detection nudges keywords ahead of the brand. Copy a ready title tag. Free and browser-based, so unpublished pages stay private.
The GigAI Meta Title Preview zooms in on the single most clicked-on element of a search result, the title tag, and shows you precisely how it will read in Google before you ship it. Type your page title, add your brand, and choose how the two join (a pipe, a dash, an em dash, or no brand at all), and a faithful Google result renders instantly for both desktop and mobile: favicon chip, breadcrumb URL, the blue clickable title and a sample description underneath. Because Google clips titles by rendered pixel width and not character count, we measure your assembled title on a canvas in Google's own font and size (~20px Arial on desktop, tighter on mobile) and flag the exact point where the ellipsis lands, which is why a 55-character title full of wide letters like W and M can truncate while a 62-character one of thin i's and l's fits. You get a live character count, a pixel readout against the desktop and mobile budgets, and green/amber/red guidance, plus a length coach that also warns when a title is too short to earn the click or when the brand suffix is eating the budget your keywords need. Front-load detection nudges your primary keyword ahead of the brand so it survives truncation on mobile. Copy the final title, copy a ready-to-paste `<title>` tag, download it, share a link that reopens your exact setup, or step through undo/redo. All keyboard-driven. Everything is computed locally with the browser's own canvas and parser, so draft titles, unpublished pages and client work never leave your machine.
Last updated
Enter the title for the page you're optimizing. Watch the live character and pixel readouts and the desktop/mobile preview update on every keystroke.
Type your brand name and choose how it joins the title: pipe, hyphen, en dash, em dash, or leave it off. The final assembled title is what gets measured and previewed.
Amber means you're near the limit. Red means Google would truncate on that surface. Trim words, shorten the brand or front-load your keyword until desktop and mobile both go green.
Copy the finished title text or a paste-ready <title> tag, download it, or share a link that reopens the tool with your exact title and brand pre-filled for a teammate.
Your assembled title renders inside a faithful Google result (favicon, breadcrumb and blue link) for both desktop and mobile at once, so you see the real clickable headline a searcher meets.
Titles are measured on a canvas in Google's font and size, so we flag the exact pixel where the ellipsis appears. Not an arbitrary character count that gets wide and narrow letters wrong.
Add your brand and pick the separator (pipe, hyphen, en dash, em dash or none) and we assemble the final “Title | Brand” string exactly as it will appear, counting the suffix against your budget.
A green/amber/red readout shows whether your title sits in the ~50–60 character / ~600px sweet spot, is too short to earn clicks, or risks truncation on desktop or the narrower mobile result.
We spot when your primary keyword sits behind the brand and nudge you to lead with it, so the words that win the click survive when Google clips the tail on mobile.
Copy the finished title text, copy a ready-to-paste <title> tag, download it, share a link that reopens your exact title and brand, or step back through undo/redo: all keyboard-driven.
A title that ends in “…” mid-word looks broken and buries your keyword. Seeing the cut-off before you publish lets you trim, reorder or shorten the brand so the whole promise stays visible.
Character counters are a proxy Google never uses. Measuring rendered width means you'll never ship a “safe” 58-character title that Google still clips because it's packed with wide letters.
Appending your brand is good for recognition but eats budget. The tool shows precisely how much room “ | YourBrand” costs so you can keep it, shorten it, or drop it on long titles.
Every measurement and preview is computed in your browser, so draft titles, staging pages and client work are never uploaded, logged or seen by anyone.
From quick one-off fixes to daily workflows, see how people put this tool to use.
Draft several title variants, watch the pixel warnings on desktop and mobile, and pick the one that keeps the target keyword and brand fully visible everywhere.
See in real time whether your title reads as a complete, compelling headline in the result rather than trailing off into an ellipsis that kills the click.
Assemble “Title | Brand” with the right separator and copy a clean, escaped <title> tag straight into your template or head component, instead of hand-writing it.
Lock a consistent brand suffix and separator, preview each page's title against the same pixel budget, and share links so clients can review the exact snippet.
Accepts Text, and produces HTML and TXT, all processed locally in your browser.
Generate perfect SEO meta tags, Open Graph and Twitter Card markup with a live Google snippet and social-card preview, copy the ready-to-paste <head> code, 100% in your browser.
Preview exactly how your page appears in Google search (desktop and mobile) as you type your title, URL and meta description, with live pixel-width truncation warnings. Nothing is uploaded.
Paste a page's HTML to audit its title, description, canonical, robots, Open Graph and Twitter Card tags: with a length score, missing/duplicate checks and a live search & social preview, 100% in your browser.
Format, validate and minify JSON in your browser with pinpoint error line + column, jump-to-error, key sorting and live editing: nothing is uploaded.
Build a clean rel=canonical tag from any URL: normalise the host, path and query, strip tracking parameters, and copy the ready-to-paste <link> tag, HTTP header and framework snippets, 100% in your browser.
Write a click-worthy SEO meta description with a live character + pixel meter, a real Google snippet preview and ready-to-edit templates, copy the tag, 100% in your browser.
Hit a snag? Here are quick fixes for the issues people run into most.
Google truncates by pixel width, not character count. Titles full of wide letters (W, M, capitals) hit the ~600px desktop limit sooner than the “60 chars” rule implies. Trim a word, shorten the brand, or swap in narrower phrasing until the title reads “fits”.
Google sometimes rewrites titles using your H1, brand or on-page text when it judges them a better match. This tool previews the title you provide. Make your <title> concise, unique and clearly relevant to the page's main heading so Google is more likely to honour it.
Shorten the brand (many sites use just the primary word), switch to a thinner separator, or drop the brand on long titles. The preview shows exactly how many pixels the suffix costs so you can decide per page.
Mobile results truncate at a narrower width, so front-load your primary keyword ahead of the brand and any filler. The front-load check will confirm the keyword now leads and survives the narrower mobile budget.
Front-load your primary keyword before the brand so it survives truncation on narrow mobile results.
Watch the pixel readout, not just the character count, wide letters eat the budget faster.
Keep the brand suffix short (often just the main word) to leave room for the keywords that win the click.
Check the mobile preview too: it truncates at a different width, and most searches happen there.
Aim for roughly 50–60 characters, but treat the green/amber/red pixel status as the real test.
Recent updates and improvements to the meta title preview.
Initial release, live desktop + mobile Google title preview with canvas-measured pixel-width truncation, brand suffixing, length/pixel guidance, copy title / copy <title> / download / share and undo/redo.
Added the keyword front-load check, per-separator brand assembly (pipe / hyphen / en dash / em dash / none) and keyboard shortcuts with an in-tool helper.
Refined the pixel-width model and mobile budgets and improved the amber/red thresholds to better match observed Google title truncation.
Every measurement, title assembly and preview happens entirely in your browser using its native canvas and encoders. Nothing you type is uploaded, stored or logged. We deliberately fetch no live URLs, so draft titles, unpublished pages and client work never leave your device. Close the tab and every trace is gone.
Free, private and instant. Meta Title Preview runs right in your browser.