Lauro Becker

Por   

 20/10/2020 

COO, atua desde 2005 com tecnologia, internet, projetos e processos de inovação.

✓ Conteúdo criado por humano

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": "http://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!


Você quer
aumentar suas vendas
através do Marketing Digital?

Receba gratuitamente o Diagnóstico Content+Performance, a metodologia de Marketing Digital da Orgânica!

Quero saber como Vender Mais

Quer uma consultoria gratuita de marketing digital?

Assine nosso blog

E entenda como transformar audiência em vendas.

Assine nosso blog

E entenda como transformar audiência em vendas.