Blog fellyph cintra - cropped primeira pagina AMP

Criando primeira página 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 amp validator
web validator

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

Screenshot com o validador com alertas para correção de conteúdo válido amp
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
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
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:

listagem de erro para correção de leitura de css

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


Publicado

em

por

Tags:

Comentários

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *