Neil Patel

Espero que você goste desse artigo. Se você quer que meu time faça o seu marketing, clique aqui.

AMP: o que é, como funciona e como implementar no seu site

Apesar de não ser propriamente uma novidade, o AMP é um recurso ainda pouco explorado.

Segundo um estudo de 2019 da Portent (em inglês), um tempo de carregamento de 0 a 4 segundos é considerado ideal para as taxas de conversão.

De acordo com a pesquisa, as maiores taxas de conversão no e-commerce ocorrem em páginas que levam de 0 a 2 segundos para carregar.

Cada segundo adicional de tempo de carregamento faz com que as taxas caiam em média 4,42%.

São números que evidenciam uma verdade: na internet, tempo realmente é dinheiro, e em uma escala de segundos.

Para aproveitá-lo da melhor forma, o AMP é uma solução fácil de implementar, com ótimos resultados.

Neste artigo, eu vou contar tudo o que você precisa saber sobre ele.

Acompanhe atentamente até o fim, você só tem a ganhar.

AMP

O que é AMP?

Accelerated Mobile Pages é o nome do projeto liderado pelo Google em 2015, do qual participaram Linkedin, Twitter e Pinterest.

O objetivo foi desenvolver uma tecnologia que permitisse que sites carregassem quase instantaneamente, melhorando assim a experiência do usuário.

Embora a tecnologia AMP seja aplicável a sites para desktop, é no mobile que ela se aplica com melhores resultados.

Afinal, segundo o site Statista (em inglês), 54,4% do tráfego global da internet se concentra hoje em dispositivos móveis.

Portanto, é essencial contar com uma página otimizada para abrir no menor tempo possível.

Como funciona o AMP?

Ao abrir um site, você possivelmente já observou que certas partes demoram mais para carregar do que outras.

Isso acontece porque, em muitos casos, as páginas contêm elementos dinâmicos, ou seja, que abrem de diferentes formas, mostrando conteúdos e recursos contextualizados.

Partindo desse princípio, a AMP é a tecnologia que prioriza a abertura somente daquilo que é essencial, tanto em desktop quanto em sites mobile.

Para alcançar esse objetivo, ela utiliza três tipos de código. 

Cada um deles atua em um processo específico do carregamento de um site, mas o objetivo final é um só, ou seja, tornar sua abertura quase instantânea.

Vamos conhecer cada um deles a seguir.

AMP

AMP HTML

O AMP HTML é um código de programação que trabalha com restrições a certos tipos de elementos e que conta com tags do tipo AMP.

O objetivo é acelerar as páginas web e proporcionar melhor desempenho, reduzindo o código HTML normal a uma versão mais “enxuta”. 

Sendo assim, algumas tags HTML regulares são substituídas por tags AMP, que são veiculadas durante o carregamento da página pelo script baseado na biblioteca AMP. 

Ele trabalha com recursos de remoção, nos quais não são permitidos conteúdos externos, que passam a ser colocados em uma tag de estilo na head da página.

AMP JS

O AMP JS (de Javascript) também permite o carregamento rápido, ao dessincronizar elementos da página que dependam de recursos externos para serem exibidos.

Isso é feito por meio da biblioteca AMP JS, que garante a renderização rápida de páginas HTML em código AMP.

A biblioteca JS viabiliza as melhores práticas de desempenho do AMP, como CSS inline e acionamento de fonte, por exemplo.

Assim, ela é fundamental para o carregamento, fornecendo tags HTML personalizadas para garantir uma renderização rápida.

Por isso, é também uma forma de carregar mais rapidamente recursos que dependam de linguagem Javascript, praticamente obrigatória na maioria dos sites.

Google AMP Cache

Ferramenta opcional, o AMP Cache do Google permite que os conteúdos armazenados em cache AMP carreguem ainda mais rápido.

Cabe destacar que o AMP é uma tecnologia de código aberto, acessível para ser melhorada por qualquer usuário.

O Google AMP Cache é uma forma de se introduzir seu uso, já que pode ser configurado por todos, por meio das atualizações de conteúdo AMP.

Para isso, basta usar a solicitação “update-cache” e remover conteúdo do Cache de AMP do Google.

Dessa forma, é preciso implementar algumas modificações no código HTML do site, de modo que o armazenamento em Cache passe a ser feito conforme o protocolo AMP.

