Como Diagnose e Solve JavaScript SEO Issues em 6 Steps-Moz

É bastante comum que as empresas construam seus sites usando quadros de JavaScript modernos e bibliotecas como React, Angular ou Vue. É óbvio por agora que a web se afastou de simples HTML e entrou na era da JS.

Embora não haja nada inusitado com um negócio disposto a tirar proveito das mais recentes tecnologias, precisamos abordar a realidade estelar desta tendência: a maioria das migrações para frameworks JavaScript não estão sendo planejadas com usuários ou o tráfego orgânico em mente.

Vamos chamá-lo de JavaScript Paradox:

  • As grandes marcas saltam no trem hype do JavaScript após ouvir todo o zumbido sobre Frameworks JavaScript criando UXs incríveis.
  • Realidade revela que frameworks JavaScript são realmente complexas.
  • As grandes marcas açodam completamente as migrações para JavaScript. Eles perdem o tráfego orgânico e muitas vezes têm que cortar cantos em vez de criar essa incrível jornada de UX para seus usuários (mencionarei alguns exemplos neste artigo).
  • Já que não há como voltar atrás, os SEOs precisam aprender a lidar com websites JavaScript.

    Mas isso é mais fácil dito do que feito porque fazer websites de JavaScript bem sucedidos em mecanismos de busca é um desafio real tanto para desenvolvedores quanto para SEOs.

    Este artigo é destinado a ser um acompanhamento do meu abrangente Ultimate Guide to JavaScript SEO, e que tem como objetivo ser o mais fácil de seguir possível. Por isso, agarre-se uma xícara de café e vamos nos divertir-aqui estão seis passos para ajudá-lo a diagnosticar e resolver questões de JavaScript SEO.

    Etapa 1: Use a ferramenta de inspeção de URL para ver se o Google pode renderizar seu conteúdo

    A ferramenta de inspeção de URL (anteriormente Google Fetch e Render) é uma ótima ferramenta gratuita que permite verificar se o Google pode renderizar adequadamente suas páginas.

    A ferramenta de inspeção de URL requer que você tenha seu website conectado ao Google Search Console. Se você ainda não tiver uma conta, verifique Google’s Help pages.

    Abrir Google Search Console, em seguida, clique no botão de inspeção da URL.

    No campo form URL, digite a URL completa de uma página que você deseja auditar.

    Então clique em TEST LIVE URL.

    imagem14-09-2020-02-09-09

    Uma vez que o teste é feito, clique em VIEW TESTAR PAGE.

    E finalmente, clique na guia Screenshot para visualizar a página renderizada.

    Scroll down o screenshot para se certificar de que sua página web é renderizada adequadamente. Faça a si mesmo as seguintes perguntas:

    • É o conteúdo principal visível?
    • Pode o Google ver os comentários gerados pelo usuário?
    • Pode o Google acessar áreas como artigos e produtos similares?
    • Pode o Google ver outros elementos cruciais de sua página?

    imagem14-09-2020-02-09-13

    Por que o screenshot parece diferente do que eu vejo no meu navegador? Aqui estão algumas razões possíveis:

    • O Google encontrou tempos de timeouts enquanto renderia.
    • Alguns erros ocorreram enquanto renderia. Você provavelmente usou alguns recursos que não são suportados pelo Google Web Rendering Service (o Google usa o Chrome 41 de quatro anos para renderização web, que não suporta muitos recursos modernos).
    • Você bloqueou arquivos JavaScript cruciais para o Googlebot.

    Etapa 2: Certifique-se de não bloquear arquivos JavaScript por engano

    Se o Google não puder renderizar sua página adequadamente, você deve se certificar de que não bloqueou importantes arquivos JavaScript para o Googlebot em robots.txt

    TL; DR: O que é robots.txt?

    É um arquivo de texto simples que instrui o Googlebot ou qualquer outro bot do mecanismo de busca se eles estiverem autorizados a solicitar uma página / recurso.

    Felizmente, a ferramenta de Inspeção de URL aponta todos os recursos de uma página renderizada que estão bloqueados por robots.txt.

    Mas como você pode dizer se um recurso bloqueado é importante do ponto de renderização da renderização?

    Você tem duas opções: Basic e Advanced.

    Basic

    Na maioria dos casos, pode ser uma boa ideia simplesmente perguntar aos seus desenvolvedores sobre isso. Eles criaram seu website, então eles devem conhecê-lo bem.

    Obviamente, se o nome de um script for chamado content.js ou productListing.js, provavelmente ele é relevante e não deve ser bloqueado.

    Infelizmente, como por enquanto, o URL Inspection não informa sobre a gravidade de um arquivo JS bloqueado. O Google Fetch e o Render anteriores tinham tal opção:

    Avançado

    Agora, podemos usar o Chrome Developer Tools para isso.

    Para fins educacionais, estaremos verificando a seguinte URL: http://botbenchmarking.com/youshallnotpass.html

    Abra a página na versão mais recente do Chrome e vá para o Chrome Developers Tools. Em seguida, mova-se para a aba Rede e atualize a página.

    Finalmente, selecione o recurso desejado (no nosso caso é YouShallNotPass.js), clique com o botão direito do mouse e escolha Block request URL.

    Atualize a página e veja se algum conteúdo importante desapareceu. Se for assim, então você deve pensar em excluir a regra correspondente do seu arquivo robots.txt.

    Etapa 3: Use a URL Inferramenta de especificações para fixação de erros JavaScript

    Se você ver o Google Fetch e Render não está renderizando sua página adequadamente, pode ser devido aos erros do JavaScript que ocorreram enquanto renderia.

    Para diagnosticá-lo, na ferramenta de Inspeção de URL clique na guia Mais informações.

    Então, mostre esses erros aos seus desenvolvedores para deixá-los corrigi-los.

    Apenas um erro no código JavaScript pode parar de renderizar para o Google, o que por sua vez torna o seu website não indexável.

    Seu website pode funcionar bem na maioria dos navegadores mais recentes (o Google Web Rendering Service é baseado no Chrome 41), seu rankings do Google pode cair.

    Necessário algum exemplos?

    • Um único erro na documentação oficial do Angular causado Google não pode renderizar nosso site de teste Angular.
    • Era uma vez, o Google deindexou algumas páginas de Angular.io, um site oficial do Angular 2 +.

    Se você quiser saber por que aconteceu, leia meu Guia do Ultimate para JavaScript SEO.

    Nota lateral: Se por algum motivo você não deseja usar a ferramenta de Inspeção de URL para depuração de erros JavaScript, você pode usar o Chrome 41 em vez disso.

    Pessoalmente, prefiro usar Chrome 41 para fins de depuração, porque é mais universal e oferece mais flexibilidade. No entanto, a ferramenta de Inspeção de URL é mais precisa em simular o Google Web Rendering Service, razão pela qual eu recomendo que para pessoas que são novas para o JavaScript SEO.

    Etapa 4: Confira se o seu conteúdo foi indexado no Google

    Não é suficiente para apenas ver se o Google pode render seu website corretamente. Você tem que se certificar de que o Google tenha indexado adequadamente o seu conteúdo. A melhor opção para isso é usar o site: comando.

    É uma ferramenta muito simples e muito poderosa. Sua sintaxe é bem direta: site: [URL de um website] “[fragmento a ser procurado]”. Basta tomar cuidado para que   você não tenha colocado o espaço entre o site: e a URL.

    Vamos supor que você queira verificar se o Google indexou o seguinte texto “Desenvolver em todas as plataformas” que é destaque na homepage de Angular.io.

    imagem14-09-2020-02-09-18

    Tipo o seguinte comando no Google: site:angular.io “DESENVOLVEM-SE ATRAVÉS DE TODAS AS PLATAFORMAS “

    Como você pode ver, o Google indexou esse conteúdo, que é o que você quer, mas nem sempre é o caso.

    Takeaway:

    • Use o site: comando sempre que possível.
    • Confira modelos de página diferentes para garantir que todo o seu site funcione bem. Não pare em uma página!

    Se você estiver bem, vá para o próximo passo. Se esse não for o caso, pode haver algumas razões pelas quais isso está acontecendo:

    • O Google ainda não renderia seu conteúdo. Ela deve acontecer até alguns dias / semanas depois que o Google visitou a URL. Se as características do seu website requerem que seu conteúdo seja indexado o mais rápido possível, implemente SSR.
    • O Google encontrou tempos fora enquanto renderia uma página. Seus roteiros são rápidos? Eles permanecem responsivos quando a carga do servidor é alta?
    • O Google ainda está solicitando arquivos JS antigos. Bem, o Google tenta armazenar muito em cache para salvar seu poder de computação. Por isso, os arquivos CSS e JS podem ser armazenados em cache agressivamente. Se você puder ver que corrigiu todos os erros do JavaScript e o Google ainda não pode renderizar o seu website adequadamente, pode ser porque o Google usa arquivos JS e CSS antigos e cachos. Para trabalhar em torno dele, é possível embasar um número de versão no nome do arquivo, por exemplo, nomeá-lo bundle3424323.js. Você pode ler mais em Google Guides on HTTP Caching.
    • Enquanto indexação, o Google pode não buscar alguns recursos se decidir que eles não contribuem para o conteúdo essencial da página.

    imagem14-09-2020-02-09-20

    Etapa 5: Certifique-se de que o Google pode descobrir seus links internos

    Há algumas regras simples você deve seguir:

  • O Google precisa de links adequados para descobrir as URLs em seu website.
  • Se seus links forem adicionados ao DOM somente quando alguém clica em um botão, o Google não verá.
  • Por mais simples que seja isso, muitas grandes empresas fazem esses erros.

    A estrutura do link Proper

    Googlebot, a fim de engatinhar um website, precisa ter links tradicionais “href”. Se não for fornecido, muitas de suas webpages serão simplesmente inalcançáveis para o Googlebot!

    Acho que foi explicado bem por Tom Greenway (um representante do Google) durante a conferência Google I/O:

    imagem14-09-2020-02-09-21

    Observe: se você tiver adequado links, com alguns parâmetros adicionais, como onClick, data-url, ng-href, isso ainda está ótimo para o Google.

    Um erro comum cometido por desenvolvedores: Googlebot não pode acessar a segunda e subsequentes páginas de paginação

    Não deixar o Googlebot descobrir páginas da segunda página de paginação e além é um erro comum que   desenvolvedores fazem.

    Quando você abrir as versões móveis para Gearbest, Aliexpress e IKEA, você notará rapidamente que, na verdade, eles não deixam Googlebot veja os links de paginação, o que é realmente estranho. Quando o Google habilita o mobile-first indexing para esses websites, esses websites irão sofrer.

    Como você confere isso por conta própria?

    Se você ainda não baixou o Chrome 41, obtenha-o a partir de Ele.ph/chrome41.

    Em seguida, navegue em qualquer página. Para o bem do tutorial, estou usando a versão mobile do AliExpress.com. Para fins educacionais, é bom se você seguir o mesmo exemplo.

    Abra a versão mobile da categoria Mobile Phones da Aliexpress.

    imagem14-09-2020-02-09-23

    Então, clique com o botão direito do mouse em View More e selecione o botão inspecionar para ver como ele é implementado.

    Como você pode ver, não há , nem links apontando para a segunda página de paginação.

    Existem mais de 2.000 produtos na categoria de telefone celular no Aliexpress.com. Desde que o mobile Googlebot é capaz de acessar apenas 20 deles, isso é apenas 1!

    Isso significa que 99 dos produtos dessa categoria são invisíveis para o Google mobile Googlebot! Isso é loucura!

    Esses erros são causados pela implementação errada do carregamento preguiçoso. Há muitos outros sites que cometem erros semelhantes. Você pode ler mais em meu artigo “Websites populares que May Fail in Mobile First Indexing“.

    TL; DR: usar link rel=”next “sozinho é um sinal fraco demais para o Google

    Nota: é comum usar” link rel=”next ‘ para indicar série de paginação. No entanto, as descobertas de Kyle Blanchette parecem mostrar que “link rel=”next” sozinho é um sinal fraco demais para o Google e deve ser fortalecido pelos tradicionais links do .

    John Mueller discutiu isso mais:

    “Podemos entender quais páginas pertencem juntamente com rel next, rel=”previous”, mas se não houver links na página em tudo, então é realmente difícil para nós rastejar de página para página. (…) Então, usar o rel=”next “rel=”previous” na cabeça de uma página é uma ótima ideia para nos dizer como essas páginas estão conectadas, mas você realmente precisa ter on-page, links HTML normais.

    Não me tire mal-não há nada de errado em usar . Pelo contrário, eles são benéfica, mas é bom combinar essas tags com os tradicionais links .

    Verificando se o Google pode ver links de menu

    Outro passo importante na auditoria de um website JavaScript é garantir que o Google possa ver seus links de menu. Para conferir isso, use o Chrome 41.

    Para o propósito do tutorial, usaremos o caso de Target.com:

    Para iniciar, abra qualquer navegador e escolha alguns links do menu:

    Next, abra o Chrome 41. No Chrome Developer Tools (clique em Ctrl + Shift + J),   navegue até a guia de elementos.

    Os resultados? Felizmente o suficiente, o Google pode pegar os links do menu de Target.com.

    Agora, confira se o Google pode pegar os links do menu no seu site e veja se você está no alvo too.

    Etapa 6: Verificando se o Google pode descobrir conteúdo escondido sob guias

    Muitas vezes observei que no caso de muitas lojas de e-commerce, o Google não pode descobrir e indexar seu conteúdo que está oculto sob guias (descrições de produtos, opiniões, produtos relacionados, etc). Eu sei que é estranho, mas é tão comum.

    É uma parte crucial de toda auditoria de SEO para garantir que o Google possa ver o conteúdo escondido sob guias.

    Abrir o Chrome 41 e navegar em qualquer produto em Boohoo.com; por exemplo, Muscle Fit Vest.

    Clique em Detalhes & Care para ver a descrição do produto:

    ” DETAILS & CARE 94% Cotton 6% Elastane. Músculo Fit Vest. Modelo é 6 ‘ 1 “e Wears UK Size M.”

    Agora, é hora de verificar se está no DOM. Para isso, vá para o Chrome Developers Tools (Ctrl + Shift + J) e clique na guia Rede.

    Certifique-se de que a opção de desativar cache esteja ativada.

    Clique em F5 para atualizar a página. Uma vez atualizado, navegue até a guia Elementos e procure por uma descrição do produto:

    <a href = "

    >

    “>

    imagem14-09-2020-02-09-32

    Como você pode ver, no caso do boohoo.com, o Google é capaz de ver a descrição do produto.

    Perfeito! Agora tome o tempo e confira se o seu website está bem.

    Wrapping up

    Obviamente, o JavaScript SEO é um assunto bastante complexo, mas espero que este tutorial tenha sido útil.

    Se você ainda está lutando com o Google ranking, você pode querer pensar em implementar renderização dinâmica ou renderização híbrida. E, é claro, sinta-se à vontade para me alcançar no Twitter sobre esta ou outras necessidades de SEO.

    Fonte: moz.com/blog/diagnose-and-solve-javascript-seo-issues