Verificador de SEO Next.js

Audite seu site Next.js em busca de problemas de SSR, renderização, metadados e rastreabilidade. Mais de 20 verificações em 7 categorias.

O Problema #1 de SEO no Next.js

O uso excessivo de diretivas "use client" faz com que o conteúdo seja renderizado apenas em navegadores. Mecanismos de busca e rastreadores de IA (ChatGPT, Claude, Perplexity) podem ver um shell HTML vazio em vez do seu conteúdo.

  • Detecte problemas de SSR vs CSR
  • Verifique disponibilidade de metadados
  • Analise Core Web Vitals

Funciona melhor com sites Next.js, mas pode analisar qualquer site

Perguntas Frequentes

O que esta ferramenta verifica?

Esta ferramenta realiza mais de 20 verificações de SEO em 7 categorias:

  • Renderização e SSR: Detecta shells HTML vazios, renderização apenas no cliente, problemas de hidratação
  • Metadados e Head: Título, descrição, Open Graph, canonical, viewport
  • Performance: Core Web Vitals (FCP, LCP, TTFB), recursos que bloqueiam renderização
  • Imagens: Texto alternativo, uso de next/image, carregamento preguiçoso
  • Dados Estruturados: Validação de marcação de esquema JSON-LD
  • Rastreabilidade: Meta robots, links internos, hreflang
  • HTML Semântico: Cabeçalhos, landmarks, atributos ARIA

Por que SSR/SSG é importante para SEO?

Mecanismos de busca e rastreadores de IA inicialmente veem apenas o HTML bruto do seu servidor. Se o seu conteúdo renderiza apenas via JavaScript (client-side), os rastreadores podem ver uma página vazia. Server-Side Rendering (SSR) ou Static Site Generation (SSG) garante que seu conteúdo esteja na resposta HTML inicial.

O que é o problema "Shell HTML Vazio"?

Isso ocorre quando sua aplicação Next.js retorna HTML mínimo com conteúdo carregado inteiramente via JavaScript. Causas comuns:

  • Uso excessivo de diretivas "use client"
  • Não usar getServerSideProps ou getStaticProps
  • Buscar dados apenas em hooks useEffect

Como corrigir problemas de renderização?

Para garantir que o conteúdo esteja disponível para rastreadores:

  • Pages Router: Use getServerSideProps ou getStaticProps
  • App Router: Mantenha componentes como Server Components por padrão, adicione "use client" apenas quando necessário
  • Busca de Dados: Busque dados críticos no servidor, não em useEffect
  • Metadados SEO: Use next/head ou a API de metadados