Quais são as principais vantagens?

A velocidade de carregamento é fundamental para o sucesso de uma página.

Como vimos, cada segundo conta muito para a experiência do usuário, que é determinante em termos de audiência e, principalmente, para assegurar melhores taxas de conversão.

A AMP existe para melhorar esse aspecto que pode, inclusive, fazer com que um site ganhe ou perca posições na SERP.

A tendência é que um site com AMP seja melhor ranqueado do que um que não tenha.

Isso acontece em razão das diversas vantagens proporcionadas, não apenas a velocidade por si só, mas também outros aspectos da usabilidade de um site.

Confira a seguir.

Acessibilidade da página

O termo acessibilidade está frequentemente associado aos meios usados para garantir que pessoas com limitações físicas tenham assegurado o direito de ir e vir.

Em sites, esse é um atributo essencial no sentido de tornar as informações facilmente pesquisáveis e encontradas com mais facilidade.

A tecnologia AMP é, nesse aspecto, um tremendo avanço para expandir ainda mais o acesso à informação.

Para quem está à frente de um negócio, ela é indispensável, já que pode ser implementada também em lojas virtuais.

Maior visibilidade

amp

Os robôs do Google são implacáveis com páginas que carregam lentamente.

Tanto que, depois da AMP, os resultados orgânicos podem vir com uma notificação, dando conta de que o site conta com essa tecnologia ou que o seu carregamento é lento.

Portanto, contar com um alerta AMP é uma garantia a mais para que uma página apareça com destaque na SERP.

Do contrário, um alerta de site lento é quase como uma condenação, reduzindo o tráfego e, em consequência, o número de conversões.

Não se esqueça de que, para converter, você precisa gerar um volume de visitantes que mantenha o seu funil de vendas sempre “cheio”.

Por isso, a AMP é fundamental para gerar mais acessos e visibilidade.

Melhorar sua estratégia de SEO

Otimizar um site para os motores de busca envolve uma série de aspectos técnicos, dentre os quais melhorar a velocidade de carregamento de um site.

De pouco adiantaria manter um blog repleto de bons conteúdos e palavras-chave estratégicas se esses conteúdos demoram a abrir.

A AMP é mais um recurso com que você pode contar para melhorar seus resultados em estratégias de SEO on page.

Ela se aplica tanto para a parte textual como para conteúdos multimídia e é inclusive muito indicada para otimização de vídeos.

Facilidade na análise do usuário

Outro ponto extremamente positivo da AMP é que ela facilita a análise dos elementos de uma página pela ótica da experiência do usuário.

Antes, era muito mais difícil avaliar se um site estava realmente otimizado, já que cada elemento era formatado segundo uma linguagem própria.

A partir da AMP, basta configurar uma página para ter seus conteúdos mostrados por meio dessa tecnologia.

Ou seja: para saber se um site de fato oferece uma boa User Experience (UX), basta conferir se, em seus códigos, está o comando ou linha .amp

Você pode, por exemplo, conferir isso facilmente pela URL.

Se no final ela tem a tag /amp, significa que está otimizada para uma navegação mais rápida.

Sua reputação em alta

A Hubspot publicou uma compilação de estatísticas sobre velocidade (em inglês), entre as quais um dado chama a atenção: 38% das pessoas simplesmente param de interagir com um site quando não se sentem atraídas pelo layout.

Isso faz parte da lógica omnichannel de consumo, segundo a qual, a boa experiência de um usuário cada vez mais exigente é fundamental para consolidar a imagem de uma marca.

Oferecer uma navegação lenta faz parte disso, afinal, uma página que demora a abrir impede que as pessoas vejam e acessem seus conteúdos.

Dessa forma, contar com a tecnologia AMP é mais uma maneira de aumentar indiretamente a brand equity, ou seja, o valor da marca, melhorando sua reputação.

Quais sites são mais beneficiados?

Um aspecto sobre AMP que acho muito legal é o fato de ser uma tecnologia de código aberto.

Ela pode ser aprimorada por todos que se habilitem a contribuir, assim como já se faz em outras tecnologias open source.

Essa abertura democratiza o acesso aos recursos, beneficiando todos os sites, não importa o dispositivo ou sistema operacional pelo qual sejam acessados.

