Desafios de SEO do PWA: o que impede seu site PWA de ser classificado?

Com velocidade mais rápida e melhor UI e UX, o PWA pode aumentar seus Google Core Web Vitals, melhorando assim seu SEO. Muitos blogs e notícias de tecnologia (incluindo SimiCart) afirmaram isso.

No entanto, esta não é a imagem completa. Na verdade, em alguns casos, o PWA pode ser ruim para o SEO do seu site.

Ao longo de 10 anos desenvolvendo sites PWA, encontramos vários casos em que o desempenho de SEO é realmente afetado negativamente pelo PWA.

Já escrevemos um artigo sobre os benefícios do PWA. Agora, para você ver a parte subaquática do iceberg, aqui estão alguns grandes desafios para SEO que os lojistas podem enfrentar ao implementar o PWA.

O principal problema com o PWA SEO

Isso remonta ao conhecimento básico de desenvolvimento de sites: HTML e Javascript. Apostamos que, mesmo que você não seja experiente em tecnologia, já ouviu falar dessas duas linguagens de codificação antes.

Em suma, o HTML é a linguagem de codificação mais simples, usada para criar a estrutura do site.

Enquanto isso, o Javascript é mais avançado, responsável por mais efeitos especiais.

Portanto, se você vir uma página da Web com muito conteúdo dinâmico, um efeito de rolagem sofisticado ou um controle deslizante legal, por exemplo, essa página da Web faz bom uso do Javascript.

(crédito: Reddit)

O PWA, famoso por sua animada experiência de UI/UX, como você pode imaginar, usa muito Javascript.

Aqui está o problema: o Google e muitos outros mecanismos de pesquisa não renderizam sites Javascript tão bem. Sites baseados em Javascript geralmente são mais complexos e mais pesados ​​de processar do que sites em HTML. Na verdade, não só os motores de busca, as redes sociais como o Twitter ou o Facebook também não gostam tanto de Javascript.

Como resultado, os bots dos mecanismos de pesquisa podem ter alguns problemas com a indexação do seu site PWA, levando a um desempenho de SEO ruim.

Portanto, exige um especialista habilidoso que entenda o PWA de dentro para fora para otimizar o site para que seja amigável ao SEO.

6 obstáculos ao otimizar o PWA para SEO.

1. Problemas de desempenho

“Mas o PWA deve ser rápido?” - Você pode perguntar.

Sim, é, mas isso não significa que o PWA não tenha alguns problemas de desempenho.

Ainda existem alguns problemas proeminentes relacionados à velocidade com o PWA. No entanto, o PWA pode ser extremamente rápido se for otimizado corretamente.

Assim como Usain Bolt, mesmo tendo nascido superdotado, ele não pode ser campeão se não tiver um treinador que entenda sua habilidade e o treine bem.

Vejamos mais de perto cada questão:

Problemas

Os arquivos Javascript usam muitos recursos para análise, compilação e execução. Além disso, devido ao baixo desempenho do servidor, o bug do mecanismo de pesquisa não pode renderizar arquivos Javascript rapidamente.

Como resultado, isso pode afetar algumas métricas de velocidade de página, como Primeira pintura significativa e Primeira pintura com conteúdo. Como essas duas métricas são importantes fatores de classificação, isso é ruim para o SEO. Além disso, um site atrasado também nunca pode ser bom para a experiência do usuário.

Além disso, como o service worker do PWA requer certificados HTTPS e SSL para funcionar, ele pode tornar seu site mais lento que sua versão HTTP.

Soluções

Algumas práticas comuns para melhorar a velocidade são implementar AMP (páginas móveis aceleradas) junto com PWA, bem como usar HTTP/2 com HTTPs

Como o PWA é uma tecnologia avançada e de nicho no cenário de comércio eletrônico, é melhor ter desenvolvedores experientes de PWA otimizando a velocidade do seu site.

2. Erros de Javascript

Problema

