SERP Simulator — Free Google Snippet Preview Tool

What a SERP simulator shows you

A Google search result is just three lines of real estate: the title, the URL/breadcrumb, and the meta description. Those three lines decide whether someone clicks your result or a competitor’s — yet you can’t normally see them until Google renders the page, and by then a clumsy, truncated title is already costing you clicks. A SERP simulator closes that gap. This one renders all three lines exactly as Google does, live as you type, for desktop and mobile, so you optimize the snippet before you ship the page.

Paste your title, URL, and meta description into the fields above — or paste a page URL and click Fetch to auto-fill them from a live page. The preview updates instantly, the counters tell you whether each line fits, and you can copy the finished <title> and <meta name="description"> tags straight into your page. Editing runs entirely in your browser and nothing you type is sent anywhere; the one exception is the optional Fetch button, which sends only the URL you enter to our proxy so it can read that page’s tags.

Auto-fill from a URL and set your favicon

Already have the page live? Paste its address into Page URL and click Fetch. The tool reads the page through our proxy and fills in the real <title>, meta description, and site name — falling back to the page’s Open Graph tags when a standard tag is missing — and it pulls the site’s favicon so the preview matches what searchers actually see. Some sites block automated requests and the fetch can fail; when that happens, just enter the details by hand.

You can also set the icon yourself: click Upload icon to use any image — handy for a redesign or an icon that isn’t live yet. Both fetched and uploaded icons are embedded straight into the preview, so they appear in the Export PNG screenshot too.

Pixel width, not character count, is what truncates

Most “title length checkers” count characters and tell you to stay under 60. That advice is wrong often enough to hurt you, because Google truncates by pixel width. Every character is a different width in Google’s font: a W is roughly three times as wide as an i. A 60-character title of wide letters overflows; a 70-character title of narrow letters fits. (Google’s own title-link documentation explains how it chooses and rewrites the title it shows.)

This tool measures the actual rendered width using the browser’s Canvas text API in Google’s own render fonts (Arial — bold ~20px for titles, ~14px for descriptions), so the “truncated” warning fires at the real cut-off point. Try it: type a title of WWWWWWWW… and watch it truncate far sooner than the same number of iiiiiiii… characters.

Here are the approximate pixel budgets the simulator checks against. Google can change these at any time, which is exactly why measuring beats memorizing a character count:

Element	Desktop	Mobile
Title	~600 px	~920 px
Meta description	~920 px	~680 px

Keep titles to plain text, too — Google often strips or ignores emoji and decorative symbols, so the tool flags them.

Recommended title and meta description lengths

Pixel width is the real limit, but it helps to start from safe character targets and then verify the exact fit in the preview. These are the ranges that stay comfortably inside Google’s visible space on both desktop and mobile:

Element	Character target	Pixel budget	Notes
Title tag	50–60 chars	under ~600 px (desktop)	Front-load the keyword; append brand with | or -.
Meta description	150–160 chars	under ~960 px (desktop)	Write it like a mini ad with a soft CTA.
Mobile title	~50–60 chars	wraps ~530 px per line	Keep the hook in the first line.
Mobile description	~120 chars visible	under ~680 px	Lead with the benefit — mobile cuts sooner.

Include your brand name deliberately. For a homepage or brand page, lead with the brand. For an article, put the primary keyword first and add the brand at the end with a separator so it builds recognition without crowding out the keyword. Preview it here to confirm the brand survives truncation rather than getting cut off mid-word.

Match the searcher’s query

Google bolds the words in your snippet that match the search query. Enter your target keyword in the Search query field and the preview bolds matching words in the title and description, so you can see how prominent your snippet looks for that search. Aim to include the query naturally near the front of the title — bolded, front-loaded terms draw the eye and signal relevance before the searcher reads a single full line.

Desktop vs mobile SERP previews

Desktop and mobile are effectively two different search results, and this mobile SERP simulator shows both. On desktop, titles truncate around 600px on a single line. On mobile, titles wrap to a second line and get cut around 530px per line — often near 50–60 characters — while descriptions have less room than desktop, not more. So a description that reads perfectly on desktop can lose its call to action on a phone.

Because over half of all searches are mobile, toggle the Mobile view and confirm your most important selling point is visible before the cut-off. If your best hook only appears in the desktop preview, most of your audience never sees it. Optimizing for the narrower mobile snippet first, then checking desktop, is usually the safer order.

See the cutoff, then trim to fit

The preview truncates live as you type, and the counter under each field reports the rendered width against the limit — for example “671px / 600px — truncated” — so you see the exact pixel overrun rather than guessing from a character count. When a field runs over, a Trim to fit button appears next to its counter; click it and the tool shortens the title or description to the longest version that fits, with no ellipsis (your real tag should fit, not display a “…”). It’s the fastest way to get from “truncated” to “fits” without nibbling characters one at a time.

Write titles and descriptions that earn clicks

Ranking gets you onto the page; the snippet gets you the click. A few reliable levers, all of which you can test live in the preview:

• Use power words and specifics. “Complete guide,” “step-by-step,” a number, or the current year makes a listing concrete and clickable.
• Add brackets or symbols where they fit — [Guide], →, or a | separator can make a title scannable, as long as they don’t push your keyword past the cut-off.
• Match the intent, not just the keyword. Answer the question the searcher is actually asking; that is also what discourages Google from rewriting your text.
• Front-load the hook. Put the most compelling reason to click at the start, where it survives truncation on both desktop and mobile.

One caveat: Google won’t always show your exact text. If it decides an alternate version better matches intent, it may rewrite the title or description using your page content. A tight, relevant snippet that maps cleanly to the query is your best defense against an unwanted rewrite.

Account for AI Overviews

Google’s AI Overview isn’t a separate AI tool you visit — it’s the AI-generated answer panel that now appears at the top of many results pages, pushing the organic listings further down. Toggle Simulate AI Overview to render that panel above your snippet and see how much it shifts your result down the page. When an AI Overview is present, the fold is lower and a compelling, fully-visible title and description matter even more. The panel text is editable so you can mock up a realistic answer for a screenshot.

Preview and generate rich results

Rich results — review stars, FAQ drop-downs, sitelinks — make a listing taller and more clickable. Pick a type under Rich result to preview how it changes the snippet, then copy the matching JSON-LD schema the tool generates (AggregateRating, FAQPage, or BreadcrumbList). That is the markup you paste into your page’s <head> to become eligible for the rich result. Most preview tools only draw a picture; this one hands you the code, then you confirm it with Google’s Rich Results Test.

A quick optimization workflow

1. Write your title and watch the counter. Keep it green (fits) on both desktop and mobile.
2. Front-load the keyword so it bolds for your target query.
3. Write a description that fits the visible width and gives a concrete reason to click.
4. Toggle Mobile and confirm your hook is above the cut-off on a phone.
5. If the page has reviews, an FAQ, or a clear site hierarchy, add the relevant rich result and copy its JSON-LD.
6. Copy the tags in your preferred format — plain HTML, a Next.js metadata object, or Open Graph tags — paste them into your page, and Export PNG to drop the preview into a report or ticket. Share the live preview link too: the URL preserves your snippet so anyone can open the exact same preview.

Pairs well with three related tools: convert your design’s type scale with the CSS px to rem converter, make sure your on-page text is readable with the color contrast checker, and confirm the little icon beside your result renders everywhere with the favicon checker.