A maioria dos websites contemporâneos incorpora JavaScript, o que os torna dinâmicos e interativos. Apesar de os robôs dos motores de busca serem bastante sofisticados, eles podem não conseguir interpretar todo o conteúdo gerado por JavaScript, o que afeta o posicionamento da página.
A forma como o seu site renderiza o código JavaScript tem um grande impacto na apresentação do conteúdo.
Por exemplo, na renderização do lado do servidor, o conteúdo do site é gerado no servidor. Quando um navegador faz um pedido, recebe o HTML já completamente renderizado.
Em contraste, na renderização do lado do cliente, o JavaScript é processado diretamente pelo navegador através da manipulação do DOM.
A terceira opção, a renderização dinâmica, envia o conteúdo processado no lado do cliente para os navegadores, enquanto o conteúdo processado no lado do servidor é direcionado aos motores de busca.
As diferentes abordagens de renderização têm influência na forma como o JavaScript é interpretado e, por consequência, no posicionamento das páginas.
Para garantir que todo o código JavaScript do seu site seja corretamente processado, é fundamental implementar as melhores práticas de SEO para JavaScript. Contudo, antes de mais nada, vamos entender o conceito de SEO para JavaScript.
O que é SEO para JavaScript?
SEO para JavaScript consiste em otimizar o conteúdo dinâmico de um site (ou página web) para que os motores de busca consigam rastrear e indexar o código JavaScript. O Google, assim como outros motores de busca, processa o JavaScript em três etapas: rastreamento, renderização e indexação. Para que o Google possa completar estas etapas com sucesso, o conteúdo JavaScript precisa ser amigável para SEO, isto é, visível e acessível.
Como o Google processa o conteúdo JavaScript numa página
O Googlebot segue os seguintes passos no processamento do JavaScript:
- Obtém um URL da fila de rastreamento por meio de uma requisição HTTP.
- Verifica o arquivo robots.txt para identificar URLs que o site não permite rastrear.
- Ignora URLs ‘não permitidos’, analisa as respostas dos outros URLs e os adiciona à fila de rastreamento.
- Coloca as páginas na fila para renderização, exceto as marcadas para não indexação.
- O Chromium renderiza a página, executa o JavaScript e indexa a página.
- Analisa novamente o HTML renderizado em busca de links.
- Adiciona esses URLs à fila para rastreamento.
Quando o Google não indexa o conteúdo JavaScript?
O Google consegue indexar o JavaScript quando este é implementado corretamente. Contudo, se certos arquivos JS e CSS estiverem inacessíveis, o Google pode não conseguir rastrear o site adequadamente. Da mesma forma, se existirem links no HTML original que não estiverem presentes no HTML renderizado, o Google pode evitar que sejam rastreados ou indexados.
Além disso, se o JavaScript não estiver diretamente incluído no HTML, o Google precisa fazer o download do arquivo para que ele possa ser executado. Os motores de busca também podem ter versões em cache das páginas web (para melhorar o desempenho) e, nesses casos, o JavaScript na página pode não estar sincronizado com a versão em cache.
Como todo código JavaScript necessita ser interpretado, o uso excessivo de JavaScript pode tornar a página mais lenta ou mesmo causar erros de timeout.
Por que o SEO para JavaScript é importante?
O SEO para JavaScript é fundamental porque influencia vários aspetos da página e fatores de posicionamento que o Google (ou outros motores de busca) analisam para fins de SEO:
| Elemento na página | Possível problema de SEO | Possível solução de SEO |
| Conteúdo renderizado | Os motores de busca (como o Google) podem não conseguir renderizar a sua página se os seus recursos estiverem bloqueados no arquivo robots.txt do seu site. O Google também não indexa ou renderiza arquivos JS e CSS que estejam bloqueados ou inacessíveis. | Reduza a quantidade de JavaScript no conteúdo principal da página. Adote abordagens alternativas para a renderização do lado do cliente, como a renderização do lado do servidor, renderização dinâmica ou renderização híbrida (combinação do lado do cliente e do lado do servidor). |
| Links | Se alguns links forem internos ou se o JavaScript gerar links para um URL apenas quando o utilizador clica, o Google pode não detetar esses links. | Utilize links âncora com o atributo href e textos âncora descritivos. Pseudo-links como as tags <div> e <span> não são rastreados. |
| Metadados | A menos que o site use pacotes Node.js como o vue-meta, os motores de busca podem estar a rastrear metadados duplicados ou, pior ainda, sem metadados para cada visualização ou página. | Use pacotes Node.js como react-helmet, vue-meta, react-meta-tags. |
| Imagens com carregamento lento | O rastreador do motor de busca não seleciona conteúdo marcado para carregamento lento. O motor de busca não consegue deslocar-se até ao conteúdo e, por isso, alguns conteúdos podem nunca ser renderizados. | Use a API IntersectionObserver, que compreende a visibilidade e a posição dos elementos DOM assim que ficam disponíveis. Em alternativa, pode utilizar o recurso de carregamento lento nativo do navegador (Chrome). |
| Tempos de carregamento da página | Uma página com muito conteúdo JavaScript pode demorar mais tempo a carregar, o que pode afetar negativamente o seu posicionamento na pesquisa. | Adicione o código JS crítico inline e adie a execução do código JS não crítico até que o conteúdo principal esteja renderizado, reduzindo assim a quantidade total de código JS. |
Práticas recomendadas para SEO em JavaScript
Seguindo algumas práticas recomendadas, podemos otimizar o rastreamento e a renderização de páginas por parte dos motores de busca:
Adicione links e imagens seguindo as normas web estabelecidas
Adicione todos os links usando a tag <a href> em vez de onclick, #pageurl ou window.location.href=’/page-url’. O Google pode rastrear e seguir facilmente estes links.
<a href="http://etechpt.com.com">Bem-vindo ao mundo Geek</a>
Da mesma forma, adicione imagens usando a tag <img src> em vez da tag <img data-src>:
<img src="myimg.png" />
Priorize a renderização do lado do servidor
Garanta que o conteúdo do seu site esteja disponível no servidor, e não apenas no navegador do utilizador.
Verifique se o seu HTML renderizado tem todo o conteúdo importante que pretende apresentar
O HTML renderizado deve conter o título correto, meta robôs, meta descrições, imagens, dados estruturados e tags canônicas.
Como tornar o seu site JavaScript amigável para SEO
Para testar a implementação de SEO para JavaScript na sua página web, siga os seguintes passos:
- Avalie a quantidade de JavaScript que o seu site utiliza: Para isso, desative o JavaScript no seu navegador. Se observar uma redução significativa no conteúdo, é sinal de que o seu site depende muito do JavaScript.
- Verifique se o Googlebot consegue obter todo o conteúdo e tags importantes: Utilize a Ferramenta de Teste de Compatibilidade com Dispositivos Móveis do Google ou a ferramenta de teste de pesquisa aprimorada para avaliar como o Googlebot utiliza o HTML original para renderizar o conteúdo.
- Utilize extensões do Chrome como o Ver fonte renderizada para compreender como o JavaScript modifica a página e comparar o HTML de origem com o HTML renderizado.
- Verifique as tags essenciais (título, meta descrição, etc.) no HTML renderizado usando a Extensão SEO Pro Chrome.
Conclusão
Neste artigo, analisámos como o JavaScript pode tornar a gestão de SEO mais complexa e as abordagens para resolver os potenciais problemas resultantes da adição excessiva de JavaScript ao seu código.
Também explorámos algumas práticas recomendadas e ferramentas para tornar o seu site JavaScript amigável para SEO. Outras ferramentas que auxiliam o Google no reconhecimento e rastreamento do seu conteúdo dinâmico são o Prerender, AngularJS e Huckabuy.
Pode também consultar algumas das melhores práticas para diminuir o tempo de carregamento do seu site.
Gostou da leitura do artigo? Que tal partilhar com o mundo?