O que são AMP Stories?

Afina, o que são AMP Stories? Project Accelerated Mobile Pages “AMP” é um projeto de código aberto, criado da discussão entre publicadores de conteúdo e empresas de tecnologia para melhorar o desempenho desse ecossistema (publicadores de conteúdo, usuários, anunciantes, etc) como um todo.

The Accelerated Mobile Pages - Kip Tecnologia
Accelerated Mobile Pages

O Projeto AMP se propõe a trazer uma web mobile otimizada como um todo, visando carregamento do conteúdo instantaneamente. Obviamente que não instantânea, mas com essa essência em sua concepção como projeto.

O projeto AMP traz a solução do que diversas iniciativas tem se proposto nos mais diferenciados formatos como PWA para aplicações e outras iniciativas javascript para carregamento do assíncrono das informações. Para uma referência de partida, imagine o antigo plugin lazy load do jquery que carregava as imagens apenas quando a página estava visível.

O intuito do projeto não é limitar a capacidade de criar interfaces ricas ou com elementos gráficos interessantes, mas sim o core para implementação otimizada de conteúdo.

Veja um exemplo aqui do AMP Stories em funcionamento.

Como implementar AMP Stories?

AMP Stories são páginas HTML com especificações para carregamento mais veloz no dispositivo móvel. Com a diferença de possuir algumas especificações para produção do código html.

Basicamente para iniciar a implementação você precisa adicionar a tag javascript no head de sua página:

<script async src="https://cdn.ampproject.org/v0.js"></script>

Com bom conhecimento de HTML se torna mais simples para implementar AMP Stories, caso tenha dificuldades de implementar você pode contactar aqui quem pode te ajudar.

Caso você já possua um blog ou página que deseja aplicar o AMP, você também pode referenciar novas páginas (lembre-se de incluir a tag <link rel=”canonical”> para evitar duplicidade de dados).

Para isso o próprio google utiliza uma ferramenta que auxilia na referenciação de conteúdo:
https://developers.google.com/amp/cache/reference/acceleratedmobilepageurl/rest/

Esperamos que essa introdução lhe ajuda e esclarecer o que são as AMP Stories, se ficar alguma dúvida fique à vontade para nos contactar. Ficaremos felizes em poder auxiliar em qualquer dúvida! Até a próxima =)

Veja um exemplo aqui do AMP Stories em funcionamento.