Progressive Web Apps (PWA) e Search Engine Optimization (SEO)

O Progressive Web App (PWA) é um software aplicativo fornecido pela web. Ele é construído usando tecnologias padrão da Web, como HTML, CSS, JavaScript etc. Os PWAs são comumente usados ​​para aumentar a taxa de conversão e o tráfego do site. A partir de 2021, os PWAs são suportados (total ou parcialmente) pelo Google Chrome, Apple Safari, Firefox para Android e Microsoft Edge.

Sendo um desenvolvimento relativamente novo, a otimização do PWA ainda leva a resultados positivos na maioria dos casos e possui estatísticas surpreendentes. O PWA Stats relata constantemente os benefícios alcançados pelos serviços que implementaram o PWA.

Em geral, de acordo com o relatório TOP 30 PWAs, “a taxa média de conversão para aplicativos da web progressivos foi 36% maior do que a dos aplicativos móveis nativos”.

Os PWAs são ótimos auxiliares quando se trata de marketing online. É por isso que eles são populares entre o público de SEO. No entanto, assim como React e SEO, a combinação PWA SEO tem suas dificuldades. Neste artigo, vamos esclarecer como os PWAs funcionam com SEO.

Exemplos e principais benefícios do PWA

Qualquer serviço da Web pode ser um PWA. Existem três requisitos principais para isso:

1. Executa sob HTTPS.
2. Inclui um manifesto de aplicativo da Web.
3. Implementa um service worker.

O principal objetivo do PWA é fornecer funcionalidade superior para todos os usuários. Aqui está a lista das principais vantagens oferecidas pelos PWAs:

1. O PWA traz novas oportunidades e crescimento para literalmente qualquer negócio. Ele combina o melhor das qualidades de aplicativo e web, sendo responsivo e capaz de funcionar em qualquer dispositivo e não requer necessariamente uma rede rápida.
2. A segurança da camada de transporte o torna seguro.
3. O service worker (um script especial que seu navegador executa em segundo plano) permite que os PWAs funcionem no modo offline.

Vejamos alguns dos maiores exemplos de adoção do PWA:

Recomendado para você: Estruturas mais populares para criar aplicativos da Web progressivos (PWAs).

1. Starbucks

O sistema de pedidos do PWA da Starbucks é simples e fácil de usar. Ele se parece com o aplicativo nativo, mas pode ser executado offline quando um usuário navega no menu e adiciona itens ao carrinho. O melhor benefício dessa solução é o fato de que o PWA é quase duas vezes menor que o aplicativo padrão da Starbucks. Com isso, a empresa aumentou significativamente o número de internautas.

2. Pinterest

Depois que foi descoberto que apenas 1% dos usuários móveis do Pinterest baixam um aplicativo e fazem login devido ao seu baixo desempenho, o aplicativo móvel foi reconstruído com base na tecnologia PWA. Graças a isso, indicadores como tempo gasto, receita de anúncios e engajamentos principais aumentaram de 40% a 60%.

3. Uber

O aplicativo da web Uber foi reconstruído como um PWA com o objetivo de fornecer um serviço rápido em redes de baixa velocidade e em smartphones antigos que não são compatíveis com o aplicativo Uber nativo. Graças a isso, um aplicativo central superleve carrega em cerca de 3 segundos em redes 2G.

A Importância do SEO

SEO é tudo sobre como otimizar seu site para os motores de busca (SEs). Seu principal objetivo é melhorar a classificação do site nos resultados de pesquisa e envolver os visitantes. É baseado em algoritmos SE e usa palavras-chave para ajudar os mecanismos de pesquisa a mostrar conteúdo relevante e atrair um público-alvo para os sites. É assim que o SEO pode trazer tráfego orgânico para o seu site, o que é o melhor de todos. Ao contrário do tráfego direto e pago, ele é capaz de transformar a maior parte de seus visitantes em seus clientes e clientes.

SEO para Progressive Web Apps: Qual é o problema?

Apesar de todos os benefícios fornecidos pelo PWA, muitos proprietários de sites ainda hesitam em implementar a tecnologia. Há duas razões principais para isso:

