Certo dia você acorda, liga seu smartphone e faz uma pesquisa no Google com aquela internet 4G lenta. Então você nota algo diferente: alguns resultados apresentam a sigla AMP abaixo do título. Quando você entra na notícia, o conteúdo é apresentado INSTANTANEAMENTE, sem nenhum tipo de bloqueio ou carregamento demorado.
Esta é a promessa da tecnologia do Google chamada Accelerated Mobile Pages (Páginas Móveis Aceleradas). O AMP é uma solução Open Source e que já pode ser aplicada a qualquer momento por qualquer desenvolvedor.
Conteúdo em primeiro lugar
Nos últimos tempos, podemos notar algumas ações que o Google vem tomando para priorizar sites que facilitam o acesso ao conteúdo. Uma dessas ações é a punição para sites que utilizam popups que bloqueiam a experiência do usuário.
Estudos do Google demonstram que 40% dos usuários desistem de ler a notícia no smartphone se o tempo de carregamento demorar mais do que 3 segundos ou se a experiência de leitura for bloqueada por algum tipo de popup. Uma página mobile hoje leva em média 8 segundos para carregar, devido a internet móvel precária aliada a complexidade das páginas.
O AMP resolve esta situação por completo, pois possui diversas regras em sua implementação que obriga a página a carregar o mínimo de recursos possível.
Para estas páginas super otimizadas, o Google está reservando um espaço especial no início do resultado de sua pesquisa:
AMP impacta em SEO?
Com este espaço privilegiado, acima da dobra, as páginas com AMP possuem muito mais destaque no resultado da pesquisa, atraindo mais clicks e visualizações. A página utilizar a tecnologia AMP é um fator que afeta o ranking orgânico do Google, já que hoje o destaque inicial após os anúncios pagos é justamente o carrossel de notícias que aplicaram o AMP no código.
Todas as ações do Google quanto a priorização deste conteúdo, mostram de forma clara a intenção de transformar a web em uma plataforma mais amigável para os usuários, e os sites por bem ou por mal devem se adaptar a este conceito.
Dica: A Orgânica é uma Agência de Marketing de Conteúdo especialista em Vendas. Saiba mais!
Implementação
A implementação de uma página AMP consiste em três conceitos: AMP HTML, AMP JS e AMP CACHE.
O AMP HTML é basicamente um HTML utilizando algumas regras e elementos customizados do AMP. Todas as imagens e conteúdos que normalmente alteram o tamanho da página em tempo de execução, devem ser previamente calculados para não ocorrer esta oscilação.
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Sample document</title>
<link rel="canonical" href="./regular-html-version.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
h1 {color: red}
</style>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "NewsArticle",
"headline": "Article headline",
"image": [
"thumbnail1.jpg"
],
"datePublished": "2015-02-05T08:00:00+08:00"
}
</script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Sample document</h1>
<p>
Some text
<amp-img src=sample.jpg width=300 height=300></amp-img>
</p>
<amp-ad width=300 height=250
type="a9"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
</body>
</html>
O AMP JS aplica as melhores práticas de otimização de performance e garante o funcionamento das tags personalizadas que o AMP HTML disponibiliza.
Nenhum Javascript bloqueante é permitido neste tipo de página, apenas considerando os recursos assíncronos.
Além disso, diversos seletores CSS que podem prejudicar a performance não são permitidos e são desabilitados.
O AMP CACHE é responsável por entregar as páginas AMP com o menor tempo de carregamento possível. Todos os assets são carregados utilizando HTTP 2.0. O mecanismo de pesquisa da Google realiza o cache das páginas AMP, tornando a resposta quase instantânea.
Em linhas gerais, o AMP funciona como uma página duplicada: Na página com HTML normal, deve ser colocado no <head> um elemento <link> com o endereço da página AMP, e igualmente a página AMP deve conter <link> com o endereço da página normal.
A velocidade de carregamento de uma página AMP, mesmo sem contar com o AMP CACHE (que deixa o carregamento quase instantâneo), é muito superior ao da página HTML normal.
Para um guia completo de como implementar uma página AMP, consulte a documentação oficial em português do AMP Project.
Open Source
O Google não está apenas ditando como a internet deve funcionar, e sim incluindo todos os usuários nessa discussão.
Mesmo sendo propriedade da Google, o AMP está disponível no Github para que a comunidade possa participar e decidir o rumo desta tecnologia.
Web Stories
Outra funcionalidade legal do AMP é criar visual stories no seu site, uma forma criativa de distribuir conteúdo.
Muito similar aos formatos de stories utilizados no Instagram e Facebook, o Web Stories permite a construção de histórias visuais e atrativas, possibilitando gerar mais tráfego para seu site atraindo a atenção do leitor de uma forma dinâmica.
Além de possibilitar o leitor a consumir conteúdo de uma maneira interativa, o formato ainda tem suporte para exibir anúncios e pode ser compartilhado e incorporado em outros sites e aplicativos, dentre outros benefícios.
Essa funcionalidade é gratuita e está disponível para todos que queiram testar a ferramenta em seus websites.
Você pode adicionar Web Stories no seu site de duas maneiras: através de alguma ferramenta ou manualmente. Caso tenha ficado interessado, no próprio site do AMP existe um tutorial para você criar seu primeiro Stories.
Conclusão
Para a maioria dos brasileiros, incluindo eu, que possuem uma internet móvel lenta, este projeto realmente mudou vidas.
Por experiência própria, estou buscando abrir somente resultados do Google que possuem a tecnologia AMP, por simplesmente pouparem o tempo de carregamento.
Em pouco tempo, já é possível notar um crescimento gigantesco de sites que aderiram ao AMP. Seguindo esta tendência, possivelmente a inclusão desta funcionalidade se tornará um comportamento padrão de boa prática.
Quer contar com o apoio de uma agência de Marketing Digital para isso? Basta entrar em contato com a gente!
