Índice

Crie sua página AMPHTML

O código de marcação a seguir é um bom ponto de partida ou boilerplate. Copie e salve esse código num arquivo com extensão .html.

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/pt_br/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <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>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

Até agora, o conteúdo no corpo da página é bem simples. No entanto, talvez alguns códigos adicionais no cabeçalho da página não sejam tão óbvios. Vamos analisar em detalhes a marcação obrigatória.

Use HTTPS: ao criar páginas e conteúdos AMP, é recomendado usar o protocolo HTTPS em vez de HTTP. O HTTPS não é obrigatório para documentos AMP, imagens nem fontes. No entanto, muitos recursos do AMP exigem HTTPS (por exemplo, vídeos, iframes e muito mais). Para garantir que suas páginas AMP aproveitem todos os recursos disponíveis, use o protocolo HTTPS. Se quiser saber mais sobre o HTTPS, leia o artigo Por que o HTTPS é importante?.

Use o Gerador de AMP Boilerplate para começar a criar novas páginas AMP rapidamente.

Marcação obrigatória

Documentos AMPHTML DEVEM obedecer as regras a seguir:

Regra	Descrição
Começar com o doctype `<!doctype html>`	É o padrão para HTML.
Conter uma tag `<html ⚡>` de nível superior (também pode-se usar a tag `<html amp>`)	Identifica a página como conteúdo AMP.
Conter as tags `<head>` e `<body>`	É opcional para HTML, mas obrigatório em páginas AMP.
Conter uma tag `<meta charset="utf-8">` que seja a primeira dentro da tag `<head>`	Identifica a codificação da página.
Conter uma tag `<script async src="https://cdn.ampproject.org/v0.js"></script>` como segunda filha da tag `<head>`	Inclui e carrega a biblioteca JavaScript AMP.
Conter uma tag `<link rel="canonical" href="$ALGUM_URL">` dentro de `<head>`	Direciona para a versão em HTML comum do documento AMPHTML. Caso essa versão não exista, essa tag redirecionará para o próprio documento. Saiba mais em Torne sua página detectável.
Conter uma tag `<meta name="viewport" content="width=device-width">o: incluir também`initial-scale=1`)	Especifica uma janela de visualização responsiva. Saiba mais em Criar páginas AMP responsivas.
Conter uma tag de código de boilerplate AMP em `<head>`	O boilerplate CSS deve ocultar inicialmente o conteúdo até que a biblioteca de JavaScript AMP seja carregada.

Metadados opcionais

Além dos requisitos básicos, nosso exemplo também inclui a definição da Schema.org dentro do cabeçalho. Essa definição não é obrigatória para páginas AMP, mas é um requisito para que seu conteúdo seja distribuído em certos locais, como no carrossel de notícias principais da Busca do Google.

Acesse estes recursos para saber mais:

Primeiros passos com as AMP na Busca Google: aprenda a preparar as páginas AMP para a Pesquisa Google.
Amostras de metadados: saiba mais sobre todos os metadados necessários em outros lugares, por exemplo, no Twitter.

Temos boas notícias! Isso é tudo que você precisa para criar sua primeira página AMP. Claro que, a essa altura, ela ainda não possui muito conteúdo no corpo. Na próxima seção, veremos como adicionar recursos básicos, como imagens e elementos AMP personalizados, estilizar a página e criar um layout responsivo.

Capítulo anterior Próximo capítulo

Written by @pbakaus
with contributions from @bpaduch