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"></html>
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"></html>
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-customna tag de estilo é obrigatório. - Copie todos os estilos do arquivo
base.csspara 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
asyncna 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+jsonouapplication/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.