Do último iPhone ao mais simples dos smartphones, todos são beneficiados quando um site está configurado para abrir em AMP.

De qualquer forma, são as versões mobile as principais beneficiadas, já que celulares têm naturalmente uma capacidade mais restrita para trabalhar com certos recursos.

Quais os lados negativos da AMP

A exemplo de outras tecnologias, a AMP está em permanente processo de aperfeiçoamento.

Embora ela seja fundamental para assegurar uma experiência de navegação melhor, ainda tem limitações que precisam ser consideradas.

Uma delas é a falta de folhas de estilo em conteúdos externos com Javascript.

Isso faz com que as páginas abram com um visual demasiado simples, com aspecto que às vezes beira o medíocre.

Para quem precisa de um apelo visual mais forte, isso pode ser um dificultador, principalmente para conteúdos dinâmicos em imagens e vídeos.

Além disso, a implementação da AMP gera impactos em termos de autoridade de domínio e no ranqueamento, caso a configuração para evitar conteúdo duplicado não seja feita corretamente.

Há ainda outros aspectos que precisam ser considerados ao configurá-la em um site, como veremos na sequência.

Dificuldade de personalização

A partir do que vimos, a quantidade de folhas de estilos é bastante pobre em AMP.

Por priorizar a abertura somente do que é essencial em um site, ela deixa de lado os elementos visuais mais impactantes, empobrecendo o conteúdo.

Assim, pode acabar nivelando as páginas por baixo, fazendo com que tenham um aspecto quase idêntico.

Dificuldade de acompanhamento de métricas

Outra questão que precisa ser melhor trabalhada na AMP é o monitoramento dos resultados nas ferramentas Google.

No Analytics, por exemplo, existe uma área só para análise das páginas em AMP, assim como no Search Console.

Isso demanda todo um esforço de implementação, de modo que cada site tenha duas versões, uma sem e outra com AMP.

Como implementar AMP em seu site?

html amp

Para que o conteúdo de uma página seja visualizado em AMP, você precisará inserir uma espécie de código que vai criar uma versão otimizada nesse formato.

Assim, as páginas originais passam a ser do tipo canônica, dando origem a uma segunda página, com o mesmo conteúdo escrito, mas de carregamento rápido.

Por sua vez, esse processo gera um problema, que é a duplicação de conteúdo, uma falta que pode inclusive ser penalizada pelo Google.

Isso pode ser evitado inserindo em cada página AMP uma tag para a página canônica, sinalizando para os robôs do Google que aquela página tem uma versão principal.

Essa marcação é feita com uma linha em HTML como esta:

<link rel=”amphtml” href=”http://www.neilpatel.com/blog/amp/”>

No WordPress

Já no WordPress, a configuração começa pela opção “Plugins” no menu à esquerda.

Na nova janela, clique em “Adicionar novo”.

No buscador interno, procure pelo plugin “AMP for WP – Accelerated Mobile Pages”.

Depois, é só ativá-lo e você já terá um site em versão AMP.

Google Analytics

Uma vez que o plugin AMP esteja instalado, você precisará configurá-lo para indexar e rastrear as novas páginas no Google Analytics.

Acesse o Analytics e, no campo de busca, digite “ID de acompanhamento”, copiando o código.

Depois, vá ao WordPress e acesse “AMP” no menu à esquerda, inserindo o código de rastreamento obtido no Analytics. 

Insira o código no campo correspondente e suas páginas começarão a ser indexadas em formato AMP.

Como testar o uso do AMP

Depois de configurar o Analytics, acesse “Design” no menu dentro da opção “AMP”.

Clique em “Launch Post Builder” e, na nova tela, escolha “AMP” e “Aparência”.

Faça as edições conforme suas preferências e, se necessário, salve as modificações (normalmente, o WordPress salva automaticamente).

Conclusão

A tecnologia AMP é certamente um avanço, mas, para que ela traga os resultados esperados, é fundamental saber configurá-la página por página.

Para e-commerces, esse processo tem que ser ainda mais cuidadoso para que o conteúdo exibido em AMP continue gerando engajamentos e conversões.

E você, tem algum site já configurado para ser exibido em versão acelerada?

Use o espaço dos comentários e divida com a gente a sua experiência!

Compartilhe