SERP Previewer

A snippet is the whole pitch a page gets before the click: a brand dot plus address line, a blue title on one line, a two-line description beneath. Long titles slice off mid-thought with an ellipsis, and overflowing descriptions bury the strongest sentence. This previewer renders that card live in desktop and mobile widths and measures real rendered width with a canvas context in the card fonts, instead of guessing from character counts. Overruns are flagged with overflow in pixels plus a usage bar, turning trimming into a measured edit.

Pixel measurement instead of character math

• 📏 Canvas measureText finding the longest fitting prefix by binary search, then backing off to a word boundary
• 📱 Separate desktop and mobile limits, since the handset card is far narrower and cuts much earlier
• 🎯 Overflow badges in exact pixels over, with green, amber and red states plus fade on the card
• 📊 Live usage bars for title and description moving on every keystroke
• 🔗 Address line stripping the scheme and shortening long paths as engines display them

Editing sessions that need the card open

• ✨ Tuning a new title and description until both badges sit green on desktop and mobile
• 📉 Rewriting legacy meta text that search keeps cutting mid-sentence

Fonts, engines and honest approximation

• 🔤 Arial sizes match the card while real engines use their own fonts, so allow a pixel or two of slack
• 🎲 Engines may rewrite titles or pick snippet text, making any preview a guide, not a promise

All typing and measuring stays inside your browser tab, and the text you test is never uploaded, stored or logged anywhere.