FeaturedSnippet

Se já escreveste uma meta description e te perguntaste se o Google a iria cortar, já usaste um previewer SERP. E se usaste três, reparaste que discordam — porque a maioria está desactualizada, foi buscar regras de truncagem a um blog SEO de 2018 ou ignora mobile. Os precisos são pagos (Yoast, Mangools, Ahrefs) e fecham a pré-visualização básica atrás de uma parede de sign-up.

O FeaturedSnippet começou como uma ferramenta que queríamos para nós: um preview multi-engine preciso, rápido, que corre no browser, não pede conta e diz a verdade sobre como cada motor renderiza mesmo. As AI overviews e motores como o Perplexity mudaram o que 'SERP' significa — a ferramenta tinha de modelar isso também.

O briefing: lançar grátis, sem fricção, e deixar a própria ferramenta ser o marketing. Profissionais de SEO passam à frente coisas que funcionam e não pedem nada em troca.

O trabalho interessante foram as regras de truncagem por motor. O Google trunca títulos por *largura em pixels*, não por contagem de caracteres, e o limite muda entre desktop e mobile. O Bing trunca por contagem mas com limites diferentes. O DuckDuckGo segue mais ou menos o Bing. O Perplexity AI não trunca como os outros — sumariza com citação. O Brave aproxima-se do Google. O Yahoo corre em infra-estrutura Bing com diferenças cosméticas.

Construímos cada motor como um módulo de render. Input título/URL/descrição, output uma aproximação fiel em HTML+CSS no browser, com canvas escondido para medir largura em pixels quando preciso. Toggles para desktop vs mobile, dark mode (alguns têm, outros não), rich snippets, presença de AI overview.

Toda a ferramenta corre no cliente. Sem processamento de servidor, sem telemetria, sem conta. Deploy estático em CDN, carregamento instantâneo.

Stack: Next.js em SSG total (a página é essencialmente estática; a interactividade é estado React), TypeScript, Tailwind. Cada renderer de motor é um componente isolado com o mesmo input (título, URL, descrição, flags de rich snippet) e produz um visual específico do motor.

A medição de largura em pixels usa um canvas escondido com a fonte específica do motor (Arial / Roboto / system). O canvas mede a largura renderizada e aplica a regra de truncagem (tipicamente com reticências na última palavra completa que cabe). Para mobile, troca-se para larguras que mimetizam viewports e remede-se.

Toda a ferramenta pesa ~80kb gzipped, carrega em <600ms e zero pedidos a terceiros. Profissionais de SEO são uma audiência que repara em — e premeia — boa performance. A ferramenta é a sua própria demo.