A sua presença na web é feita por meio de páginas AMP? Se você não está com essa tecnologia do Google incorporada aos seus sites, é hora de ficar atento: não ter um e-commerce e um site adaptado pode prejudicar a sua competitividade e a habilidade de seu público-alvo de te encontrar nas páginas de busca.
O AMP é uma das melhores formas de reduzir o tempo de carregamento das suas páginas. Apoiando-se nos servidores do Google, o acesso ficará mais ágil, sem prejudicar a exibição de elementos fundamentais.
Isso terá um impacto direto em um dos fatores que mais impacta a sua experiência de consumo no e-commerce: o tempo de abertura de um site. Quer saber mais sobre como as páginas AMP funcionam e o que fazer para adaptar as suas? Então continue a leitura!
O que é o AMP?
O AMP (Accelerated Mobile Pages, ou Páginas Móveis Aceleradas, em uma tradução livre) é uma tecnologia do Google voltada para otimizar o acesso a páginas web. Focada em dispositivos móveis, ela reduz o tempo de carregamento em conexões limitadas. Além do apoio do Google, a tecnologia (que é de código aberto) tem o apoio de empresas como o LinkedIn, o Pinterest e o Twitter.
Como páginas AMP funcionam?
As páginas AMP combinam um conjunto de recursos para melhorar a estrutura de um site mobile. Isso se dá a partir de três componentes:
- uma página AMP em HTML: essa página HTML contém características próprias, que são combinadas com os elementos HTML tradicionais;
- o JavaScript adaptado para páginas AMP: a biblioteca JS é otimizada para melhorar a o tempo de renderização dos recursos, otimizar o layout e reduzir o consumo de processamento;
- o cache especial para páginas AMP: o AMP utiliza uma rede de servidores focados em distribuir conteúdos sem consumir uma grande quantidade de recursos de internet.
Esses recursos, combinados, conseguem criar uma página especial. Ela carregará em prazos menores e sem erros. Tudo isso com o apoio dos servidores do Google e com a garantir de que elementos de SEO serão aproveitados no ranqueamento do site!
Por que ter um site adaptado ao AMP pode ser uma boa ideia?
A internet mobile está se tornando o principal meio de acesso à web do brasileiro. Segundo a Pesquisa Nacional por Amostra de Domicílios Contínua - Tecnologia da Informação e Comunicação (PNAD Contínua TIC) de 2018, 98,1% das pessoas com mais de 10 anos utilizam a web por dispositivos móveis. Isso vale tanto para áreas rurais como urbanas.
Para quem trabalha com vendas online, portanto, preparar-se para entregar a melhor experiência de uso em dispositivos móveis é fundamental. As páginas de vendas precisam estar adaptadas para fornecer os conteúdos que o cliente procura no menor tempo possível. Tudo isso sem comprometer a usabilidade dos usuários.
O investimento nas páginas AMP é uma ótima forma de atingir esse objetivo. Elas podem ser acessadas com mais agilidade e segurança. Além disso, são otimizadas automaticamente, sem que a empresa tenha que direcionar recursos para tornar o seu e-commerce mobile funcional.
O SEO também será otimizado. Fundamental para a página web ficar visível para o seu público-alvo, ele é recebe muita atenção de todas as empresas. Todo mudo sabe: manter a página visível no Google aumenta as chances de o seu público-alvo comprar os seus produtos.
As páginas AMP conseguem mais visibilidade nos mecanismos de busca. Por isso adaptar o seu site é tão importante: ele estará compatível com mais um item obrigatório para ficar a frente da concorrência nas páginas de pesquisa da internet.
Como implementar o AMP no seu site?
Para tornar as suas páginas compatíveis com o padrão AMP, alguns elementos são necessários. Eles dão ao navegador todas as instruções para fazer o carregamento ágil dos conteúdos e, assim, entregar a melhor experiência para o usuário. São eles:
- uma tag <html amp> no topo para identificar a página como a versão AMP;
- a tag <meta charset=uft-8"> logo abaixo da tag` para identificar o padrão de codificação do conteúdo;
- a tag <script async src="https://cdn.ampproject.org/v0.js"></script> dentro da tag <head> para inserir e carregar a biblioteca JS especialmente feita para páginas AMP;
- a tag <link rel="canonical" href="$ALGUMA_URL"> identificando a versão desktop da página AMP dentro da tag <head>;
- a tag <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> dentro da tag <head> para configurar o layout como responsivo.
O ideal é que o último item da nossa lista tenha a configuração initial-scale=1. A inserção da biblioteca JS para páginas AMP deve ser feita assim que possível dentro da tag <head>. Essas práticas são as recomendadas pelo google, portanto, fique atento!
Outro ponto importante é o AMP Boilerplate Code. Ele é obrigatório para todas as páginas AMP e deve ser inserido dentro da tag <head>. Ele é escrito da seguinte forma:
<style amp-boilerplate>
body{
-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
animation:-amp-start 8s steps(1,end) 0s 1 normal both
}
@-webkit-keyframes
-amp-start{
from{visibility:hidden}to{visibility:visible}
}
@-moz-keyframes
-amp-start{
from{visibility:hidden}to{visibility:visible}
}
@-ms-keyframes
-amp-start{
from{visibility:hidden}to{visibility:visible}
}
@-o-keyframes
-amp-start{
from{visibility:hidden}to{visibility:visible}
}
@keyframes
-amp-start{
from{visibility:hidden}to{visibility:visible}
}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none;
}
</style>
</noscript>
Essa página (em inglês) pode ser utilizada para configurar os elementos básicos do seu Boilerplate code. Isso dará ainda mais foco para a criação de uma página robusta e alinhada com as demandas dos seus consumidores. Por isso não deixe de utilizar essa estratégia sempre que possível!
Vender pela web é uma ótima abordagem para qualquer empresa. Se feito do modo certo, o negócio conseguirá ampliar o seu público-alvo e reduzir o custo de aquisição de clientes. Por isso todo cuidado deve ser tomado para reduzir problemas de usabilidade e garantir a visibilidade da página web.
Garantir que o seu e-commerce seja composto por páginas AMP é um dos passos que qualquer negócio deve adotar nesse sentido. Isso garante um melhor ranqueamento no Google e um tempo de carregamento mais baixo. Assim, o seu cliente poderá sempre focar no que importa na hora de comprar algo: escolher o produto que melhor se adapta às suas demandas.
Gostou dessa dica? Então assine já a nossa newsletter para receber mais textos da iugu!
