Google AMP - Página HTML para Página Amp

Neste capítulo, vamos entender como converter uma página html normal em uma página amp. Também validaremos a página para amplificador e verificaremos a saída por último.

Para começar, vamos usar a página html normal conforme mostrado abaixo -

test.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>Tutorials</title>
      <link href = "style.css" rel = "stylesheet" />
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <script src = "js/jquery.js"></script>
   </head>
   <body>
      <header role = "banner">
         <h2>Tutorials</h2>
      </header>
      <h2>Some Important Tutorials List</h2>
      <article>
         <section>
            <img src = "images/tut1.png" width="90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut2.png" width="90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut3.png" width="90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut4.png" width="90%" height = "90%"/>
         </section>
      </article>
      <footer>
         <p>For More tutorials Visit <a href = 
         "https://tutorialspoint.com/">Tutorials Point</a></p>
      </footer>
   </body>
</html>

Observe que estamos usando style.css nele e os detalhes do arquivo css são fornecidos aqui -

h1 {color: blue;text-align: center;}
   h2 {text-align: center;}
      img {
         border: 1px solid #ddd;
         border-radius: 4px;
         padding: 5px;
      }
      article {
         text-align: center;
      }
      header{
         width: 100%;
         height: 50px;
         margin: 5px auto;
         border: 1px solid #000000;
         text-align: center;
         background-color: #ccc;
      }
      footer {
         width: 100%;
         height: 35px;
         margin: 5px auto;
         border: 1px solid #000000;
         text-align: center;
         background-color: yellow;
      }

Observe que também usamos o arquivo jquery.js no .html listado acima.

Agora, hospede test.html localmente e veja a saída vista no link fornecido aqui -

http://localhost:8080/googleamp/test.html

Agora, vamos seguir passo a passo para alterar o arquivo test.html acima para o arquivo test_amp.html.

Primeiro, temos que salvar test.html como test_amp.html e seguir as etapas fornecidas abaixo.

Step 1 - Adicione a biblioteca de amplificadores na seção principal, conforme mostrado abaixo -

<script async src = "https://cdn.ampproject.org/v0.js">
</script>

Por exemplo, depois de adicionado a test_amp.html, será o seguinte -

<head>
   <meta charset = "utf-8">
   <title>Tutorials</title>
   <script async src = "https://cdn.ampproject.org/v0.js">
   </script>
   <link href = "style.css" rel = "stylesheet" />
   <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <script src = "js/jquery.js"></script>
</head>

Agora execute a página test_amp.html no navegador e abra o console do navegador. Ele exibirá a mensagem do console conforme mostrado abaixo -

Para saber se o seu arquivo html é um amp válido, adicione # development = 1 ao url da sua página html no final, conforme mostrado abaixo -

http://localhost:8080/googleamp/test_amp.html#development=1

Acesse o url acima no navegador e no console do Google Chrome. Ele irá listar os erros que o amplificador considera inválido do ponto de vista da especificação do amplificador.

Os erros que encontramos para test_amp.html são mostrados aqui -

Vamos agora corrigi-los um por um até recebermos a mensagem de sucesso do amplificador.

Step 2 - Podemos ver o seguinte erro no console -

Podemos consertar isso adicionando ⚡ ou amp para a tag html. Vamos adicionar amp à tag html como mostrado abaixo -

<html amp>

Step 3 - Certifique-se de ter a meta tag com charset e name = ”viewport” na tag head, conforme mostrado abaixo -

<head>
   <meta charset = "utf-8">
   <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
</head>

Step 4 - O próximo erro que temos é mostrado aqui -

Ele diz href no link rel = stylesheet, ou seja, o link a seguir está apresentando um erro. Isso ocorre porque o amp não permite que folhas de estilo externas usando o link com href sejam colocadas dentro das páginas.

<link href = "style.css" rel = "stylesheet" />
We can add the all the css in style.css as follows −
<style amp-custom>
   /*All styles from style.css please add here */
