AMP no WordPress – Accelerated Mobile Pages, páginas otimizadas para dispositivos móveis

AMP no WordPress, AMP que vem do inglês, Accelerated Mobile Pages, “páginas aceleradas para dispositivos móveis” é um projeto de código aberto. Seu objetivo é aumentar o desempenho das paginas em HTML convencionais em smartphones, gerando uma versão alternativa da página.

A justificativa do AMP Project é a grande limitação dos smartphones quando o assunto é a conexão com a internet. Lenta e de banda limitada. Outro ponto é o próprio hardware de alguns celulares, que tem dificuldade em processar páginas grandes, carregadas de javascript, efeitos e imagens.

Quando o objetivo é divulgar uma noticia, um artigo ou um simples post no blog, você não precisa de todos os recursos que uma página HTML convencional disponibiliza e é ai que entra o AMP.

A grande ideia por de traz do AMP é reverter esse cenário, gerando páginas HTML “limpas”, rápidas e objetivas. Páginas levam em conta às técnicas de UI e UX que mais se encaixam aos usuários mobile.

Uma nova “versão” do HTML

O “pulo do gato” por de traz desse projeto é uma variante do HTML que é utilizada para gerar as páginas AMP. Essa “versão” customizada do HTML conta com algumas tags personalizadas, propriedades e um monte de restrições, tudo isso para forçar que o conteúdo realmente seja otimizado.

Outro ponto forte nessa otimização, é o AMP JS, framework javascript especifico para mobile, aumentando ainda mais o desempenho das paginas, afinal, javascript consome bastante memória e processamento.

Neste links, temos o tutorial completo para você criar páginas AMP: https://www.ampproject.org/docs/get_started/create

Link do Github do projeto: https://github.com/ampproject

Exemplo de HTML:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

 

AMP no WordPress

AMP no WordPress é simples, se você já utiliza o WordPress, você está na frente, pois é possível instalar um plugin que irá fazer todo o trabalho para você, disponibilizando a versão AMP de seus Posts, sem precisar escrever uma unica linha de código.

AMP for WP – Accelerated Mobile Pages – https://br.wordpress.org/plugins/accelerated-mobile-pages/

Eu testei ele aqui no blog e realmente funciona muito bem.

Após instalado e ativado, basta carregar uma pagina com /?amp no final da URL, para visualizar a versão otimizada.

No Google, AMP faz a diferença

Google, como todos nós sabemos, está constantemente aprimorando o seu sistema de busca e o desempenho das paginas que ele sugere aos seus usuários são extremamente relevantes, ainda mais se o cara estiver no smartphone, com aquela 3G “super rápida”.

Pensando nisso, o Google faz o cache das páginas AMP em seu servidor para que os usuários de smartphone as utilizem.

Automaticamente ele sugere essas versão das páginas no seus resultados de busca.

Dessa forma o usuário baixa “acessa” o conteúdo muito mais rápido, pois ele está salvo no CDN da Google além também das páginas AMP serem uma versão super leve do conteúdo.

Não é tão simple assim, para que sua página AMP seja salva pelo Google, você terá que seguir a risca os padrões do AMP.

Neste link: https://www.ampproject.org/docs/guides/validate você terá maiores instruções de como validar sua página AMP.

Conheça mais sobre o AMP Project neste vídeo.

Tópicos do AMP Project, para pesquisa:

• AMP HTML
• AMP JS
• Google AMP Cache