Corrigir erros de validação
Nesta seção, analisaremos e resolveremos os erros de validação de AMP na nossa página AMP. Esses erros podem aparecer em outra ordem no seu console.
Incluir charset
Para começar, corrigiremos o seguinte erro:
The mandatory tag 'meta charset=utf-8' is missing or incorrect.
Para que o texto seja exibido corretamente, é necessário especificar o charset das páginas AMP. As informações do meta charset também precisam ser o primeiro filho da tag <head>
. Essa tag precisa ser a primeira para evitar a reinterpretação de conteúdo adicionado antes da tag meta charset.
Adicione o código a seguir como a primeira linha da tag <head>
:
<meta charset="utf-8" />
Salve o arquivo e atualize a página. Verifique se o erro de charset ainda ocorre.
Incluir link canônico
Agora, veja este erro:
The mandatory tag 'link rel=canonical' is missing or incorrect.
Todo documento AMP precisa ter um link que faça referência à respectiva versão "canônica". Veja mais sobre o que é uma página canônica e quais são as diferentes abordagens para vincular o conteúdo canônico na etapa deste tutorial sobre como fazer com que a página seja detectável.
Neste tutorial, o artigo HTML original que estamos convertendo será a página canônica.
Adicione o código a seguir à tag <meta charset="utf-8" />
:
<link rel="canonical" href="/article.html">
<link rel="canonical" href="article.amp.html">
Agora, atualize a página. Embora ainda haja muitos erros para corrigir, o erro do link canônico não está mais presente.
Especificar o atributo AMP
A AMP exige um atributo no elemento raiz <html>
das páginas para declarar que elas são documentos 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 corrigir os erros acima, basta adicionar o atributo ⚡
à tag <html>
da seguinte forma:
<html ⚡ lang="en">
Agora, atualize a página e verifique se os erros desapareceram.
⚡
, mas também é possível usar o atributo amp
no lugar do atributo ⚡
. Veja este exemplo:
<html amp lang="en">
Especificar uma janela de visualização
Agora, vejamos o seguinte erro:
The mandatory tag 'meta name=viewport' is missing or incorrect.
A AMP exige 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 no elemento <head>
de uma página HTML.
Para corrigir o erro na janela de visualização, adicione o seguinte snippet HTML à tag <head>
:
<meta name="viewport" content="width=device-width">
Os valores especificados para width
e minimum-scale
são obrigatórios na AMP. A definição de initial-scale
não é obrigatória, mas é recomendada e costuma ser incluída no desenvolvimento da Web para dispositivos móveis. Leia mais sobre a janela de visualização e o design responsivo em Defina a janela de visualização.
Assim como antes, atualize a página e verifique se o erro desapareceu.
Substituir 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'.
Especificamente, este erro se refere à 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 carregar documentos com a maior velocidade possível, não inclua folhas de estilo externas. Em vez disso, todas as regras de folha de estilo precisam ser adicionadas in-line ao documento AMP usando as tags <style amp-custom></ style>
.
<style amp-custom> /* The content from base.css */ </style>
Então, corrija o erro:
- Remova a tag
<link>
que direciona para a folha de estilo na tag<head>
e a substitua por uma tag in-line<style amp-custom></style>
. O atributoamp-custom
na tag de estilo é obrigatório. - Copie todos os estilos do arquivo
base.css
para as tags<style amp-custom></style>
.
Mais uma vez, atualize a página e verifique se o erro das folhas de estilo desapareceu.
Excluir JavaScript de terceiros
É relativamente fácil alterar as folhas de estilo inserindo CSS in-line, mas isso não se aplica ao JavaScript.
The tag 'script' is disallowed except in specific forms.
Em geral, os scripts só são permitidos na AMP quando cumprem dois requisitos principais:
- Todo JavaScript precisa ser assíncrono (ou seja, incluir o atributo
async
na tag de script). - O JavaScript é para a biblioteca AMP e para qualquer componente AMP na página.
Isso exclui efetivamente o uso de todo JavaScript gerado por usuários/terceiros na AMP, exceto no caso indicado abaixo.
- Scripts que adicionam metadados à página ou configuram componentes AMP: terão o atributo de tipo
application/ld+json
ouapplication/json
. - Scripts incluídos em iframes: só inclua JavaScript em um iframe em último caso. Sempre que possível, substitua os recursos JavaScript usando os Componentes AMP. Veremos nosso primeiro componente AMP na próxima seção.
Tente abrir o arquivo externo [base.js
] (https://github.com/googlecodelabs/accelerated-mobile-pages-foundations/blob/master/base.js). 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 a referência inteira com segurança.
Remova a seguinte referência externa de JavaScript do documento:
<script type="text/javascript" src="base.js"></script>
Agora, atualize a página e verifique se o erro do script desapareceu.
Incluir CSS padrão da AMP
Os seguintes erros se referem à ausência de código boilerplate:
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.
Todo documento AMP exige o seguinte código boilerplate correspondente:
<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 código boilerplate à parte inferior da tag <head>
do documento.
Inicialmente, a tag <style amp-boilerplate>
oculta o conteúdo do corpo até que a biblioteca JavaScript da AMP seja carregada. Em seguida, o conteúdo é renderizado. Isso acontece nas AMP para evitar a renderização de conteúdo sem estilo, também conhecida como Flash Of Unstyled Content (FOUC). Isso ajuda a garantir que a experiência do usuário seja realmente 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.
Substituir<img>
por <amp-img>
A AMP não é compatível com os elementos HTML padrão correspondentes à exibição de mídia, o que explica este erro:
The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?
A AMP tem um componente Web criado especificamente para substituir a tag <img>
, a tag <amp-img>
:
<amp-img src="mountains.jpg"></amp-img>
Substitua a tag <img>
pela tag <amp-img>
acima e repita a validação. Vários novos erros serão exibidos:
Layout not supported: 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. Existem requisitos adicionais ao usar o amp-img
.
Sistema de layout AMP
O erro de layout informa que amp-img
não é compatível com o tipo de layout container
. Um dos conceitos mais importantes do design da AMP é o foco na redução do reflow de DOM necessário para renderizar páginas da Web.
A fim de reduzir o reflow de DOM, a AMP inclui um sistema para garantir que o layout da página seja identificado o quanto antes no ciclo de vida de download e renderização da página.
A imagem abaixo faz uma comparação entre o layout normal de uma página HTML com a abordagem aplicada pela AMP. Observe na abordagem à esquerda como o texto faz reflow toda vez que um anúncio ou imagem é carregado. A abordagem da AMP para o layout evita que o texto se mova, mesmo que as imagens e os anúncios demorem muito para serem carregados.

O sistema de layout AMP permite que os elementos da página sejam posicionados e dimensionados de várias maneiras: dimensões fixas, design responsivo, altura fixa e muito mais.
No caso do nosso artigo, o sistema de layout inferiu que o layout de amp-img
é do tipo container
. No entanto, o tipo container
só é aplicável a elementos que tenham elementos filhos. O tipo container
é incompatível com a tag amp-img
, o que causa esse erro.
Por que o tipo container
foi inferido? Porque não especificamos um atributo height
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, é necessário definir a largura e a altura dos elementos do amp-img
para que a AMP possa predeterminar a proporção do elemento.
Adicione width
e height
à tag <amp-img>
da seguinte forma:
<amp-img src="mountains.jpg" width="266" height="150"></amp-img>
Atualize a página e verifique o validador, que não deverá exibir mais erros.
Agora você tem um documento AMP válido, mas a imagem está posicionada na página de uma maneira estranha. Por padrão, quando você especificar a altura e a largura de um amp-img
, a AMP corrigirá as dimensões fornecidas. Mas não seria ótimo se a AMP dimensionasse a imagem para se estender de maneira responsiva e se ajustar à página independentemente do tamanho da tela?
Mesmo assim, a AMP consegue determinar a proporção dos elementos com base na largura e na altura especificadas. Isso permite que o sistema de layout AMP posicione e dimensione o elemento de diversas maneiras. O atributo layout
informa à AMP como você quer que o elemento seja posicionado e dimensionado.
Defina o atributo layout como responsive
para que a imagem seja redimensionada:
<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!
O documento AMP será parecido com isto:
<!doctype html> <html ⚡ lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width"> <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 o resultado do console. Você verá a seguinte mensagem:
AMP validation successful.