Princípios básicos de SEO em JavaScript

O JavaScript é uma parte importante da plataforma da Web porque conta com muitos recursos que a transformam em uma plataforma eficiente para aplicativos. Fazer com que os aplicativos da Web com tecnologia JavaScript possam ser detectados pela Pesquisa Google é importante para encontrar novos usuários e recuperar o engajamento dos existentes quando eles pesquisarem o conteúdo oferecido pelo seu aplicativo. Embora a Pesquisa Google execute JavaScript com uma versão contínua do Chromium, há algumas coisas que você pode otimizar.

Este guia descreve como a Pesquisa Google processa o JavaScript e indica práticas recomendadas de melhoria dos apps da Web JavaScript para a Pesquisa Google.

Como o Googlebot processa JavaScript

O Googlebot processa apps da Web JavaScript em três fases principais:

  1. Rastreamento
  2. Renderização
  3. Indexação

O Googlebot rastreia, renderiza e indexa as páginas.

O Googlebot pega um URL da fila de rastreamento,
       o rastreia e o passa para a etapa de processamento. A etapa de processamento extrai os links, que
       voltam à fila de rastreamento, e coloca a página na fila de renderização. A página vai da fila para o
       renderizador, que devolve o HTML renderizado para o processamento. Então o conteúdo é indexado,
       e os links são extraídos e adicionados à fila de rastreamento.

Quando o Googlebot busca um URL da fila de rastreamento por meio de uma solicitação HTTP, primeiro ele verifica se você permite o rastreamento. O Googlebot lê o arquivo robots.txt. Quando ele marca o URL como não permitido, o Googlebot pula a solicitação HTTP desse URL e o ignora.

Depois o Googlebot analisa a resposta de outros URLs no atributo href dos links HTML e os adiciona à fila de rastreamento. Para impedir que links sejam detectados, use o mecanismo nofollow.

Rastrear um URL e analisar a resposta HTML funciona bem para sites clássicos ou páginas renderizadas no servidor, em que o HTML na resposta HTTP inclui todo o conteúdo. Alguns sites JavaScript usam o modelo de shell do app, em que o HTML inicial não inclui o conteúdo em si, e o Googlebot precisa executar JavaScript para acessar os recursos da página que ele gera.

O Googlebot forma uma fila com todas as páginas a serem renderizadas, a menos que um cabeçalho ou metatag robots diga para não indexar a página. Ela pode ficar nessa fila por alguns segundos ou mais. Quando os recursos do Googlebot permitem, uma versão headless do Chromium renderiza a página e executa o JavaScript. O Googlebot analisa novamente o HTML renderizado em busca de links e forma uma fila com os URLs encontrados para rastreamento. Ele também usa o HTML renderizado para indexar a página.

A renderização prévia ou no servidor ainda é uma ótima ideia, porque deixa os sites mais rápidos para usuários e rastreadores, e nem todos os bots executam JavaScript.

Descreva sua página com títulos e snippets exclusivos

Os títulos descritivos e exclusivos e as metadescrições relevantes ajudam os usuários a identificar rapidamente o melhor resultado para os próprios objetivos. Explicamos como fazer bons títulos e descrições nas nossas diretrizes.

Você pode usar o JavaScript para definir ou alterar a metadescrição e o título.

Escreva código compatível

Os navegadores contam com muitas APIs, e o JavaScript é uma linguagem em rápida evolução. O Googlebot tem algumas limitações de compatibilidade com APIs e recursos JavaScript. Para garantir que seu código seja compatível com o Googlebot, siga nossas diretrizes para solução de problemas com JavaScript.

Use códigos de status HTTP significativos

O Googlebot usa códigos de status HTTP para descobrir se algo deu errado ao rastrear a página.

Use um código de status significativo para informar ao Googlebot que o conteúdo não pode ser rastreado ou indexado, como 404 para páginas não encontradas ou 401 para aquelas protegidas por login. Você pode usar códigos de status HTTP para avisar ao Googlebot que uma página foi movida para um novo URL. Assim ele atualiza o índice.

Veja uma lista de códigos de status HTTP e casos de uso:

Status HTTP Uso
301 / 302 A página foi movida para um novo URL.
401 / 403 A página não está disponível devido a problemas de permissão.
404 / 410 A página não está mais disponível.
5xx Ocorreu um erro no servidor.

Use as metatags robots com cuidado

Você pode impedir que o Googlebot indexe uma página ou siga links por meio da metatag robots. Por exemplo, adicionar a seguinte metatag à parte superior da página impede que o Googlebot a indexe:

<!-- Googlebot won't index this page or follow links on this page -->
<meta name="robots" content="noindex, nofollow">

Você pode usar o JavaScript para adicionar uma metatag robots a uma página ou alterar o conteúdo correspondente. O código de exemplo a seguir mostra como alterar a metatag robots com JavaScript para impedir a indexação da página atual caso uma chamada de API não retorne o conteúdo.

fetch('/api/products/' + productId)
  .then(function (response) { return response.json(); })
  .then(function (apiResponse) {
    if (apiResponse.isError) {
      // get the robots meta tag
      var metaRobots = document.querySelector('meta[name="robots"]');
      // if there was no robots meta tag, add one
      if (!metaRobots) {
        metaRobots = document.createElement('meta');
        metaRobots.setAttribute('name', 'robots');
        document.head.appendChild(metaRobots);
      }
      // tell Googlebot to exclude this page from the index
      metaRobots.setAttribute('content', 'noindex');
      // display an error message to the user
      errorMsg.textContent = 'This product is no longer available';
      return;
    }
    // display product information
    // ...
  });
    

Ao encontrar noindex na metatag robots antes de executar o JavaScript, o Googlebot não fará a renderização nem a indexação da página.

Corrija imagens e conteúdo de carregamento lento

As imagens podem demandar muita largura de banda e desempenho. Uma boa estratégia é usar carregamento lento para carregar imagens somente quando o usuário estiver prestes a vê-las. Para implementar o carregamento lento de forma otimizada para a pesquisa, siga nossas diretrizes.