AMP

Criar páginas HTML para AMP

A marcação a seguir é um bom ponto de partida ou modelo. Copie e salve o código em um 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, AMP</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,minimum-scale=1,initial-scale=1">
    <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>Bem-vindo à internet móvel</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 a marcação obrigatória.

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 das 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 usar o HTTPS?.

Marcação obrigatória

Os documentos HTML para AMP PRECISAM seguir estas regras:

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 é possível 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 HTML para AMP. Caso essa versão não exista, essa tag redirecionará para o próprio documento atual. Saiba mais em Torne sua página detectável.
Conter uma tag <meta name="viewport" content="width=device-width,minimum-scale=1"> dentro de <head> (recomendado: 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 modelo AMP em <head> O modelo de 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 Pesquisa Google.

Acesse estes recursos para saber mais:


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 tem 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.