1. O medo de mudar o sistema existente que já funciona bem.
2. Má compreensão de como o PWA funciona com SEO.

Como afirmou John Mueller (analista do Google), “os PWAs atualmente não têm nenhuma vantagem na Pesquisa do Google”.

Muitos PWAs são criados usando estruturas JS que não são conhecidas por sua natureza amigável ao SEO.

Portanto, ao contrário dos sites tradicionais baseados em HTML, os PWAs dependentes de JavaScript são um desafio para o SEO. É por isso que eles não oferecem nenhuma vantagem em termos de pesquisa. No entanto, ao contrário da crença popular, isso não significa que os aplicativos da web progressivos não possam ser indexados pelos mecanismos de pesquisa. Você apenas tem que usar técnicas diferentes para isso.

Renderização no lado do servidor e renderização no lado do cliente

A maioria dos sites usa renderização no lado do servidor (SSR). É a abordagem mais simples em que a página é renderizada no lado do servidor em vez de ser renderizada no navegador. No entanto, todo o HTML é carregado toda vez que um usuário solicita a página, o que pode ser problemático quando a conexão com a Internet não é estável ou rápida o suficiente.

Os PWAs baseados em JavaScript usam a renderização do lado do cliente (CSR), em que o conteúdo é renderizado no navegador do cliente. Ele não envia uma página HTML inteira toda vez que um usuário solicita a página. O arquivo JavaScript exibe apenas a parte necessária das informações da página no navegador do cliente. É por isso que a página carrega mais rápido, mesmo com uma conexão de internet ruim.

No entanto, por que muitos proprietários de sites ainda se recusam a usar o CSR? O problema é o bot do Google. Ele pode ler o conteúdo do site no código totalmente visível no documento HTML. O CSR, em seu caso, depende totalmente da capacidade de um mecanismo de pesquisa de processar JavaScript. É por isso que existe a opinião de que os aplicativos CSR não podem ser indexados. No entanto, de fato, entre todos os mecanismos de pesquisa, o Google é o melhor no processamento de JavaScript.

No entanto, isso ainda não significa que o problema com JavaScript e SEO esteja resolvido: o Google admite que o processamento de JS não é perfeito. Ou seja, o processo de rastreamento de uma página baseada em JavaScript leva mais tempo do que o de uma página HTML. Na verdade, isso significa que você terá que esperar mais tempo para que o conteúdo JavaScript apareça nas páginas de resultados do mecanismo de pesquisa.

Tudo isso torna difícil para os proprietários de sites melhorar a experiência do usuário de seus visitantes e otimizar seu conteúdo para os mecanismos de pesquisa.

Como implementar o PWA sem perder a otimização do mecanismo de pesquisa?

Você pode gostar: Magento PWA Studio: A ferramenta Progressive Web App para Magento!

1. Aplique a renderização dinâmica

A renderização dinâmica mostra diferentes versões de conteúdo para diferentes fontes. O visitante obtém uma versão CSR e o rastreador obtém uma versão renderizada do lado do servidor. Isso permite melhorar a indexação de páginas baseadas em JavaScript pelo bot do Google. Dessa forma, você fornecerá a experiência de usuário mais conveniente para seus clientes sem arriscar o SEO do site.

2. Combine SSR e CSR

Certifique-se de que o rastreador verá as partes mais importantes do conteúdo (que definitivamente precisam ser passadas para os mecanismos de pesquisa) usando a renderização do lado do servidor. Essas informações serão coletadas pelo rastreador assim que descobrir a página. As informações restantes serão processadas automaticamente por meio da renderização do lado do cliente durante o segundo estágio do processo.

3. Crie seu PWA usando uma estrutura JavaScript amigável para SEO

Nossa grande recomendação é o GatsbyJS. É muito fácil criar um site PWA usando essa estrutura (além de transformar o site Gatsby existente em um PWA). Ele pré-renderiza seu site em uma etapa de construção para um desempenho brilhante e sem atrasos, mesmo se a conexão com a Internet for lenta. Graças a isso, seus visitantes obtêm uma experiência de navegação semelhante a um aplicativo.

