FeaturedSnippet

If you've ever written a meta description and wondered whether Google would cut it off, you've used a SERP-preview tool. And if you've used three of them, you've noticed they all disagree — because most are out of date, lift their truncation rules from a 2018 SEO blog, or ignore mobile altogether. The accurate ones are paid (Yoast, Mangools, Ahrefs) and lock the basic preview behind a sign-up wall.

FeaturedSnippet started as a tool we wanted ourselves: an accurate, fast, multi-engine preview that runs in the browser, requires no account, and tells the truth about how each engine actually renders. AI overviews and search engines like Perplexity have changed what 'SERP' means — the tool needed to model that too.

The brief: ship it free, with no friction, and let the tool itself be the marketing. SEO professionals pass around things that work and don't ask anything in return.

The interesting work was the truncation rules per engine. Google truncates titles by *pixel width*, not character count, and the limit changes between desktop and mobile. Bing truncates by character count but with different limits. DuckDuckGo follows Bing more or less. Perplexity AI doesn't truncate the way the others do — it summarises with a citation. Brave is closer to Google. Yahoo runs on Bing infrastructure with cosmetic differences.

We built each engine as a renderer module. Input the title/URL/description, output a faithful HTML+CSS approximation in the browser using a hidden canvas to measure pixel width when needed. Toggles for desktop vs mobile, dark mode (some engines have it, some don't), rich snippets, AI overview presence.

The whole tool runs client-side. No server processing, no telemetry, no account. Static deploy on a CDN, instant load.

Stack: Next.js with full SSG (the page is essentially static; the interactivity is React state), TypeScript, Tailwind. Each engine renderer is a self-contained component that takes the same input (title, URL, description, optional rich snippet flags) and produces an engine-specific visual.

Pixel-width measurement uses a hidden canvas with the engine-specific font (Arial / Roboto / system). The canvas measures the rendered width and applies the engine's truncation rule (typically with an ellipsis at the last full word that fits). For mobile, we flip viewport-mimicking widths and re-measure.

The whole tool weighs ~80kb gzipped, loads in <600ms, and has zero third-party requests. SEO professionals are an audience that notices and rewards good performance — the tool itself is its own demo.