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.
Aprenda como implementar rolagem infinita mantendo a rastreabilidade para rastreadores de IA, ChatGPT, Perplexity e motores de busca tradicionais. Descubra estr...
Discussão da comunidade sobre renderização de JavaScript por rastreadores de IA. Desenvolvedores compartilham experiências com React, Next.js e outros framework...
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 ...