AMP Pages: O que é, e porque devo usar
Primeiramente, vamos entender o que são páginas AMP, ou Páginas Mobile Aceleradas (do inglês Accelerated Mobile Pages), são páginas que carregam muito mais rápido que uma página web comum. São criadas com HTML “puro” completamente otimizado para velocidade.
Páginas AMP
As páginas AMP existem desde 2015, graças a um projeto do Google. Este projeto tem como fundamento se preocupar com a velocidade que as páginas são carregadas para o usuário. Logo quando começou a ser usado o AMP não existia quase nenhuma documentação. Hoje já temos uma documentação oficial para que os donos de websites possam seguir. Como podemos imaginar, devemos seguir a risca esta documentação.
Afinal, o Google prioriza (e muito) sites que carregam rápido. Podemos saber disso pelos serviços do Google como o Pagespeed, Teste meu Site, Think With Google etc.
Como elas Funcionam?
AMP pages tem basicamente 3 conceitos fundamentais, são eles:
- AMP HTML: É uma versão praticamente igual ao HTML que já conhecemos, porem mais otimizada para os buscadores;
- AMP JS: Este é um framework JS, que tem como objetivo o carregamento assíncrono e mais rápido;
- AMP CDN: Este não é obrigatório, mas a função dele é basicamente gerar cache, e garantir que o conteúdo seja carregado ainda mais rápido.
É primordial entendermos que estas páginas de carregamento acelerado são outras versões de páginas já existentes. Assim como seu site em versão para Desktop e versão Mobile. Ambos são o mesmo, possuem o mesmo conteúdo.
Pensando nisso, devemos marcar nossa página de carregamento rápido como tal. O google só irá reconhecer sua página se ela for devidamente marcada. Falaremos disso nos exemplos na prática.
Como fazer?
Antes de mais nada você basicamente só precisa de uma página desenvolvida com os requisitos que são especificados na documentação.
Está é a estrutura básica da página, dentro dela iremos usar tudo o que temos em nossa documentação.
Continuando com AMP…
Após desenvolver sua página, como dito anteriormente, precisamos informar aos buscadores a nossa versão de página AMP. Para isso usamos o mesmo principio do canonical
Sendo assim, na página principal (aquela que carrega em todos os lugares) definimos o seguinte:
<link rel="amphtml" href="http://www.drcode.com.com.br/blog/minhapagina-amp.html">
E em nossa página AMP:
<link rel="canonical" href="http://www.drcode.com.br/blog/minhapagina-normal.html">
Assim como no mobile não necessitamos de um XML para sitemaps, para estas páginas de carregamento rápido também não. Somente lincarmos nosso amphtml e o canonical já basta para o google entender.
Implementar será uma tarega fácil dependendo da estrutura de seu site e conteúdo. Caro você use algum tipo de CMS, exitem plugins para eles. No momento do desenvolvimento, você poderá testar sua página usando o parâmetro #development=1 na url. Com isso, será exibido erros (caso tenha) no console do navegador.
Finalizando
Ainda assim lembrar que pra quem utiliza plugins de compactação como: Cloudflare ou plugins de otimização, poderá enfrentar problemas. Já que muitas vezes estes plugins removem trechos de códigos que são essenciais para o desenvolvimento dessas páginas AMP. Mas de todo modo, vale testar sempre seu código.
Quero também deixar aqui alguns links úteis:
O google está cada dia mais considerando os sites de carregamento rápido como mais relevantes. Sites rápidos não só entregam o conteúdo com velocidade, mas também ajudam na experiencia do usuário. Infelizmente as pessoas pensam mais em monetizar do que entregar conteúdo de qualidade e uma boa experiencia para o usuário.
Atualmente este tipo de páginas já é exibido nos países: Brasil, Alemanha, Espanha, França, Reino Unido, Índia, Indonésia, Itália, México, Japão, Rússia e Estados Unidos. Infelizmente por hora, não é possivel utilizar o AMP junto ao Adwords. Mas o Dave Besbris, o dono do projeto, informou que pretende expandir em breve para que passe a funcionar também com o Adwords.
Como sempre, deixe seu comentário. Diga o que achou e não se esqueça de compartilhar o post. Até o próximo.
