Vamos falar de AMP Project de novo

Eu fiz um post no Tableless sobre páginas construídas com AMP HTML em Julho passado, pois alguns meses anteriores ao post eu participei de um projeto de construção do output AMP de conteúdos produzidos em um CMS proprietário e muitos desenvolvedores ainda não estavam trabalhando com o formato.
 De lá pra cá, a linguagem envoluiu, passou por melhorias e recebeu features que foram incorporadas à documentação oficial.

No projeto de entrega AMP de notícias do início do ano, tínhamos o objetivo de entregar os seguintes elementos: textuais (título, sumários, etc;), imagens, galerias, embeds e iframes. Era basicamente essa a estrutura que deveria ser entregue.
 Com as atualizações na documentação oficial e de componentes, conseguimos ampliar a entrega para uma página com menu dinâmico e uma barra de compartilhamento em redes sociais.

Na prática seguimos os seguintes passos:

  • Criamos a estrutura html, header e corpo AMP, seguindo as regras de formatação do projeto
     [https://www.ampproject.org/docs/tutorials/create/basic_markup];
  • Limpamos tags e parâmetros, não aceitos pelo validador AMP, do body do código fonte (Ex: <style>);
  • Transformamos tags [https://www.ampproject.org/docs/guides/amp_replacements.html]:
  • <img> em <amp-img>,
  • <iframe> em <amp-iframe>,
  • embeds do Twitter, Facebook e demais — conforme indicação da documentação,
  • aplicamos a estrutura <amp-carrousel> para as galerias,
  • utilizamos o componente <amp-sidebar> para criar um menu dinâmico
  • e para cada possibilidade de compartilhamento, os componentes <amp-social-share>.
  • Condensamos o CSS para que ele obedeça as regras de peso e quantidade de caracteres.

Depois disso, validador instalado no Chrome e testes. A cada erro encontrado, correção [https://www.ampproject.org/docs/guides/validate].

É claro que essa metodologia foi aplicada à um caso onde o próprio CMS não oferece o output pronto, mas se seu publicador é um Wordpress por exemplo, existe um pluggin que pode te ajudar a resolver todos esses itens automaticamente.

Ok! Parte técnica explicada mas, qual é a vantagem de ter uma entrega AMP do meu conteúdo?

A principal é a amplitude nos resultados orgânicos mobile do Google. Em sites com grande acesso, esse número pode chegar à porcentagens consideráveis. No caso do projeto acima, aumentamos em 20% os resultados orgânicos.

Outra vantagem é a velocidade de carregamento — principal objetivo de ser necessária uma mudança estrutural na linguagem de marcação — e a possibilidade de aplicar o formato em conjunto com uma estratégia de PWA — Progressive Web App.

De qualquer forma, você vai perceber que apesar do trabalho a mais, é o começo de algo maior encabeçado pelo Google e seu site não pode ficar atrás.

Se você se interessou em conhecer mais sobre a iniciativa, acessa o site oficial aqui e entra no canal do projeto no Slack. Lá você pode participar das discussões técnicas que posteriormente entram no roadmap de implementação.

É isso.

Até a próxima!

;)


Originally published at Thaiana Poplade.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.