</style>

Portanto, os dados css presentes em style.css devem ser adicionados em estilo com o atributo amp-custom.

<style amp-custom>
   h1 {color: blue;text-align: center;}
   h2 {text-align: center;}
      img {
         border: 1px solid #ddd;
         border-radius: 4px;
         padding: 5px;
      }
      article {
         text-align: center;
      }
      header{
         width: 100%;
         height: 50px;
         margin: 5px auto;
         border: 1px solid #000000;
         text-align: center;
         background-color: #ccc;
      }
      footer {
         width: 100%;
         height: 35px;
         margin: 5px auto;
         border: 1px solid #000000;
         text-align: center;
         background-color: yellow;
      }
</style>

Adicione a tag de estilo à sua página de amplificador. Vamos agora testar o mesmo com a tag de estilo acima no navegador. As alterações que fizemos até agora em test_amp.html são mostradas aqui -

<!DOCTYPE html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Tutorials</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <script src = "js/jquery.js"></script>
      <style amp-custom>
         h1 {color: blue;text-align: center;}
         h2 {text-align: center;}
            img {
               border: 1px solid #ddd;
               border-radius: 4px;
               padding: 5px;
            }
            
            article {
               text-align: center;
            }
            header{
               width: 100%;
               height: 50px;
               margin: 5px auto;
               border: 1px solid #000000;
               text-align: center;
               background-color: #ccc;
            }
            footer {
               width: 100%;
               height: 35px;
               margin: 5px auto;
               border: 1px solid #000000;
               text-align: center;
               background-color: yellow;
            }
      </style>
   </head>
   <body>
      <header role = "banner">
         <h2>Tutorials</h2>
      </header>
      <h2>Some Important Tutorials List</h2>
      <article>
         <section>
            <img src = "images/tut1.png" width = "90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut2.png" width = "90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut3.png" width = "90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut4.png" width="90%" height = "90%"/>
         </section>
      </article>
      <footer>
         <p>For More tutorials Visit <a href = 
         "https://tutorialspoint.com/">Tutorials Point</a></p>
      </footer>
   </body>
</html>

Vamos ver a saída e os erros no console da página acima. Observe a seguinte captura de tela -

O erro mostrado no console é o seguinte -

Agora, você pode ver que, para alguns dos erros do amplificador, o estilo foi removido. Vamos corrigir os erros restantes agora.

Step 5 - O próximo erro que vemos na lista é o seguinte -

Adicionamos a tag de script chamando o arquivo jquery. Observe que as páginas de amp não permitem nenhum javascript personalizado na página. Teremos que removê-lo e ter certeza de usar o componente de amplificador que está disponível.

Por exemplo, temos amp-animation se alguma animação for necessária, amp-analytics no caso de desejarmos adicionar o código do google analytics à página. Da mesma forma, temos o componente amp-ad para exibir os anúncios a serem mostrados na página. Há também um componente amp-iframe que podemos apontar o src para a mesma origem e chamar qualquer javascript personalizado se necessário no amp-iframe.

Agora, vamos remover a tag de script da página.

Step 6 - O próximo erro exibido é mostrado aqui -

Os erros acima estão apontando para a tag de imagem que usamos na página. O Amp não permite que tags <img src = ”” /> sejam usadas dentro da página. Observe que, em vez disso, precisamos usar a tag amp-img.

Vamos substituir a tag <img> por <amp-img> como mostrado aqui -

<section>
   <amp-img alt = "Beautiful Flower"
      src = "images/tut1.png"
      width = "500"
      height = "160"
      layout = "responsive">
   </amp-img>
</section>
<section>
   <amp-img alt = "Beautiful Flower"
      src = "images/tut2.png"
      width = "500"
      height = "160"
      layout = "responsive">
   </amp-img>
</section>
<section>
   <amp-img alt = "Beautiful Flower"
      src = "images/tut3.png"
      width = "500"
      height = "160"
      layout = "responsive">
   </amp-img>
