Neste codelab, você aprenderá a criar Accelerated Mobile Pages ou AMP. Para isso, você vai implementar uma página da Web simples com artigos de notícias em conformidade com as especificações de AMP e incorporar vários recursos comuns da Web usados com frequência em sites de notícias para dispositivos móveis.
O que você vai aprender
- Como as páginas AMP melhoram a experiência do usuário na Web para dispositivos móveis.
- Princípios básicos de um site AMP.
- Limitações de AMP.
- Como os componentes da Web da AMP resolvem problemas comuns do site de notícias.
- Como validar a AMP.
- Como preparar suas páginas AMP para a Pesquisa Google.
Pré-requisitos
- Código de amostra
- Python (de preferência 2.7) ou a extensão Chrome Web 200 OK do servidor da Web.
- Chrome (ou um navegador equivalente que possa inspecionar o Console JavaScript)
- Editor de código (por exemplo, Atom, Sublime, Notepad++)
Você pode fazer o download de todo o exemplo de código para seu computador:
...ou clone o repositório do GitHub da linha de comando:
$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.gitVocê fará o download de um arquivo ZIP contendo vários arquivos de recursos de exemplo e a página inicial "Article.html".
Descompacte a pasta e navegue até o diretório pela linha de comando no seu computador.
Para testar a página de amostra, precisamos acessar os arquivos de um servidor da Web. Existem várias maneiras de criar um servidor da Web temporário e local para fins de teste. Neste codelab, forneceremos instruções para três opções disponíveis:
- O app Google Chrome "quot;Web Server for Chrome": esta é a abordagem recomendada, já que é a solução mais simples e multiplataforma disponível. Observação: essa abordagem exige que o Google Chrome esteja instalado.
- Firebase Hosting: uma opção alternativa se você também tiver interesse em conhecer nossa nova plataforma de hospedagem de recursos estáticos "Firebase Hosting" SSL é ativado por padrão.
- Um servidor Python local HTTP: requer acesso à linha de comando.
Opção no 1: servidor da Web para o Chrome
Você pode encontrar o aplicativo "Web Server for Chrome" neste link na Chrome Web Store.
Após instalar o aplicativo do Chrome, você deve apontá-lo para uma pasta específica no botão ""Escolher pasta" Para este codelab, selecione a pasta onde você descompactou os arquivos de exemplo do codelab.
Além disso, marque a opção "Mostrar automaticamente index.html" e defina a porta como "8000". É necessário reiniciar o servidor da Web para que essas alterações entrem em vigor.
Acesse este URL usando:
http://localhost:8000/article.html
Se o URL acima carregar, siga para a próxima etapa.
Opção 2: Firebase Hosting
Se você quiser conhecer nossa nova hospedagem na Web estática, siga as instruções disponíveis neste link para implantar seu site AMP em um URL de hospedagem do Firebase.
O Firebase Hosting é um provedor de hospedagem estático que pode ser usado para implantar e hospedar rapidamente um site estático e os respectivos recursos, incluindo arquivos HTML, CSS e JavaScript. Os usuários se beneficiam da redução da latência porque o conteúdo estático é armazenado em cache em uma rede de fornecimento de conteúdo (CDN) com pontos de presença (PoPs, na sigla em inglês) localizados em todo o mundo.
Por fim, o Firebase Hosting é sempre veiculado por SSL. Portanto, ele é ótimo para AMP e para a Web em geral. Se você tiver mais interesse em usar a AMP, ignore esta opção.
Opção 3: servidor HTTP Python
Se você não usa o Chrome ou está com dificuldades para instalar a extensão, também pode usar o Python na linha de comando para iniciar um servidor da Web local.
Para executar o servidor HTTP integrado do Python na linha de comando, basta executar o seguinte:
python -m SimpleHTTPServer
E acesse este URL:
http://localhost:8000/article.html
No arquivo ZIP transferido por download, você encontrará um arquivo chamado article.html. Estamos criando uma página equivalente para AMP para este artigo.
Copie e cole o código do exemplo de article.html em um novo arquivo. Salvar este arquivo como article.amp.html.
Seu arquivo article.amp.html ficará assim:
<!doctype html>
<html lang="en">
<head>
<title>News Article</title>
<link href="base.css" rel="stylesheet" />
<script type="text/javascript" src="base.js"></script>
</head>
<body>
<header>
News Site
</header>
<article>
<h1>Article Name</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
</article>
<img src="mountains.jpg">
</body>
</html>Essa página é bastante simples e tem elementos de artigo estáticos comuns: CSS, JavaScript e uma tag de imagem.
Por enquanto, a versão AMP do artigo é somente uma cópia do original. Vamos convertê-la para AMP. Para começar, adicionaremos o arquivo da biblioteca JavaScript AMP e veremos quais erros aparecem quando o validador de AMP está ativado.
Para incluir a biblioteca AMP, adicione esta linha à parte inferior da tag <head>:
<script async src="https://cdn.ampproject.org/v0.js"></script>Agora, carregue a nova página article.amp.html no navegador usando o link a seguir e abra o Console do desenvolvedor no Chrome via Menu > More Tools > Developer Tools:
Agora, inspecione a saída JavaScript no console do desenvolvedor. Verifique se a guia Console está selecionada:
Você verá este registro:
Powered by AMP ⚡ HTML
Agora, para ativar o AMP Validator adicione este identificador de fragmento ao seu URL:
#development=1
Exemplo:
http://localhost:8000/article.amp.html#development=1
Talvez seja necessário atualizar a página manualmente no navegador. É possível atualizar manualmente uma página no navegador pressionando este botão:
Você receberá vários erros de validação:
Mesmo que as páginas AMP usem a tecnologia Accelerated Mobile Pages, elas podem ser usadas para criar páginas responsivas que sejam renderizadas em todos os tamanhos de tela. Para mais informações, consulte a seção Web design responsivo do site do Google Developers.
Para simular a experiência em dispositivos móveis nas Ferramentas para desenvolvedores do Google Chrome. Clique no ícone de dispositivo móvel aqui:
Agora selecione um dispositivo móvel (por exemplo, um "Pixel 2") neste menu:
Uma resolução simulada em dispositivo móvel, como a mostrada abaixo, aparecerá no navegador:
Agora podemos começar! Vamos analisar cada erro de validação e ver como eles estão relacionados a AMP.
Charset obrigatório
Para começar, corrigiremos o seguinte erro:
The mandatory tag 'meta charset=utf-8' is missing or incorrect.
Para a exibição correta do texto, a AMP exige que o conjunto de caracteres da página seja definido. Também precisa ser o primeiro filho da tag do cabeçalho. O motivo para isso é evitar reinterpretar o conteúdo adicionado antes da tag meta charset.
Adicione o seguinte código como a primeira linha da tag principal:
<meta charset="utf-8" /> Salve o arquivo, atualize a página e verifique se esse erro não está mais sendo exibido.
Os arquivos AMP precisam ter uma tag <link rel=canonical>.
Todo documento AMP precisa ter um link que faça referência à página canônica. Então, vamos adicionar o link ao nosso artigo original.
Adicione o seguinte código abaixo da tag <meta charset="utf-8" />:
<link rel="canonical" href="/article.html">
Se necessário, reinicie o servidor da Web e atualize a página. Embora ainda haja muitos erros a serem corrigidos, os arquivos AMP precisam ter uma tag <link rel=canonical>, e ela não existe mais.
Atributo AMP obrigatório
A AMP exige um atributo no elemento HTML raiz de uma página para declará-la como um documento AMP:
The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html' The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.
Para resolver isso, basta adicionar o atributo ⚡ à tag <html> da seguinte forma:
<!doctype html>
<html ⚡ lang="en">
<head>
...Agora, atualize a página e verifique se os erros desapareceram.
Janela de visualização obrigatória
Em seguida, resolveremos o seguinte erro:
The mandatory tag 'meta name=viewport' is missing or incorrect.
As páginas AMP exigem a definição de width e minimum-scale para a janela de visualização. Esses valores precisam ser definidos como device-width e 1, respectivamente. A janela de visualização é uma tag comum incluída na <head> de uma página HTML.
Isso é melhor quando o seguinte snippet HTML é adicionado à tag <head>. Adicione a seguinte tag meta:
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8" />
<link rel="canonical" href="/article.html">
<!-- The following is the meta tag and viewport information we must add to the page: -->
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
...Estes são os únicos valores válidos para width e minimum-scale em AMP. Definir initial-scale não é obrigatório, mas é uma inclusão comum no desenvolvimento da Web para dispositivos móveis e recomendado. Saiba mais sobre a janela de visualização e o design responsivo neste link.
Como antes, atualize a página e verifique se o erro desapareceu.
Folhas de estilo externas
O erro a seguir está relacionado com o uso de folhas de estilo:
The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.
Mais especificamente, informamos sobre a seguinte tag de link da folha de estilo na tag <head>:
<link href="base.css" rel="stylesheet" />O problema é que essa é uma referência de folha de estilo externa. Na AMP, para agilizar o carregamento dos documentos, os desenvolvedores não podem incluir folhas de estilo externas. Em vez disso, todas as regras da folha de estilo precisam ser incluídas in-line no documento de AMP.
Portanto, remova a tag de link no <head> e substitua a tag por uma tag in-line como esta:
<style amp-custom>
body {
width: auto;
margin: 0;
padding: 0;
}
...
</style>O conteúdo da tag de estilo precisa ser copiado diretamente do arquivo base.css no diretório do projeto. O atributo amp-custom na tag de estilo é obrigatório.
Mais uma vez, atualize a página e verifique se o erro de folhas de estilo desapareceu.
JavaScript de terceiros
Embora as folhas de estilo possam ser reformuladas relativamente facilmente com AMP via in-line, o mesmo não acontece com JavaScript.
The tag 'script' is disallowed except in specific forms.
Em AMP, os scripts gerados pelo usuário não são permitidos. Os scripts em AMP só serão permitidos se atenderem a dois requisitos principais:
- Todo JavaScript precisa ser assíncrono, ou seja, incluir o atributo
asyncna tag de script. - Só é possível incluir a biblioteca e os componentes de AMP.
Isso exclui efetivamente o uso de JavaScript de terceiros. Há uma única exceção: o JavaScript de terceiros pode ser usado em iframes.
Tente abrir o arquivo base.js externo. O que você vê? O arquivo deverá estar vazio, sem qualquer código JavaScript, e incluir apenas um comentário com informações como esta:
/* This external JavaScript file is intentionally empty. Its purpose is merely to demonstrate the AMP validation error related to the use of external JavaScript files. */
Considerando que esse arquivo JavaScript externo não é um componente funcional do site, é possível remover totalmente a referência.
Remova a seguinte referência JavaScript externa do seu documento:
<script type="text/javascript" src="base.js"></script>
Agora, atualize a página e verifique se o erro de script desapareceu.
boilerplate CSS AMP
The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect. The mandatory tag 'head > style : boilerplate' is missing or incorrect. The mandatory tag 'noscript > style : boilerplate' is missing or incorrect.
Os próximos erros referem-se a duas tags ausentes na tag <head>. Todo documento AMP exige que estas tags sejam incluídas:
<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>Adicione o snippet de código acima à parte inferior da tag <head> do seu documento.
A primeira tag torna o conteúdo da página invisível até que a biblioteca JavaScript AMP atualize a tag para ficar visível novamente quando o conteúdo da página estiver pronto para renderização. Dessa forma, o AMP impede a exibição de conteúdo da página que ainda não foi estilizado. Isso faz com que a experiência do usuário seja bem instantânea, porque o conteúdo da página é exibido de uma só vez e tudo acima da dobra é renderizado em conjunto. A segunda tag inverterá essa lógica se o JavaScript estiver desativado no navegador.
Tag amp-img
The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?A AMP tem um componente da Web projetado especificamente para substituir a tag de imagem, chamada amp-img:
<amp-img src="mountains.jpg"></amp-img>Inclua a tag amp-img acima e execute o validador novamente. Vários novos erros serão exibidos:
AMP-IMG# Layout not supported for: container The implied layout 'CONTAINER' is not supported by tag 'amp-img'.
Por que o amp-img acionou outro erro? Porque amp-img não é um substituto direto da tag HTML img tradicional. Há outros requisitos ao usar o amp-img.
Sistema de layout
Esse erro nos informa que o amp-img não é compatível com o tipo de layout "container'. Um dos conceitos mais importantes no design de AMP é a redução da quantidade de reflow de DOM necessária para renderizar as páginas da Web.
Para reduzir o reflow DOM, inclua um sistema de layout para garantir que o layout da página seja o mais rígido possível no ciclo de vida de download e renderização da página.
O sistema de layout permite que os elementos de uma página sejam posicionados e dimensionados de várias maneiras: dimensões fixas, design responsivo, altura fixa e muito mais.
Em nosso caso, o sistema de layout inferiu o tipo do layout para amp-img como o tipo container. No entanto, o tipo de contêiner é para elementos que contêm elementos filhos e é incompatível com a tag amp-img, que é o motivo desse erro.
Por que o tipo de contêiner foi inferido? Porque não especificamos um atributo de altura para a tag amp-img. No HTML, sempre especifique largura e altura fixas para os elementos da página a fim de reduzir o reflow. Na AMP, é recomendável definir a largura e a altura dos elementos amp-img, já que isso permite que a AMP entenda a proporção do elemento.
Defina a largura e a altura da seguinte maneira:
<amp-img src="mountains.jpg" width="266" height="150"></amp-img>Atualize a página e verifique o validador. Você não verá mais erros. No entanto, a imagem não fica tão bem quanto está posicionada de forma estranha na página. Seria ótimo se pudéssemos dimensionar a imagem para esticar de forma responsiva e ajustar a página independentemente do tamanho da tela.
Surpreendentemente, definir a largura e a altura não restringe o elemento a um tamanho totalmente fixo. O sistema de layout AMP pode posicionar e dimensionar o elemento de várias maneiras ao conhecer a proporção dele. O atributo de layout informa à AMP como você quer que o elemento seja posicionado e dimensionado.
Ao definir o atributo de layout como responsive, podemos conseguir isso:
<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>Pronto! A imagem está na proporção correta e preenche responsivamente a largura da tela.
Pronto.
Agora o documento AMP ficará parecido com o seguinte:
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="/article.html">
<link rel="shortcut icon" href="amp_favicon.png">
<title>News Article</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>
<style amp-custom>
body {
width: auto;
margin: 0;
padding: 0;
}
header {
background: Tomato;
color: white;
font-size: 2em;
text-align: center;
}
h1 {
margin: 0;
padding: 0.5em;
background: white;
box-shadow: 0px 3px 5px grey;
}
p {
padding: 0.5em;
margin: 0.5em;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<header>
News Site
</header>
<article>
<h1>Article Name</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
</article>
</body>
</html>Atualize a página e observe a saída do console. Você verá a seguinte mensagem:
AMP validation successful.
Perguntas frequentes
Parte da nova iniciativa AMP é o destaque de documentos AMP válidos na interface de resultados da pesquisa do Google como parte de uma nova interface de carrossel. Essa interface proporciona uma melhor experiência do usuário para pessoas que pesquisam artigos na Web. Para que essa experiência seja a melhor possível, as páginas incluídas precisam atender a determinados critérios além de passar no validador de AMP.
Esta etapa apresenta uma visão geral de todos os requisitos.
Vincular páginas canônicas e documentos AMP
O objetivo da AMP é agilizar a Web e, apesar de o projeto estar mais focado no conteúdo estático desde o princípio, a inclusão de componentes como o amp-bind faz com que ela seja uma boa opção para vários sites, como empresas de notícias, e-commerce, sites de viagens, blogs e outros.
No entanto, é importante entender o escopo completo de como as AMP se encaixam na estrutura de um site. Mesmo que as páginas AMP possam ser usadas para criar sites inteiros, muitos editores preferem usá-la como a abordagem pareada, em que os documentos AMP são gerados como um complemento aos artigos HTML normais que um editor hospedaria no próprio site.
A vinculação canônica em páginas HTML regulares é uma técnica comum para declarar a página que deve ser considerada a preferida quando várias páginas incluírem o mesmo conteúdo. Como os documentos AMP podem ser gerados para ficarem disponíveis ao lado das páginas de artigos tradicionais de um site, as páginas HTML tradicionais devem ser tratadas como páginas "canônicas".
Já fizemos esse primeiro passo no nosso documento AMP, incluindo uma tag de link na página <head> para a página canônica:
<link rel="canonical" href="/article.html">A próxima etapa é vincular o artigo canônico à página AMP. Para isso, inclua uma tag <link rel="amphtml"> na seção <head> do artigo canônico.
Adicione o seguinte código à seção <head> do arquivo article.html:
<link rel="amphtml" href="/article.amp.html">O diagrama a seguir ilustra as direções das tags de vinculação:
É necessário configurar a vinculação bidirecional para que o rastreador da Pesquisa Google entenda a relação entre o documento canônico HTML normal e o documento AMP. Se nenhum link fosse fornecido, não estaria claro para o rastreador quais artigos eram as "versões AMP" dos documentos HTML normais. Ao fornecer explicitamente esses links, garantimos que não haja ambiguidade.
Metadados do mecanismo de pesquisa do schema.org
Outro requisito para a exibição de documentos AMP na nova interface do carrossel é a adesão à especificação de metadados do mecanismo de pesquisa do Schema.org. Esses metadados são incluídos na tag <head> dos documentos por uma tag de script de tipo application/ld+json.
Adicione o seguinte código à parte inferior da seção <head> do documento AMP:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage":{
"@type":"WebPage",
"@id":"https://example.com/my-article.html"
},
"headline": "My First AMP Article",
"image": {
"@type": "ImageObject",
"url": "https://example.com/article_thumbnail1.jpg",
"height": 800,
"width": 800
},
"datePublished": "2015-02-05T08:00:00+08:00",
"dateModified": "2015-02-05T09:20:00+08:00",
"author": {
"@type": "Person",
"name": "John Doe"
},
"publisher": {
"@type": "Organization",
"name": "⚡ AMP Times",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/amptimes_logo.jpg",
"width": 600,
"height": 60
}
},
"description": "My first experience in an AMPlified world"
}
</script>Atualize a página no navegador e verifique se nenhum erro de validação de AMP foi introduzido.
Agora, abra a Ferramenta de validação de dados estruturados em uma nova janela do navegador e clique em "Testar minha marcação". Em seguida, selecione a guia "Snippet de código" copie o código-fonte completo da sua página AMP, cole-o no painel de edição de texto da ferramenta de validação e clique em "Executar teste":
Você verá algo semelhante a isso na página:
Os principais requisitos para aparecer no novo carrossel da Pesquisa Google para matérias jornalísticas com tecnologia AMP são os seguintes:
- Verifique se o documento AMP é validado.
- Consulte o documento AMP na sua página HTML tradicional por meio da tag <link> e vice-versa.
- Inclua a tag de metadados do mecanismo de pesquisa acima.
Leia mais informações sobre descoberta de página.
Você concluiu o codelab e explorou vários conceitos fundamentais de documentos AMP.
Esperamos que você não tenha entendido como esses conceitos e recursos podem ser implementados em um documento AMP, mas também entenda por que a tecnologia AMP foi criada dessa maneira.
Veja outros tópicos e links que você pode explorar para amplificar ainda mais suas habilidades.