Ao analisar, navegadores como o Google Chrome podem corrigir automaticamente a sintaxe HTML, como tags de fechamento. No entanto, isso não é o mesmo com erros de Javascript.

Como consequência, quaisquer erros no Javascript podem impedir que os spiders dos mecanismos de pesquisa rastreiem e indexem suas páginas da web.

Soluções

É importante que os desenvolvedores escrevam códigos Javascript limpos e bem estruturados para o seu site para evitar muitas correções demoradas mais tarde.

Se o site apresentar algum erro de Javascript, os desenvolvedores precisarão limpá-los manualmente e informar os mecanismos de pesquisa após corrigi-los.

3. Hiperlink/imagem não rastreado devido ao conteúdo de camuflagem

O conteúdo de camuflagem é aquele visto pelos olhos humanos, mas não pelos mecanismos de busca. Por exemplo, texto oculto atrás do botão “mostrar mais” ou links de menu de carregamento lento. Geralmente são conteúdos e links dinâmicos escritos em Javascript

Problema

Como o Google ainda tem algumas dificuldades para entender o Javascript, pode haver algum conteúdo Javascript do PWA que não será acessado pelo Google.

Se o seu conteúdo (por exemplo, um link importante, uma imagem de produto) for invisível para os mecanismos de pesquisa, eles não poderão indexá-lo. Isso, consequentemente, terá um impacto negativo em seus rankings de SEO.

Solução

Você sempre pode confiar em ferramentas como Sitechecker ou Small SEO tool para ver se sua página da web contém algum conteúdo camuflado. Certifique-se de que todo o conteúdo principal, como textos, imagens e links entregues aos seus usuários, corresponda ao que é veiculado ao Googlebot.

4. Compatibilidade do módulo

Problema

Como uma tecnologia relativamente nova, o PWA geralmente aproveita os módulos mais recentes. Isso pode entrar em conflito com o Google ou outros navegadores, que geralmente dependem dos módulos menos modernos. Alguns exemplos notáveis ​​disso são ES6, Fetch API ou novas sintaxes ou métodos.

Solução

Antes de implementar, você deve verificar sua compatibilidade. Não é um grande problema se alguns módulos do seu PWA não funcionarem com o Googlebot, pois existem ferramentas ou polyfills para corrigir isso.

Polyfill são algumas linhas de código Javascript que podem permitir que navegadores mais antigos usem recursos modernos, mesmo que não ofereçam suporte nativo a esses recursos.

Com base nos módulos com os quais o Googlebot entra em conflito, pode haver uma ferramenta de transpilação para ele também.

Para sua informação, transpilar (traduzir + compilar) significa traduzir e interpretar uma linguagem de programação para outra. Vamos pegar o módulo ES6 como exemplo, serviços como Babel podem transpilar arquivos Javascript C6 modernos para ES5, o que permite que navegadores mais antigos funcionem sem problemas com ele.

5. Problema com renderização do lado do servidor

Em um esforço para renderizar melhor os sites baseados em Javascript, o Googlebot usa a renderização do lado do servidor e do lado do cliente.

Resumindo, o processo de renderização é assim:

1. O Googlebot rastreia seu site para encontrar links e conteúdo pela primeira vez
2. O servidor renderizará links e conteúdo encontrados após o 1º rastreamento. Esses links e conteúdos serão indexados logo em seguida
3. O Google continua a rastrear o site pela segunda, terceira vez etc.
4. A partir de agora, os links e conteúdos restantes serão renderizados pelo cliente, o que significa que serão renderizados nos dispositivos de seus usuários.
5. Após a conclusão da renderização, o Google indexa suas páginas da web.

Problema

A princípio, o fluxo de renderização do Googlebot parece bastante plausível, mas existem algumas desvantagens importantes:

• Velocidade de indexação mais baixa :

O Google pode indexar arquivos HTML com renderização do lado do servidor rapidamente, mas pode levar dias para indexar arquivos Javascript com renderização do lado do cliente

