AMP Project — Criando minha primeira página em AMP HTML

Como criar suas primeiras páginas em AMP HTML e aparecer nos resultados de busca do Google

Reprodução AMP HTML
Este é um dos meus primeiros posts aqui no Medium. Sou desenvolvedor Front-end há mais de 10 anos (comecei na época do HPG, Geocities, Kit.net. Lembra?!). Vou compartilhar algumas experiências sobre desenvolvimento web. Espero que seja útil para você.

O que é o AMP Project?

Mesmo com o potencial crescimento da navegação mobile, muitos sites ainda não conseguem entregar uma experiência satisfatória em conexões 3G ou até 4G. Muitas páginas, até as responsivas, costumam ser lentas em celulares ou travam a renderização das páginas, com publicidades, galerias e outras bibliotecas pesadas.

Reprodução de página da Folha de S.Paulo

O AMP (Accelerated Mobile Pages) é uma iniciativa open-source criada pelo Google junto com grandes publishers (The Guardian, Twitter, The Washigton Post, Folha de S. Paulo, UOL e outros) com o propósito de entregar páginas estáticas de rápido carregamento.

O projeto AMP consiste em três diferentes partes:

O AMP HTML é uma proposta de HTML com algumas restrições para um melhor desempenho. Já o AMP JS é uma biblioteca que garante uma renderização rápida das páginas em formato AMP. E o Google AMP Cache é responsável por fazer cache das páginas no servidores do Google, carregando assim de forma quase instantânea quando clicado.

AMP HTML

Uma página simples em formato AMP consiste basicamente no HTML que já conhecemos hoje, por exemplo:

Apesar de podermos usar muitas tags comuns no HTML, algumas devem ser substituídas por AMP tags específicas. Essas tags customízaveis são chamadas de AMP HTML components (em inglês) e permitem criar padrões comuns de fácil implementação de forma performática.

Um bom exemplo é a tag amp-img que suporta full srcset mesmo nos browsers que não a implementaram até o momento.

Porém, algumas tags não são permitidas ou são substituídas por tags customizadas equivalentes. Exemplo: video, audio, iframe, frameset, object, form, meta, link.

AMP JS

A biblioteca de AMP JS implementa todas as boas práticas que garantem o funcionamento das tags customizadas e garantem uma rápida renderização da página.

Tudo é carregado externamente e de forma assíncrona, sendo assim, nada na página pode bloquear a sua renderização.

Os temidos iframes são carregados em sandboxings, seletores CSS lentos são desativados e há um pré-cálculo do layout de cada elemento na página antes dos elementos serem carregados.

Para saber mais sobre as otimizações e as limitações, leia a especificação AMP HTML (em inglês).

Exemplo de página em formato AMP HTML

Como publicar minhas primeiras páginas em AMP?

Se o seu site já possuí saídas em artigos no formato responsivo, desktop ou mobile, você precisa ter uma nova URL em formato AMP na página:

Exemplo de url original: 
http://dominio.com/noticia/2016/08/pagina-1.html
Exemplo de url em formato AMP: http://dominio.com/amp/noticia/2016/08/pagina-1.html

Rel="amphtml"

É necessário existir uma versão canonical da página e uma versão AMP para que o Google faça a indexação do conteúdo. Sendo assim, um artigo para formato desktop/mobile terá um rel="amphtml" indicando o caminho da URL da página em formato AMP. Na versão AMP HTML terá o oposto, o caminho para a versão original, com um rel="canonical".

Exemplo:

<link rel="amphtml" href="http://dominio.com/amp/noticia/2016/08/pagina-1.html">

Na sua página AMP deve ter o canonical da página a qual ela se refere:

<link itemprop="url" rel="canonical" href="http://dominio.com/noticia/2016/08/pagina-1.html">

Depois isso, cadastre seu site no Google Webmaters Tool e ative a opção de páginas aceleradas para dispositivos móveis. Assim, o Google começará a indexar suas páginas AMP e exibi-las nos resultados de busca, conforme a imagem abaixo:

Carrossel de resultados de páginas AMP do Google exibido no Android.

Google Webmaster Tools

Páginas em formato AMP só são indexadas pelo Google se não possuírem erros no código. É possível verificar possíveis erros de validação ou status de indexação do AMP usando a ferramenta do Google, o Webmaster Tools.

Mais detalhes neste artigo: https://googlewebmastercentral.blogspot.com.br/2016/01/amp-error-report-preview-in-search.html

Validar erros em AMP Pages

Para saber se a sua página em formato AMP é válida, use o atributo #development=1 na URL da página em AMP. Exemplo: http://m.folha.uol.com.br/amp/poder/2015/10/1691644-conclusao-do-congresso-sobre-contas-de-dilma-so-sai-em-2016-diz-cunha.shtml#development=1.

No seu console.log é possível visualizar os erros relacionados ao padrão da documentação.

Existe também uma extensão bem útil do Chrome que verifica estes erros: https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc

AMP Access (Paywall)

Darei mais detalhes nos próximos posts, mas essa é a solução de autenticação para paywall/login fornecida pelo Google.

Github com docs, source e exemplos: https://github.com/ampproject/amphtml/blob/master/extensions/amp-access/amp-access.md

Demo (exemplos): https://rocky-sierra-1919.herokuapp.com/


Mais links úteis:

Fonte: https://www.ampproject.org

Próximo artigo darei exemplo práticos de uso de imagens, galerias, vídeos, áudio, iframe, live blog, autenticação (paywall) e outras novidades do AMP HTML.

Abraços!