Criando primeira página AMP

Blog fellyph cintra - cropped primeira pagina AMP

Nesse post você irá criar a sua primeira página com o framework AMP, uma biblioteca de componentes web focado em performance e experiência do usuário. Vamos cobrir os principais conceitos para construir uma página com o framework.

No meu canal gravei um curso focado na tecnologia onde você pode conferir aqui:

Nos primeiros vídeos e posts fiz a apresentação do nosso projeto. Agora aprenderemos a criar a nossa primeira página e ver quais os requisitos básicos para publicar a nossa primeira página válida.

O que é AMP Framework?

É um framework que surgiu com o foco no desempenho e entrega de conteúdo. A sua biblioteca de componentes é ideal para a criação de sites, matérias, e-mails e anúncios. Com AMP, você tem a certeza de que está trabalhando com uma plataforma focada no usuário.

Os seus componentes foram desenvolvidos pensando na rapidez de carregamento e na melhor experiência possível para o internauta. O Framework é uma ótima escolha para quem quer ter resultados positivos como audiência e conversões. Além disso, os seus componentes são responsivos e funcionam perfeitamente em dispositivos móveis.

Requisitos básicos

  1. Primeiro precisamos sinalizar que temos conteúdo AMP através de um emoji de raio ou adicionando a palavra AMP na nossa tag HTML.
  2. Carregar o script da biblioteca.
  3. Utilizar ferramentas como validador para deixar a nossa página 100% compatível.

AMP validator

O validator tem uma importância especial pela seguintes razões:

  1. Manter a qualidade do seu código como acessibilidade e performance
  2. Somente conteúdo válido será entregue pelo AMP cache
  3. Não fique desmotivado caso tenho uma série de erros de validação isso é um sinal que você terá uma série de melhorias no seu código.

Para utilizar o Validator você pode utilizar 4 versões:

Vamos utilizar um simples código HTML para fazer a nossa primeira conversão, para ativar o validator precisamos adicionar o atributo amp na tag Para validator reconhecer o conteúdo adicionamos na nossa tag HTML o parâmetro amp:

<!DOCTYPE html> <html amp> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1"> <meta name="description" content="nossa primeira página amp"> <head> <title>Como validar uma página AMP</title> </head> <body> Olá AMP </body> </html>
Code language: HTML, XML (xml)

Quando testamos o código acima no validator web temos o seguinte retorno:

web validator

No caso esteja a utilizar a extensão Chrome o retorno será através de um ícone no topo superior direito.

Exemplo de validação de páginas

AMP Cache

Cache utilizado por mecanismos de busca como Bing e Google eles realizam o preload da primeira página da sua aplicação assim realizando o carregamento quase que instantâneo da sua aplicação.

O cache realiza otimização automática da sua aplicação com:

  • Cache imagens e fontes
  • Comprime imagens
  • Converte imagens em formatos como Webp caso o navegador suporte.
  • Limpeza do HTML para prevenir ataques XSS

Anatomia de uma página AMP HTML

O framework é dividido em três itens, AMPJavaScript, AMP HTML e AMP cache assim com esses itens você irá criar a suas amp pages. Todas as páginas iniciam com o mesmo código base com requisitos obrigatórios:

  • Atributo AMP na tag HTML
  • viewport tag
  • Chamada para o JavaScript da biblioteca.
  • Boilerplate CSS

Esse código é chamado de AMP boilerplate, podemos gerar o nosso código boilerplate através da página amp.dev/boilerplate lá podemos realizar uma série de configurações no nosso código base, chamada de fontes, suporte a service worker, SEO e Google Analytics:

Tela de configuração do boilerplate

Como observamos na validação anterior apenas um markup básico não é suficiente para criar uma página válida. Aplicando as regras que vimos anteriormente a nossa estrutura básica ficará da seguinte forma:

<!DOCTYPE html>
<html amp>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <meta name="description" content="Este é um Boilerplate AMP.">
    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Como validar uma página AMP</title>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <link rel="canonical" href=".">
  </head>
  <body>
    Olá AMP
  </body>
</html>

Agora temos uma versão válida, como qualquer arquivo HTML uma página precisa de uma tag head e tag body. Mas com uma atenção a três items. A tag script que carrega o script da biblioteca, canonical tag que entraremos em detalhes posteriormente e uma tag stile com o CSS boilerplate. Com isso temos o seguinte resultado:

Ferramenta de inspeção de código

Canonical tag

Um dos pré-requisitos para ter uma página válida é a tag canonical ela é responsável por informar se conteúdo carregado possui uma versão não AMP, para o mecanismo de busca não identificar a sua página AMP como conteúdo duplicado. Caso possua apenas a versão AMP aponte para própria página. No nosso caso na linha 11 definimos a nossa propriedade com “.”

Viewport meta responsável por definir como a sua aplicação vai responder visualmente a múltiplos devices. Na linha 10 temos o CSS responsável por esconder o conteúdo da página enquanto a aplicação é processada pelo JavaScript. Você não precisa editar esse arquivo mantenha do jeito que copiar.

Por fim temos o carregamento da biblioteca JavaScript, a primeira tag link na linha 7 é responsável por realizar o preload do script e na linha seguinte tag script realiza o carregamento detalhe para async na tag ele determina que o nosso script será carregado de forma assíncrona.

CSS

Ok, temos o nosso markup básico, mas caso queiramos carregar um arquivo CSS teremos um seguinte erro no validator:

Mensagem não ajuda muito, mas isso significa que a tag link com AMP só é válida para fontes e, além disso, para um set específico de fontes:

  • Fonts.com
  • Google Fonts
  • Font Awesome
  • Typekit

No caso do style customizado teremos que adicionar de forma Inline, isso é um requisito para reduzir o número de requisições e também ajudar no cache da sua aplicação. Além disso, ele precisa ser adicionado numa tag <style amp-custom> e os requisitos são os seguintes:

  • 75 KB por tag
  • Somente uma tag por página
  • O uso de !important é totalmente proibido.
  • Seletores CSS não podem começar com ‘-amp-‘

O projeto usado no curso está no repositório: https://github.com/fellyph/the-best-caipirinha/ as aulas serão separadas por branches, no próximo post veremos como trabalhar com imagens.

Conteúdo relacionado

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.