4. Recorra a soluções PWA prontas para uso

Hoje, os PWAs estão mais acessíveis do que nunca. Portanto, se você não quer perder muito tempo e recursos no desenvolvimento de PWA, pode usar algumas soluções de PWA prontas para uso, feitas de acordo com os princípios de SEO e exaustivamente testadas, para garantir a qualidade do código.

5. Estúdio PWA

O estúdio PWA foi lançado em 2019 como um padrão de tecnologia da web projetado para fornecer uma experiência semelhante a um aplicativo. Na verdade, não é exatamente uma solução pronta para uso: é uma coleção de ferramentas e recursos para o desenvolvimento de PWA. Esta solução é bastante complexa e impressionante, mas requer ajustes adicionais.

6. ScandiPWA

ScandiPWA é uma solução de código aberto, baseada em React e Redux. Ele foi projetado com o objetivo de melhorar os sites com velocidade e capacidade de trabalhar offline. Ele também atualiza constantemente, então você sempre terá novas funções.

7. Vue Storefront

Esta é uma das primeiras soluções PWA disponíveis no mercado. Na verdade, o Vue Storefront é uma solução universal e completa, mas requer recursos adicionais de manutenção.

Como evitar erros relacionados a SEO durante a implementação do PWA?

Para desenvolver um PWA bem elaborado que o ajudará a vencer no SEO, fornecendo uma experiência de usuário aprimorada, você deve:

1. Realizar auditoria de SEO. Isso ajudará a identificar e corrigir todos os problemas relacionados ao SEO.
2. Consulte especialistas em SEO. Quando você constrói seu PWA usando React (por exemplo), seus especialistas em SEO devem saber exatamente como combinar React e SEO. Dessa forma, você evitará a maioria dos possíveis problemas que podem aparecer após a implementação.
3. Atenha-se aos princípios fundamentais de SEO ao desenvolver o PWA. No artigo relacionado ao Progressive Web Apps SEO, publicado pelo Google, a empresa dá dicas de como construir PWAs indexáveis. Alguns deles são assim:
   • Cada página deve estar disponível por meio de um URL específico. Graças a isso, cada página será rastreada de forma independente.
   • O site deve ter um design responsivo e ser otimizado para dispositivos móveis.
   • Use o aprimoramento progressivo. Graças a essa estratégia, os PWAs funcionam bem mesmo em navegadores antigos.
   • Verifique regularmente como o Google processa sua página usando o Google Search Console. Assim, você sempre saberá quando é hora de atualizar ou mudar alguma coisa.
   • Fique de olho no tempo de carregamento da página. O Google mede a velocidade de carregamento de cada página e, se a velocidade de carregamento da sua página diminuir, o Google a diminuirá na classificação.

Você também pode gostar: React Native vs Flutter vs PWA: Battle of Trending Mobile App Frameworks.

Conclusão

A otimização de PWA oferece muitas oportunidades para marketing online e traz crescimento para a grande maioria das empresas. Na verdade, a melhor prática de SEO normalmente aplicada pelo PWA é a interface amigável: é responsiva, estruturada e renderizada rapidamente. No entanto, os PWAs ainda não oferecem uma vantagem direta ao SEO, e os problemas relacionados ao SEO são o que impede muitos comerciantes de implementar o PWA em seus sites. É por isso que é importante ter cuidado e usar diferentes técnicas, como renderização dinâmica, combinação de SSR e CSR ou soluções PWA prontas para uso. Você também deve envolver especialistas em SEO no processo desde o início.

Como você pode ver, você pode usar SEO e PWA combinando-os com sucesso. Também deve ser notado que o PWA é um tipo de software jovem e inovador, portanto, melhorias são esperadas.

 Este artigo foi escrito por Ivan Jones. Ivan é um especialista em SEO da Clockwise.Software com mais de 5 anos de experiência na indústria. Ele conhece as nuances que o ajudaram a manter os sites no topo dos resultados de pesquisa do Google por anos. Sendo um aprendiz ávido, ele está interessado em testar novas abordagens que possam beneficiar os resultados de SEO.