Torne seu site JavaScript amigável para SEO com essas soluções
Publicados: 2022-01-19A maioria dos sites modernos contém JavaScript, tornando-os dinâmicos e interativos. Embora os bots de mecanismos de pesquisa sejam bastante inteligentes, eles ainda podem não renderizar muito do conteúdo JavaScript, afetando a classificação da página.
O conteúdo JavaScript depende muito de como seu site renderiza o código.
Por exemplo, na renderização do lado do servidor , o servidor contém o conteúdo do site. Mediante solicitação, o navegador recebe o HTML totalmente renderizado.
No entanto, na renderização do lado do cliente , o JavaScript é renderizado pelo navegador usando DOM.
A terceira opção de renderização é a renderização dinâmica , onde o conteúdo renderizado no lado do cliente vai para o navegador, enquanto o conteúdo renderizado no lado do servidor vai para o(s) mecanismo(s) de pesquisa.
As técnicas de renderização afetam como o JS é renderizado e, portanto, as classificações da página.
Para garantir que todo o código JS do seu site seja renderizado, você deve seguir as práticas adequadas de JavaScript SEO. Mas primeiro, vamos entender o que é SEO JavaScript.
O que é SEO JavaScript?
JavaScript SEO facilita para os mecanismos de pesquisa rastrear e indexar o código JavaScript (conteúdo dinâmico) de um site (ou página da web). O Google ou qualquer outro mecanismo de pesquisa processa o JavaScript em três etapas, ou seja, rastrear, renderizar e indexar. Para que o Google faça tudo isso, o conteúdo JavaScript deve ser amigável para SEO, ou seja, visível e disponível.
Como o Google processa o conteúdo JavaScript em uma página
Aqui estão as etapas que o Googlebot segue para processar JavaScript:
- Busca um URL da fila de rastreamento por meio da solicitação HTTP
- Verifica o arquivo robots.txt em busca de URLs que o site não permite rastrear
- Ignora os URLs 'não permitidos', analisa a resposta de outros URLs e os adiciona à fila de rastreamento
- Enfileira as páginas para renderização, exceto aquelas marcadas para não serem indexadas
- O Chromium renderiza a página, executa o JavaScript e indexa a página
- Analisa o HTML renderizado novamente para links
- Enfileira os URLs para rastreamento
Quando o Google não indexa o conteúdo JavaScript?
O Google pode indexar JavaScript quando implementado corretamente. Por exemplo, se alguns de seus arquivos JS e CSS estiverem ocultos, o Google pode não conseguir rastrear o site corretamente. Da mesma forma, se você tiver links no HTML bruto que não estão presentes no HTML renderizado, o Google poderá evitar que esses links sejam rastreados ou indexados.
Além disso, se o JavaScript não estiver diretamente incorporado ao HTML, o Google precisará fazer o download do arquivo para execução. Além disso, os mecanismos de pesquisa podem ter uma versão em cache de uma página da Web (para melhor desempenho) e o JavaScript na página pode não estar sincronizado com ela.
Como todo código JavaScript deve ser lido, o uso excessivo de JavaScript pode diminuir a velocidade da página ou causar erros de tempo limite.
Por que JavaScript SEO é importante?
JavaScript SEO é importante porque afeta muitos elementos na página e fatores de classificação que o Google (ou mecanismos de pesquisa) verifica para SEO:
| Elemento na página | Possível problema de SEO | Possível solução de SEO |
| Conteúdo renderizado | Os mecanismos de pesquisa (como o Google) não podem renderizar sua página se seus recursos estiverem bloqueados no arquivo robots.txt do seu site. Além disso, o Google não pode indexar ou renderizar arquivos JS e CSS, que estão bloqueados ou ocultos. | Reduza o JavaScript no conteúdo principal da página, siga abordagens alternativas para renderização do lado do cliente, como renderização do lado do servidor, renderização dinâmica, renderização híbrida (combinação do lado do cliente e do lado do servidor) |
| Links | Se alguns links forem internos ou o JavaScript gerar os links para um URL quando o usuário clicar nele, o Google não poderá descobrir esses links. | Use links âncora com o atributo href, textos âncora descritivos para os links. Pseudolinks como as tags <div> e <span> não são rastreados |
| Metadados | A menos que o site use pacotes Node.js como vue-meta, os mecanismos de pesquisa podem estar rastreando o mesmo ou, pior, sem metadados para cada visualização ou página. | Use pacotes Node.js como react-helmet, vue-meta, react-meta-tags |
| Imagens de carregamento lento | O rastreador do mecanismo de pesquisa não seleciona nenhum conteúdo marcado para carregamento lento. O mecanismo de pesquisa não pode rolar para o conteúdo e, portanto, alguns conteúdos podem nunca ser renderizados. | Use a API IntersectionObserver, que entende a visibilidade e a posição dos elementos DOM assim que estiverem disponíveis. Você também pode usar 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 para carregar, o que pode afetar sua classificação de pesquisa. | Adicione o código JS crítico inline e adie o código JS não crítico até que o conteúdo principal seja renderizado, reduzindo o código JS geral. |
Práticas recomendadas para SEO JavaScript
Seguindo algumas das práticas recomendadas, podemos fazer com que os mecanismos de pesquisa rastreiem e renderizem melhor as páginas:
Adicione links e imagens de acordo com os padrões da web definidos
Adicione todos os links usando a tag ahref em vez de onclick , #pageurl ou window.location.href='/page-url . O Google pode rastrear facilmente os links e segui-los.
<a href=”http://geekflare.com”>Welcome to Geek world</a> Da mesma forma, adicione imagens usando a tag img src e não a tag img data-src :
<img src=”myimg.png” />Prefira a renderização do lado do servidor
Certifique-se de que o conteúdo do seu site esteja disponível no servidor, além do navegador do usuário.
Certifique-se de que seu HTML renderizado tenha todo o conteúdo importante que você deseja mostrar
O HTML renderizado deve ter o título correto, meta robôs, meta descrições, imagens, dados estruturados e tags canônicas.
Tornando seu site JavaScript amigável para SEO
Para testar a implementação do JavaScript SEO em sua página da web, você pode seguir as etapas abaixo:
- Saiba quanto JavaScript seu site usa: Para isso, você pode simplesmente desabilitar o JavaScript em seu navegador. Se você não vir muito conteúdo, isso significa que seu site depende em grande parte do JavaScript.
- Verifique se o Googlebot obtém todo o conteúdo e tags importantes: você pode usar a ferramenta de teste de compatibilidade com dispositivos móveis do Google ou a ferramenta de teste de pesquisa aprimorada para verificar como o Googlebot usa o HTML bruto para renderizar o conteúdo.
- Você também pode usar extensões do Chrome, como View Rendered Source, para entender como o JavaScript altera a página e compara o HTML de origem e o renderizado.
- Você pode verificar as tags importantes (título, meta descrição, etc.) no HTML renderizado usando a extensão SEO Pro Chrome.
Conclusão
Neste artigo, aprendemos sobre como o JavaScript pode tornar o manuseio de SEO um pouco complexo e as abordagens para resolver os possíveis problemas causados pela adição de muito JavaScript ao seu código.
Também vimos algumas práticas recomendadas e ferramentas para tornar seu site JavaScript amigável para SEO. Outras ótimas ferramentas que ajudam o Google a reconhecer e rastrear seu conteúdo dinâmico são Prerender, AngularJS e Huckabuy.
Você também pode verificar algumas das melhores maneiras de diminuir o tempo de carregamento do site.