Receba as atualizações e os insights mais recentes do Google I/O 2019.
Coisas boas estão acontecendo com a Pesquisa Google, e estamos felizes em compartilhá-las no Google I/O 2019!
Nesta postagem, vamos nos concentrar nas práticas recomendadas para tornar os apps da Web JavaScript detectáveis na Pesquisa Google, incluindo:
- Continuidade do Googlebot
- Pipeline do Googlebot para rastreamento, renderização e indexação
- Detecção de recursos e tratamento de erros
- Estratégias de renderização
- Ferramentas de teste para seu site na Pesquisa Google
- Desafios comuns e possíveis soluções
- Práticas recomendadas de SEO em apps da Web JavaScript
Conheça o Googlebot atemporal
Este ano, anunciamos o tão esperado novo Googlebot contínuo.
Agora o Googlebot usa um mecanismo moderno do Chromium para renderizar sites para a Pesquisa Google. Além disso, vamos testar versões mais recentes do Chromium para manter o Googlebot atualizado, geralmente algumas semanas após cada versão estável do Chrome. Esse anúncio é uma grande notícia para desenvolvedores da Web e SEOs porque marca o lançamento de mais de mil novos recursos, como ES6+, IntersectionObserver e Web Components v1, no Googlebot.
Saiba como o Googlebot funciona
O Googlebot é um pipeline com vários componentes. Vamos entender como o Googlebot indexa páginas para a Pesquisa Google.
O processo funciona assim:
- O Googlebot enfileira URLs para rastreamento.
- Em seguida, ele busca os URLs com uma solicitação HTTP com base na cota de rastreamento.
- O Googlebot verifica o HTML em busca de links e coloca os links descobertos na fila para rastreamento.
- Em seguida, o Googlebot coloca a página na fila para renderização.
- Assim que possível, uma instância headless do Chromium renderiza a página, o que inclui a execução do JavaScript.
- O Googlebot usa o HTML renderizado para indexar a página.
Sua configuração técnica pode influenciar o processo de rastreamento, renderização e indexação. Por exemplo, tempos de resposta lentos ou erros do servidor podem afetar a cota de rastreamento. Outro exemplo seria a exigência de JavaScript para renderizar os links, o que pode resultar em uma descoberta mais lenta desses links.
Usar a detecção de recursos e tratar erros
A versão contínua do Googlebot tem muitos recursos novos, mas alguns deles ainda não têm suporte. Se você depender de recursos sem suporte ou não lidar adequadamente com erros, o Googlebot não poderá renderizar ou indexar seu conteúdo.
Vejamos um exemplo:
<body>
<script>
navigator.geolocation.getCurrentPosition(function onSuccess(position) {
loadLocalContent(position);
});
</script>
</body>
Em alguns casos, é possível que essa página não mostre conteúdo, porque o código não processa quando o usuário recusa a permissão ou quando a chamada getCurrentPosition retorna um erro. Por padrão, o Googlebot recusa solicitações de permissão como essa.
Esta é uma solução melhor:
<body>
<script>
if (navigator.geolocation) {
// this browser supports the Geolocation API, request location!
navigator.geolocation.getCurrentPosition(
function onSuccess(position) {
// we successfully got the location, show local content
loadLocalContent(position);
}, function onError() {
// we failed to get the location, show fallback content
loadGlobalContent();
});
} else {
// this browser does not support the Geolocation API, show fallback content
loadGlobalContent();
}
</script>
</body>
Se você tiver problemas para indexar seu site JavaScript, consulte nosso guia de solução de problemas para encontrar soluções.
Escolher a estratégia de renderização certa para seu app da Web
Atualmente, a estratégia de renderização padrão para apps de página única é a renderização do lado do cliente. O HTML carrega o JavaScript, que gera o conteúdo no navegador à medida que é executado.
Vamos analisar um app da Web que mostra uma coleção de imagens de gatos e usa JavaScript para renderizar inteiramente no navegador.
Se você for livre para escolher sua estratégia de renderização, considere a renderização pelo servidor ou a pré-renderização. Eles executam o JavaScript no servidor para gerar o conteúdo HTML inicial, o que pode melhorar o desempenho para usuários e rastreadores. Essas estratégias permitem que o navegador comece a renderizar o HTML assim que ele chega pela rede, tornando o carregamento da página mais rápido. A sessão de renderização no I/O ou a postagem do blog sobre renderização na Web (links em inglês) mostram como a renderização e a hidratação do lado do servidor podem melhorar o desempenho e a experiência do usuário em apps da Web e fornece mais exemplos de código para essas estratégias.
Se você estiver procurando uma solução alternativa para ajudar rastreadores que não executam JavaScript ou se não for possível fazer mudanças na sua base de código de front-end, considere usar a renderização dinâmica, que pode ser testada neste codelab. No entanto, você não terá a experiência do usuário nem os benefícios de desempenho que teria com a renderização ou a pré-renderização do lado do servidor, porque a renderização dinâmica só veicula HTML estático aos rastreadores. Isso é uma solução temporária em vez de uma estratégia de longo prazo.
Teste suas páginas
Embora a maioria das páginas geralmente funcione bem com o Googlebot, recomendamos testá-las regularmente para garantir que o conteúdo esteja disponível para o Googlebot e que não haja problemas. Há várias ferramentas ótimas para ajudar você a fazer isso.
A maneira mais fácil de fazer uma verificação rápida de uma página é o teste de compatibilidade com dispositivos móveis. Além de mostrar problemas de compatibilidade com dispositivos móveis, ele também fornece uma captura de tela do conteúdo acima da dobra e do HTML renderizado como o Googlebot o vê.
Você também pode descobrir se há problemas de carregamento de recursos ou erros de JavaScript.
Recomendamos verificar seu domínio no Google Search Console a fim de usar a ferramenta de inspeção de URL para saber mais sobre o estado de rastreamento e indexação de um URL, receber mensagens quando o Search Console detectar problemas e conferir mais detalhes sobre o desempenho do site na Pesquisa Google.
Para dicas e orientações gerais de SEO, use as auditorias de SEO no Lighthouse. Para integrar auditorias de SEO ao seu conjunto de testes, use a CLI do Lighthouse ou o bot de CI do Lighthouse.
Essas ferramentas ajudam a identificar, depurar e corrigir problemas com páginas na Pesquisa Google e devem fazer parte da sua rotina de desenvolvimento.
Fique por dentro e entre em contato
Para ficar por dentro dos comunicados e das mudanças na Pesquisa Google, fique de olho no Blog para webmasters, no canal do YouTube para webmasters do Google e na nossa conta do Twitter (links em inglês). Confira também nosso guia para desenvolvedores da Pesquisa Google e nossa série de vídeos sobre SEO em JavaScript para saber mais.