Tudo o que você precisa saber sobre SEO para JavaScript

Pergunte a qualquer programador e eles lhe dirão o que pensam sobre JavaScript.

Desde o momento em que foi lançado, JavaScript (JS) tem sido a linguagem de programação mais popular usada por desenvolvedores da web em todo o mundo. Uma pesquisa recente do Stack Overflow entre desenvolvedores da Web revela que JavaScript é a linguagem de programação mais preferida por oito anos consecutivos.

O JS permite que os desenvolvedores da Web criem aplicativos da Web em larga escala com facilidade. Possui uma capacidade excepcional de atualizar páginas dinamicamente e torná-las mais interativas. Além disso, estruturas JavaScript como AngularJS, ReactJS, Vue e NodeJS reduzem significativamente a quantidade de tempo e esforço necessários para desenvolver sites baseados em JS. Não é de admirar que o JavaScript seja a base de 96% dos sites em todo o mundo.

No entanto, os sites baseados em JS parecem ter uma relação de amor e ódio com o Google. O JavaScript pode controlar e alterar facilmente o HTML para tornar as páginas da Web dinâmicas e interativas, melhorando assim o UX do site. No entanto, os mecanismos de pesquisa acham difícil lidar com JS, deixando a maior parte do conteúdo JavaScript não indexado.

Vamos nos aprofundar um pouco mais no motivo pelo qual o JavaScript torna o trabalho do Google mais difícil e o que você pode fazer para tornar seu conteúdo JS amigável aos bots.

Como o Javascript afeta o SEO?

JavaScript permite que as páginas sejam carregadas rapidamente, oferece uma interface rica e é fácil de implementar; no entanto, a fluidez do navegador muda com base na interação do usuário, dificultando para os mecanismos de busca entender a página e associar um valor ao conteúdo.

Os mecanismos de pesquisa têm suas limitações ao renderizar páginas da Web que carregam conteúdo JavaScript. O Google realiza um rastreamento inicial da página e indexa o que encontra. À medida que os recursos estão disponíveis, os bots voltam a renderizar JS nessas páginas. Isso significa que o conteúdo e os links baseados em JavaScript correm o risco de não serem vistos pelos mecanismos de busca, prejudicando potencialmente o SEO do site.

Fonte

No entanto, o Google sabe que o JavaScript veio para ficar! Como resultado, a gigante dos mecanismos de busca dedicou grande parte de seus recursos para ajudar os profissionais de busca a otimizar seus sites baseados em JS.

Confira esta série de vídeos sobre JavaScript SEO do Google que pode ajudar a tornar seu conteúdo JS mais detectável online.

Os especialistas em SEO precisam organizar suas páginas da Web baseadas em JS em um formato que o Google aprecie. Com um pouco de compreensão de como os mecanismos de pesquisa processam o conteúdo JS, o JavaScript e o SEO podem trabalhar juntos para aumentar a classificação do seu site.

Como os mecanismos de pesquisa processam o JavaScript?

Os bots do Google processam JS de maneira diferente de uma página não JS. Os bots os processam em três fases, ou seja, rastreamento, indexação e renderização. Essas fases podem ser facilmente compreendidas graças ao gráfico do Google Developers abaixo:

Fonte

Rastejando

Esta fase é sobre a descoberta do seu conteúdo. É um processo complicado, envolvendo subprocessos, ou seja, conjuntos de sementes, enfileiramento e agendamento de rastreamento, importância de URL e outros.

Para começar, os bots do Google enfileiram as páginas para rastreamento e renderização. Os bots usam o módulo de análise para buscar páginas, seguir links nas páginas e renderizar até o ponto em que as páginas são indexadas. O módulo não apenas renderiza as páginas, mas também analisa o código-fonte e extrai as URLs nos snippets <a href="…”>.

Os bots verificam o arquivo robots.txt para ver se o rastreamento é permitido ou não. Se a URL estiver marcada como não permitida, os bots a ignoram. Portanto, é fundamental verificar o arquivo robots.txt para evitar erros.

Renderização

O processo de exibição do conteúdo, modelos e outros recursos de um site para o usuário é chamado de renderização. Há renderização do lado do servidor e renderização do lado do cliente.

Renderização do lado do servidor (SSR)

Como o nome sugere, nesse tipo de renderização as páginas são preenchidas no servidor. Cada vez que o site é acessado, a página é renderizada no servidor e enviada ao navegador.

Em outras palavras, quando um usuário ou bot acessa o site, ele recebe o conteúdo como marcação HTML. Isso geralmente ajuda o SEO, pois o Google não precisa renderizar o JS separadamente para acessar o conteúdo. O SSR é o método de renderização tradicional e pode ser caro quando se trata de largura de banda.

Renderização do lado do cliente

A renderização do lado do cliente é um tipo de renderização bastante recente que permite aos desenvolvedores construir seus sites inteiramente renderizados no navegador com JavaScript. Assim, em vez de ter uma página HTML separada por rota, a renderização do lado do cliente permite que cada rota seja criada dinamicamente diretamente no navegador. Embora esse tipo de renderização seja inicialmente lento, pois faz várias rodadas para o servidor, uma vez que as solicitações são concluídas, a experiência por meio da estrutura JS é rápida.

