How the preview is built
The simulator draws a result the way it appears in Google's listings: a round favicon placeholder showing the first letter of your site name, the site name (or the hostname with any www. removed), a breadcrumb line made from the URL's origin and path segments, then the blue title and the grey description. The desktop card is up to 640 px wide, the mobile card 360 px.
Widths come from an off-screen canvas that measures the text in Arial. The desktop title is cut at 600 px and the description at 920 px. The mobile layout allows two lines of about 320 px for the title and three for the description, so mobile often shows slightly more. When text overflows, the simulator trims back to a word boundary where it can and appends an ellipsis.
These limits are approximations of Google's layout, not values Google publishes. The real result also depends on the device width, on bold query matches, and on whether a date or a rich result element is present.
Reading the counters
Each field shows two numbers: the character count and the measured width against the desktop limit. The pill turns amber when the width passes 90 percent of the limit and red when it exceeds it, at which point the preview shows an ellipsis. The pill is also amber for a title shorter than 30 characters or a description shorter than 70, because very short tags give searchers little to go on and invite rewriting.
Character counts are there for convenience. Two titles of 58 characters can differ by more than 100 px. Treat the pixel figure as the one that matters and use the character count only when briefing a writer who cannot measure pixels.
Fixing titles and descriptions that get cut
A truncated title usually has the brand first or a long separator-laden string of keywords. Rewrite it as subject first, qualifier second, brand last, and drop filler such as Home or Welcome. If the brand matters for the click, keep it short: the site name line above the title already shows who you are, so repeating it in the title spends pixels twice.
Descriptions that end with an ellipsis mid-sentence read badly. Write the first sentence as a complete, specific claim that could stand alone, then add detail in a second sentence that can be lost without harm. Check the mobile card too: the date, when enabled, is prepended to the description and pushes the cut earlier on both layouts.
- Lead with the page's subject, then the distinguishing detail, then the brand.
- Avoid repeating the site name in the title. The result shows it separately.
- Use plain words. Special characters and all-caps words are wide and often stripped.
- Match the title to the page's main heading so Google is less inclined to replace it.
What the simulator cannot show
It renders your tags, not the page. Google takes the title from the title element but may also use headings, anchor text or the site name, and it builds descriptions from the meta tag, page content or structured data as it sees fit. Sitelinks, ratings, FAQ drop-downs and image thumbnails change the result's shape and are not simulated.
Nothing is fetched. To check that the tags on a live page are what you think they are, run the URL through the Open Graph Checker, which reads the real title, description and canonical tag, and use the Robots.txt Generator & Tester to confirm the page is crawlable at all. The simulator runs in your browser and stores nothing.