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!

Tableless

Um lugar para ler e discutir sobre desenvolvimento, design…

Tableless

Um lugar para ler e discutir sobre desenvolvimento, design, web semântica, back-end e outros assuntos relacionados a web. Se você quiser publicar artigos conosco, envie um email: medium[at]tableless.com.br ou *clique no link* http://bit.ly/escreva-tableless-medium

Andrews Ferreira Guedis

Written by

Front-end developer, UI-UX enthusiastic and guitar player. Art is resistance. http://andrecomws.com

Tableless

Um lugar para ler e discutir sobre desenvolvimento, design, web semântica, back-end e outros assuntos relacionados a web. Se você quiser publicar artigos conosco, envie um email: medium[at]tableless.com.br ou *clique no link* http://bit.ly/escreva-tableless-medium

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store