Voltando ao que acontece depois que uma página é rastreada, os bots identificam as páginas que precisam ser renderizadas e as adicionam à fila de renderização, a menos que a metatag robots no código HTML bruto diga ao Googlebot para não indexar a página.

As páginas ficam na fila de renderização por alguns segundos, mas podem levar algum tempo, dependendo da quantidade de recursos disponíveis.

Fonte

Quando os recursos permitem, o Google Web Rendering Service (WRS) processa, analisa e compila as páginas e executa o JavaScript na página. O bot analisa novamente o HTML renderizado em busca de links e enfileira as URLs que encontra para rastreamento. O HTML renderizado é usado para indexar a página.

Indexação

Depois que o WRS busca os dados de APIs e bancos de dados externos, o indexador de cafeína no Google pode indexar o conteúdo. Essa fase envolve analisar a URL, entender o conteúdo das páginas e sua relevância e armazenar as páginas descobertas no índice.

Como otimizar JavaScript para SEO

JavaScript, quando implementado incorretamente, pode arruinar seu SEO. Siga estas práticas recomendadas de Javascript SEO para melhorar a classificação do seu site.

Seja persistente com seus esforços de SEO na página

Todas as regras de SEO na página que otimizam sua página para ajudá-los a classificar nos mecanismos de pesquisa ainda se aplicam. Otimize suas tags de título, meta descrições, atributos alt em imagens e meta tags de robôs. Títulos e meta descrições exclusivos e descritivos ajudam os usuários e os mecanismos de pesquisa a identificar facilmente o conteúdo. Preste atenção à intenção de pesquisa e ao posicionamento estratégico de palavras-chave relacionadas semanticamente.

Além disso, é bom ter uma estrutura de URL amigável para SEO. Em alguns casos, os sites implementam uma alteração pushState na URL, confundindo o Google quando está tentando encontrar a canônica. Certifique-se de verificar os URLs para esses problemas.

Certifique-se de que seu JavaScript apareça na árvore DOM

A renderização de JavaScript funciona quando o DOM de uma página foi carregado o suficiente. O DOM ou Document Object Model mostra a estrutura do conteúdo da página e a relação de cada elemento com o outro. Você pode encontrá-lo no "Inspecionar elemento" do navegador no código da página. DOM é a base da página gerada dinamicamente.

Se seu conteúdo pode ser visto no DOM, é provável que seu conteúdo esteja sendo analisado pelo Google. A verificação do DOM ajudará você a determinar se suas páginas estão ou não sendo acessadas pelos bots do mecanismo de pesquisa.

Os bots pulam a renderização e a execução de JS se a tag meta robots inicialmente contiver noindex. O Googlebot não dispara eventos em uma página. Se o conteúdo for adicionado à página com a ajuda de JS, isso deve ser feito após o carregamento da página. Se o conteúdo for adicionado ao HTML ao clicar no botão, ao rolar a página e assim por diante, ele não será indexado.

Por fim, ao usar dados estruturados, use JavaScript para gerar o JSON-LD necessário e injetá-lo na página. Como um aparte, aprenda sobre os principais truques de SEO na página que você deve implementar desde o início.

Evite bloquear o acesso dos mecanismos de pesquisa ao conteúdo JS

Para evitar o problema de o Google não conseguir encontrar conteúdo JS, alguns webmasters usam um processo chamado cloaking que fornece o conteúdo JS aos usuários, mas o oculta dos rastreadores. No entanto, esse método é considerado uma violação das Diretrizes para webmasters do Google e você pode ser penalizado por isso. Em vez disso, trabalhe para identificar os principais problemas e tornar o conteúdo JS acessível aos mecanismos de pesquisa.

Às vezes, o host do site pode ser bloqueado involuntariamente, impedindo o Google de ver o conteúdo JS. Por exemplo, se o seu site tiver alguns domínios filho que servem a propósitos diferentes, cada um deve ter um robots.txt separado porque os subdomínios são tratados como um site separado. Nesse caso, você precisa ter certeza de que nenhuma dessas diretivas do robots.txt está bloqueando os mecanismos de pesquisa de acessar os recursos necessários para renderização.

Use códigos de status HTTP relevantes

Os rastreadores do Google usam códigos de status HTTP para identificar problemas ao rastrear uma página. Portanto, você deve usar um código de status significativo para informar aos bots se uma página não deve ser rastreada ou indexada. Por exemplo, você pode usar um status HTTP 301 para informar aos bots que uma página foi movida para um novo URL, permitindo que o Google atualize seu índice de acordo.

Consulte esta lista de códigos de status HTTP e saiba quando usá-los:

Fonte

Corrigir conteúdo duplicado

Quando o JavaScript é usado para sites, pode haver URLs diferentes para o mesmo conteúdo. Isso causa problemas de conteúdo duplicado, geralmente causados ​​por letras maiúsculas, IDs ou parâmetros com IDs. Certifique-se de encontrar essas páginas, escolha o URL original/preferido que você deseja indexar e defina tags canônicas para evitar que os mecanismos de pesquisa fiquem confusos.