• Priorize as páginas erradas :

Imagine que você tem uma página da web que liga a algumas outras páginas. Estes são chamados de links internos. O Google conta com a estrutura desses links internos para entender a relação entre os links e quais links eles devem priorizar.

No entanto, para links inseridos em Javascript, o Google precisa aguardar a conclusão da renderização do lado do cliente antes de iniciar a indexação. Em outras palavras, o Google pode avaliar completamente a estrutura de links internos do site somente após a conclusão da renderização do lado do cliente.

Como resultado, alguns links não tão importantes que não precisam de renderização do lado do cliente podem ser rastreados primeiro e com mais frequência. Assim, o Google pode priorizar sua página menor e ignorar as páginas de venda.

• Conflito entre renderização do lado do servidor e renderização do lado do cliente:

Muitas vezes há problemas entre a renderização do lado do servidor e a renderização do lado do cliente. Por exemplo, alguns elementos de página importantes (meta tags, tags canônicas) não são indexados. Além disso, as duas fases podem enviar alguns sinais confusos para o Google, assim, o mecanismo de pesquisa não sabe como proceder com suas páginas.

Solução

Um servidor mais eficiente é uma correção importante para esses problemas. Os desenvolvedores podem precisar otimizar o servidor para que ele responda instantaneamente às solicitações de links diretos. Além disso, eles precisam funcionar para arquivos HTML bem renderizados, especialmente aqueles para elementos cruciais da página, como navegação, links, conteúdo, metatags e imagens.

A tecnologia moderna também pode nos ajudar a resolver o conflito entre Javascript e navegadores da web. Por exemplo, a técnica isomórfica pode tornar mais fácil para os navegadores renderizar arquivos Javascript.

6. Erros comuns de SEO

Existem mais de 200 fatores de ranqueamento de SEO, alguns deles muito técnicos, como canonical tags, rebot.txt, etc. Por isso, os comerciantes podem facilmente ignorar essas configurações e, assim, acabar prejudicando o SEO do seu site.

Antes de começar a corrigir o SEO do seu PWA, é melhor garantir que seus sites atuais sigam as melhores práticas de SEO.

>> Veja mais: Melhores práticas de SEO Magento

Agora, chegando à pergunta mais delicada:

Devo atualizar para o PWA?

… Se eu não quiser prejudicar o SEO do meu site.

Deve ser muito confuso para os comerciantes que pensam em implementar o PWA, especialmente quando as pesquisas orgânicas são um canal vital de tráfego do site.

No entanto, esses desafios não significam que os bots do Google não podem rastrear sites PWA, nem classificam sites PWA de maneira diferente por causa de sua linguagem de programação.

É só que os comerciantes precisam estar cientes de alguns desafios técnicos ao implementar um site PWA amigável para SEO.

Na verdade, os sites PWA podem ter uma boa classificação nos mecanismos de pesquisa, se não melhor do que seus sites equivalentes não-PWA. Como mencionado anteriormente, o aplicativo da web melhora os principais pontos vitais da Web de SEO.

Então, em termos de SEO, o PWA é um herói ou zero? Depende se seus desenvolvedores entendem profundamente a tecnologia PWA e o desenvolvimento de sites.

Leve embora

O PWA pode ser uma faca de dois gumes para o ranking de SEO do seu site. Por outro lado, sua velocidade aprimorada e experiência do cliente podem ajudar a impulsionar os principais pontos vitais da web do SEO. No lado sombrio, o PWA, com seu rico conteúdo Javascript, é mais complicado para mecanismos de busca como o Google trabalharem. Assim, uma implementação ruim sem uma compreensão profunda do PWA pode causar uma queda no ranking.

É totalmente possível criar um site PWA amigável para SEO. A chave é encontrar desenvolvedores de PWA que estejam familiarizados com esses desafios e saibam como resolvê-los rapidamente.

Temos 10 anos criando PWA sem cabeça para Magento