Otimização Para Mobile
Hoje em dia é mais comum um utilizador aceder aos sites através do telemóvel e não pelo desktop do computador, por isso a parametrização do Google mudou e priorizou sites que tenham uma boa navegação mobile. Contudo, os websites ainda são desenvolvidos primeiramente, para o desktop, e só depois para o mobile. Uma forma de agilizar o trabalho na criação da navegação mobile e ajudar o algoritmo do Google a reconhecer automaticamente o responsivo das páginas, é colocar a tag “viewport” no cabeçalho do código HTML destas (tal como vemos na imagem seguinte). Esta marcação orienta o navegador sobre como ele deve ajustar as dimensões e a escala da página conforme a largura do dispositivo.
Se considerarmos um site WordPress ou Wix, estes já vem preparados automaticamente para entregar as páginas com o mobile responsivo. O ”Elementor” (um tipo de estrutura de criação de páginas) é o mais indicado para se criar páginas user-friendly no WordPress. O trabalho de um SEO técnico deverá ser, o de ajustar códigos HTML, CSS e JavaScript das suas páginas, para os parâmetros mobile estarem de acordo com os tamanhos certos e perceptíveis.
Para saber se o seu site está automatizado para mobile, o Google disponibiliza gratuitamente o teste de compatibilidade com dispositivos móveis. Ou poderá ir ao relatório do Google Search Console – “Usabilidade em dispositivos móveis” e verificar se as páginas têm alguns problemas. No caso de haver problemas, o Google Search Console irá reportar como deve ser mediada a resolução dos mesmos.
AMP
AMP significa “Accelerated Mobile Pages”, é uma estrutura HTML5 de código aberto, onde podem-se criar facilmente sites, e-mails, artigos web e anúncios que priorizam o utilizador. As páginas codificadas por AMP aparecem na pesquisa dos motores de busca como um “carrossel” de resultados para os dispositivos móveis e apresentam um ícone de um raio e o acrônimo “AMP”. AMP é alimentada por JavaScript, o estilo pode ser personalizado via CSS3 e as páginas são armazenadas em cache. As AMP’s são completamente separadas de um site mobile típico. As vantagens de usar uma AMP são:
As páginas AMP podem ser carregadas quase instantaneamente, para a velocidade de um site isto é uma mais-valia imprescindível;
Várias plataformas suportam AMP, incluindo Google, Bing e Twitter;
AMP ainda permite que se use CSS personalizado, mas reduz um pouco a complexidade do seu código;
Os componentes do AMP já estão construídos e são fáceis de se usar;
AMP é uma iniciativa de código aberto, por isso oferece uma experiência mais amigável na web;
Na pesquisa dos motores de busca o site AMP aparece em carrossel, dá um destaque a quem utiliza este tipo de estrutura.
Do lado do SEO, AMP precisa de otimizações nas suas páginas, tal como é feito com outros tipos de site: wordpress, wix, programação de código, etc. Primeiro terá de perceber se todo o AMP está detectável para os motores de busca, por exemplo, para as páginas AMP, use rel=”amphtml”, em vez de rel=”canonical” como tags <link> no <head>. Não adicione as páginas AMP ao Sitemap XML, o Google já sabe automaticamente quando está a rastrear páginas AMP apenas com a colocação da tag canonica rel=”amphtml”. Pode e deve continuar a utilizar Alt Text nas imagens, H1, hreflangs e todos os dados estruturados no AMP.
No wix existe forma de se colocar os post como AMP, seguindo os passos seguintes: dentro da plataforma, no painel do lado esquerdo, encontra-se “Marketing e SEO” procure por “Configurações de SEO” e faça clique em “Posts do Blog”, irá aparecer a imagem seguinte, onde se pode ativar o AMP de todos os seus artigos implementados no wix.
Para quem trabalha com o wordpress existe o plugin AMP que pode ajudar a colocar as páginas nesta estrutura, apenas tem de se configurar todos os settings do mesmo. Para testar o seu AMP pode aceder a estas 2 ferramentas: https://search.google.com/test/amp | https://search.google.com/test/rich-results ou poderá ir ao Google Search Console e ver os relatórios sobre a sua AMP.
PWA's (APPs Progressivas)
Segundo o Google, apps progressivas são aplicativos Web progressivos que usam recursos modernos da Web para oferecer uma experiência de utilizador semelhante a um aplicativo. Como dispensa a instalação de um aplicativo, pode ser acedido através de um URL, o que poupará recursos e memória no dispositivo. As alterações e atualizações numa PWA também são facilmente aplicadas e aprovadas para implementação no lado do utilizador. PWA’s foram projetadas para serem capazes, confiáveis e instaláveis, têm a capacidade de interceptar e manipular solicitações de rede, armazenar em cache ou recuperar recursos do cache e entregar mensagens de push conforme necessário. PWA’s carregam rapidamente, usam o mínimo de dados possíveis e os conteúdos são separados da navegação.
PWA utiliza 4 tecnologias:
Acesso à tela inicial: instalação direta num site que já foi visitado, sem a necessidade de uma loja de aplicativos;
Suporte offline: É um arquivo JavaScript que é executado em segundo plano, independentemente do navegador, e separado de uma página da web;
Utiliza TLS (Transport Layer Security): segurança HTTPS nas suas configurações;
Arquitetura de shell de aplicativo: PWA carrega de forma confiável e instantânea na tela do utilizador porque o shell do aplicativo usa muito pouco de HTML, CSS e Javascript.
Um PWA, pode de fato, melhorar significativamente o seu perfil de pesquisa orgânica, tornando a experiência do utilizador melhor do que o da sua concorrência. A maior vantagem dos PWA’s é a maior velocidade em comparação com outras plataformas móveis e aplicativos nativos. O Google rastreia sites PWA da mesma forma que rastreia um site AJAX ou JavaScript, por isso o SEO técnico têm de existir nessas aplicações para garantir que as páginas sejam indexadas corretamente, a única diferença é que o Googlebot não indexará URL’s com # neles. Muitas PWA’s usam o símbolo hashtag na sua estrutura de URL. A única maneira de contornar isso é implementar uma estrutura de URL usando as regras tradicionais de SEO.
Mas como criar uma PWA?! Para transformar uma página simples (HTML, CSS e JS) num PWA, é necessário adicionar a seu arquivo index.html um link para um manifest.json (é preciso manter os padrões do arquivo na raiz do sistema) e instanciar um service worker. O Service Worker define quais dos arquivos da aplicação devem ficar disponíveis offline. O arquivo manifest define o nome e a aparência da página como um aplicativo instalável. Poderá ainda alterar os nomes, a descrição, as URL’s e o link para o ícone do aplicativo de acordo com o seu gosto. Também terá de ter a conexão HTTPS e um certificado SSL.
Por fim, poderá inspecionar a sua PWA com a “Lighthouse” (executando a linha de comandos no Chrome DevTools). No wordpress pode-se colocar um plugin para tornar o site numa PWA: https://wordpress.org/plugins/super-progressive-web-apps/
Conclusão
Ofereça uma melhor experiência aos utilizadores aplicando o SEO no processo de otimização dos seus sites, para que estes tenham uma classificação mais elevada nos resultados de pesquisa em dispositivos móveis e utilize as AMP/PWA’s para colmatar os problemas de velocidade nas páginas respectivas.
Atualmente, muitas empresas precisam de resultados imediatos, mas a verdade é que não podem dar-se ao luxo de implementar SEO internamente enquanto alavancam com a prioridade do foco do seu negócio. Se ainda não consegue dar conta destas etapas ou não tiver tempo para as colocar em prática, a Bringlink SEO garante que tenha a visibilidade e o crescimento da marca que merece.
Fale connosco, envie email para a bringlinkseo@gmail.com.
Referências
Neipatel – https://neilpatel.com/br/blog/pwa-o-que-e/
SemRush – https://www.semrush.com/blog/mobile-seo/