Corrigir conteúdo e imagens com carregamento lento

A velocidade do site é fundamental para SEO. O carregamento lento é uma prática recomendada de UX que adia o carregamento de conteúdo não crítico ou não visível, reduzindo assim o tempo de carregamento inicial da página. Mas, além de fazer as páginas carregarem mais rápido, você também precisa garantir que seu conteúdo seja acessível aos rastreadores dos mecanismos de pesquisa. Esses rastreadores não executam seu JavaScript ou rolam a página para direcionar conteúdo de carregamento lento, afetando negativamente seu SEO.

Além disso, as pesquisas de imagens também são uma fonte de tráfego orgânico adicional. Portanto, se você tiver imagens com carregamento lento, os mecanismos de pesquisa não as selecionarão. Embora o carregamento lento seja ótimo para os usuários, ele precisa ser feito com cuidado para evitar que os bots percam conteúdo potencialmente crítico.

Use ferramentas JS SEO

Há uma abundância de ferramentas disponíveis que podem ajudá-lo a identificar e corrigir problemas com o código JavaScript. Aqui estão alguns que você pode usar a seu favor.

• Recurso de inspeção de URL. Esta ferramenta é encontrada no Google Search Console. Ele pode mostrar se os rastreadores do Google conseguiram indexar ou rastrear suas páginas.
• Rastreadores de mecanismos de pesquisa. Essas ferramentas permitem que você teste e monitore efetivamente como os mecanismos de pesquisa rastreiam suas páginas.
• Insights de velocidade da página. O Page Speed ​​Insights do Google compartilha detalhes sobre o desempenho do seu site e oferece recomendações sobre como ele pode ser melhorado.
• Local: Comando. Essa ferramenta ajuda você a ver se o Google indexou corretamente seu conteúdo. Tudo o que você precisa fazer é digitar este comando no Google - site: [URL do site] “snippet de texto ou consulta”

Desafios de SEO JavaScript

Até agora você tem uma boa ideia de como os mecanismos de pesquisa processam o conteúdo JavaScript e o que você pode fazer para definir seu site no caminho mais rápido para o sucesso do SEO. No entanto, existem alguns outros desafios enfrentados por especialistas em SEO e webmasters. A maioria deles decorre dos erros cometidos por eles ao otimizar seus sites baseados em JavaScript

1. Arquivos JavaScript e CSS não minificados

Se você estiver usando ferramentas de SEO para auditar seu site JS, provavelmente encontrará um aviso sobre problemas com Javascript e CSS não minificados. Ao longo de um período de tempo, os arquivos JS e CSS são sobrecarregados por linhas de código desnecessárias, espaços em branco, comentários no código-fonte e hospedagem em servidores externos, tornando seu site lento. Certifique-se de se livrar das linhas desnecessárias, espaços em branco e comentários para reduzir o tempo de carregamento das páginas, melhorar a taxa de engajamento e impulsionar o SEO.

2. Uso de hash nas URLs

Lembre-se do que John Mueller disse sobre URLs ruins em um evento de SEO?

“Para nós, se virmos um tipo de hash lá, isso significa que o resto provavelmente é irrelevante. Na maioria das vezes, abandonaremos isso quando tentarmos indexar o conteúdo…”

No entanto, vários sites baseados em JS geram URLs com um hash. Isso pode ser desastroso para o seu SEO. Certifique-se de que seu URL seja compatível com o Google. Definitivamente, não deve ser assim:

www.example.com/#/about -us OU

www.example.com/about#us

3. Não verificar a estrutura do link interno

O Google exige links <a href> adequados para encontrar URLs em seu site. Além disso, se os links forem adicionados ao DOM após clicar em um botão, os bots não conseguirão vê-los. A maioria dos webmasters perde esses pontos, fazendo com que seu SEO sofra.

Tenha o cuidado de fornecer o link 'href' tradicional, tornando-os acessíveis para os bots. Verifique seus links usando a ferramenta de auditoria de sites SEOprofiler para melhorar a estrutura de links internos do seu site.

Confira esta apresentação de Tom Greenway durante a conferência Google I/O para orientação sobre uma estrutura de link adequada:

Conclusão

Sem dúvida, o JavaScript expande a funcionalidade dos sites. No entanto, JavaScript e mecanismos de pesquisa nem sempre andam juntos. O JavaScript afeta a maneira como os mecanismos de pesquisa rastreiam e indexam um site, afetando sua classificação. Portanto, os profissionais de pesquisa devem entender como os bots dos mecanismos de pesquisa processam o conteúdo JS e tomar as medidas necessárias para garantir que o JavaScript se encaixe bem em sua estratégia de SEO.

Se você tem um site baseado em JS e não consegue encontrar seu conteúdo no Google, é hora de resolver os problemas. Use as informações e dicas compartilhadas neste post para otimizar o JavaScript para SEO e aumentar seus retornos.