Criamos um site moderno em React com rolagem infinita para nosso blog. Ótima experiência para o usuário, mas nosso conteúdo não aparece em respostas de IA.
O Google indexa normalmente (depois de algum trabalho com SSR). Mas as plataformas de IA parecem ignorar a maior parte do nosso conteúdo.
Nossa estrutura:
Perguntas:
Algum dev frontend já lidou com isso?
Deixe-me explicar como diferentes rastreadores de IA lidam com JavaScript:
Suporte a JavaScript por rastreadores de IA:
| Rastreadores | Renderização JS | Simulação de Rolagem | Tempo de Espera |
|---|---|---|---|
| GPTBot | Limitado/Nenhum | Não | Mínimo |
| Google-Extended | Bom (como o Googlebot) | Não | Padrão |
| ClaudeBot | Limitado | Não | Mínimo |
| PerplexityBot | Varia | Não | Limitado |
| Common Crawl | Nenhum | Não | Nenhum |
O problema principal:
Rolagem infinita exige:
A maioria dos rastreadores de IA falha no passo 1 ou 2.
Por que SSR não é suficiente:
Seu SSR entrega a página inicial. Mas o conteúdo da rolagem infinita não é “inicial” – ele carrega via interação. O SSR não resolve a dependência da interação.
A questão fundamental:
Rolagem infinita é fundamentalmente incompatível com as capacidades atuais dos rastreadores de IA. Você precisa de uma abordagem alternativa.
Abordagens recomendadas (em ordem de amigabilidade para IA):
Opção 1: Paginação tradicional (mais amigável para IA)
/blog/page/1
/blog/page/2
/blog/page/3
Opção 2: Abordagem híbrida
<!-- Página de rolagem infinita -->
<link rel="canonical" href="/blog/page/1" />
<!-- Paginação sempre disponível -->
<nav>
<a href="/blog/page/1">1</a>
<a href="/blog/page/2">2</a>
</nav>
Opção 3: Prerender para rastreadores de IA
Cada opção tem trade-offs. A opção 1 é a mais simples e confiável para IA. A opção 2 preserva a UX enquanto adiciona acessibilidade para IA.
Passamos exatamente por esse problema. Aqui está nossa solução:
Implementação da abordagem híbrida:
// Estrutura de URL
/blog // Rolagem infinita (padrão para usuário)
/blog/archive/1 // Paginado (acessível para rastreador)
/blog/archive/2
Principais detalhes da implementação:
O sitemap inclui apenas URLs paginadas
Página de rolagem infinita carrega o mesmo conteúdo
Links internos apontam para artigos individuais
Orientação no robots.txt:
# Deixe os rastreadores focarem nos artigos individuais
# Não no container de rolagem infinita
Sitemap: /sitemap.xml
Resultados:
Abordagem específica para Next.js:
Usando getStaticPaths + getStaticProps:
// pages/blog/page/[page].js
export async function getStaticPaths() {
const totalPages = await getTotalPages();
const paths = Array.from({ length: totalPages }, (_, i) => ({
params: { page: String(i + 1) }
}));
return { paths, fallback: false };
}
export async function getStaticProps({ params }) {
const posts = await getPostsForPage(params.page);
return { props: { posts, page: params.page } };
}
Benefícios:
Depois adicione rolagem infinita como melhoria:
Assim você tem o melhor dos dois mundos.
Adicionando o prerendering como opção:
Serviços de prerender para rastreadores de IA:
Você pode detectar user agents de rastreadores de IA e servir conteúdo prerenderizado:
// middleware
if (isAICrawler(req.headers['user-agent'])) {
return servePrerenderedVersion(req.url);
}
Detecção de rastreadores de IA:
const aiCrawlers = [
'GPTBot',
'ChatGPT-User',
'Google-Extended',
'ClaudeBot',
'PerplexityBot',
'anthropic-ai'
];
function isAICrawler(userAgent) {
return aiCrawlers.some(crawler =>
userAgent.includes(crawler)
);
}
Opções de prerender:
Atenção:
Nem todos os rastreadores de IA se identificam claramente. Alguns podem passar despercebidos. Essa é uma abordagem suplementar, não substitui a paginação adequada.
Metodologia de teste para acessibilidade de rastreadores de IA:
Testes manuais:
Teste sem JavaScript:
Teste de ver código-fonte:
Teste com curl:
curl -A "GPTBot/1.0" https://yoursite.com/blog/
Testes automatizados:
Google Search Console:
Auditoria Lighthouse:
O que você quer ver:
Perspectiva e-commerce:
Temos mais de 10.000 produtos com funcionalidade “carregar mais”. Aqui está nossa solução:
Estrutura da página de categoria:
/category/shoes # Primeiros 24 produtos + carregar mais
/category/shoes?page=2 # Produtos 25-48
/category/shoes?page=3 # Produtos 49-72
Implementação:
Página inicial sempre tem links de paginação
Parâmetros ?page= são canônicos
Sitemap inclui todas as URLs paginadas
Produtos têm URLs individuais
Resultado:
Plataformas de IA citam nossas páginas de produto individuais, que descobrem pela estrutura de categoria paginada.
Isso foi incrivelmente útil. Eis meu plano de implementação:
Abordagem: Paginação híbrida
Fase 1: Adicionar rotas paginadas (Semana 1-2)
Fase 2: Atualizar rolagem infinita existente (Semana 3)
Fase 3: Testes e validação (Semana 4)
Implementação técnica:
/blog → Rolagem infinita (humanos, canonical para archive/1)
/blog/archive/1 → Paginado (rastreadores, canonical para si mesmo)
/blog/archive/2 → Paginado (rastreadores)
/blog/[slug] → Artigos individuais (conteúdo principal)
Princípios chave:
Obrigado a todos pelas orientações técnicas detalhadas.
Get personalized help from our team. We'll respond within 24 hours.
Acompanhe quais de suas páginas estão sendo descobertas e citadas por plataformas de IA. Identifique problemas de rastreamento que afetam sua visibilidade.
Discussão da comunidade sobre otimização de Single Page Applications para motores de busca de IA. Soluções reais para tornar sites pesados em JavaScript visívei...
Discussão da comunidade sobre como o JavaScript afeta o rastreamento por IA. Experiências reais de desenvolvedores e profissionais de SEO testando o impacto da ...
Discussão da comunidade sobre renderização de JavaScript por rastreadores de IA. Desenvolvedores compartilham experiências com React, Next.js e outros framework...