</section>
<section>
   <amp-img alt = "Beautiful Flower"
      src = "images/tut4.png"
      width = "500"
      height = "160"
      layout = "responsive">
   </amp-img>
</section>

Substituímos toda a tag <img> por <amp-img> como mostrado acima. Agora, vamos executar a página no navegador para ver a saída e os erros -

Erros

Observe que os erros estão diminuindo agora.

Step 7 - O próximo erro exibido no console é o seguinte -

Precisamos adicionar a tag rel = canonical do link na seção head. Observe que esta é uma tag obrigatória e deve sempre ser adicionada no cabeçalho da seguinte forma -

<link rel = "canonical" href =
   "http://example.ampproject.org/article-metadata.html">

Step 8 - O próximo erro exibido em falta noscript tag no console, conforme mostrado aqui -

Precisamos adicionar a tag <noscript> incluída com amp-boilerplate na seção head da seguinte maneira -

<noscript>
   <style amp-boilerplate>
      body{
         -webkit-animation:none;
         -moz-animation:none;
         -ms-animation:none;
         animation:none}
   </style>
</noscript>

Step 9 - O próximo erro exibido é fornecido abaixo -

Outra tag obrigatória é a tag de estilo com amp-boilerplate e deve ser colocada antes da tag noscript. A tag de estilo com amp-boilerplate é mostrada aqui -

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

Adicione a tag de estilo acima à página test_amp.html.

Depois de terminar, teste a página no navegador para ver a saída e o console -

Os detalhes do console são mostrados aqui -

Assim, finalmente resolvemos todos os erros e agora a página test_amp.html é uma página de amp válida.

Há algum estilo a ser adicionado à medida que o cabeçalho e rodapé estão sendo truncados, podemos atualizar o mesmo no estilo personalizado que adicionamos. Portanto, removemos a largura: 100% do cabeçalho e do rodapé.

Aqui está o resultado final -

Arquivo final test_amp.html

<!DOCTYPE html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Tutorials</title>
      <link rel = "canonical" href=
      "http://example.ampproject.org/article-metadata.html">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <meta name = "viewport" content = "width = device-width, 
      initial-scale = 1.0">
      
      <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>
         h1 {color: blue;text-align: center;}
         h2 {text-align: center;}
            amp-img {
               border: 1px solid #ddd;
               border-radius: 4px;
               padding: 5px;
            }
            article {
               text-align: center;
            }
            header{
               height: 50px;
               margin: 5px auto;
               border: 1px solid #000000;
               text-align: center;
               background-color: #ccc;
            }
            footer {
               height: 35px;
               margin: 5px auto;
               border: 1px solid #000000;
               text-align: center;
               background-color: yellow;
            }
      </style>
   </head>
   <body>
      <header role = "banner">
         <h2>Tutorials</h2>
      </header>
      <h2>Some Important Tutorials List</h2>
      <article>
         <section>
            <amp-img 
               alt = "Beautiful Flower"
               src = "images/tut1.png"
               width = "500"
               height = "160"
               layout = "responsive">
            </amp-img>
         </section>
         <section>
            <amp-img 
               alt = "Beautiful Flower"
               src = "images/tut2.png"
               width = "500"
               height = "160"
               layout = "responsive">
            </amp-img>
         </section>
         <section>
            <amp-img 
               alt = "Beautiful Flower"
               src = "images/tut3.png"
               width = "500"
               height = "160"
               layout = "responsive">
            </amp-img>
         </section>
         <section>
            <amp-img 
               alt = "Beautiful Flower"
               src = "images/tut4.png"
               width = "500"
               height = "160"
               layout = "responsive">
            </amp-img>
         </section>
      </article>
      <footer>
         <p>For More tutorials Visit <a href = 
         "https://tutorialspoint.com/">
            Tutorials Point</a>
         </p>
      </footer>
   </body>
</html>

Assim, finalmente concluímos a conversão de um arquivo html normal em amp.