Google AMP - podstawowa składnia

W tym rozdziale omówimy podstawowe wymagania, aby rozpocząć korzystanie ze stron Google AMP.

Przykładowa strona wzmacniacza

Podstawowy przykład strony wzmacniacza pokazano poniżej -

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "./regular-html-version.html">
      <meta name = "viewport" content = "width = device-width,
      minimum-scale = 1,initial-scale = 1">
      <style amp-custom>
         h1 {color: red}
      </style>
      
      <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>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
   </head>
   <body>
      <h1>Amp Sample Page</h1>
      <p>
         <amp-img 
            src = "images/christmas1.jpg" 
            width = "300" 
            height = "300" 
            layout = "responsive">
         </amp-img>
      </p>
   </body>
</html>

Obowiązkowe tagi

Na stronie wzmacniacza należy uwzględnić kilka obowiązkowych tagów. Ta sekcja omawia je szczegółowo -

Musimy się upewnić, że dodamy amp lub ⚡ do tagu html, jak pokazano poniżej

<html amp>
   OR 
<html ⚡>

Powinniśmy dodać tagi <head> i <body> do strony html.

Weryfikacja wzmacniacza może się nie powieść, jeśli przegapisz którykolwiek z obowiązkowych metatagów. Niektóre obowiązkowe tagi mets, które mają zostać dodane do sekcji head strony, są pokazane tutaj -

<meta charset="utf-8">
   <meta name  =  "viewport" 
      content = "width = device-width,
      minimum-scale = 1,
      initial-scale = 1">

Link rel = "canonical" do dodania w tagu head

<link rel = "canonical" href = "./regular-html-version.html">

Etykieta stylu z amp-boilerplate -

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

Znacznik Noscript z amp-boilerplate -

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

Tag amp script z dodanym async, jak pokazano poniżej. To najważniejszy tag ze wszystkich -

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

Powinieneś użyć tego tagu w przypadku, gdy chcesz dodać niestandardowy css do strony. Proszę zauważyć, że nie możemy wywołać zewnętrznego arkusza stylów na stronach amp. Aby dodać niestandardowy plik CSS, cały plik CSS musi znaleźć się tutaj -

<style amp-custom>
   //all your styles here
</style>

Możesz zweryfikować powyższą stronę w swojej przeglądarce, używając # developement = 1 na końcu adresu URL strony.

Teraz przetestujmy to samo w przeglądarce. Hostowałem tę stronę lokalnie i zapisałem ją jako amppage.html.

Adres URL powyżej do przetestowania to

http://localhost/googleamp/amppage.html#development=1

Przykład

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "./regular-html-version.html">
      <meta name = "viewport" content = "width=device-width,
      minimum-scale = 1,initial-scale = 1">
      <style amp-custom>
         h1 {color: red}
      </style>
      <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>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
   </head>
   <body>
      <h1>Amp Sample Page</h1>
      <p>
         <amp-img 
            src = "images/christmas1.jpg" 
            width = "300" 
            height = "250" 
            layout = "responsive">
         </amp-img>
      </p>
   </body>
</html>

Wynik

Stan weryfikacji wzmacniacza można zobaczyć w konsoli programisty w następujący sposób -

Daje nam to pomyślną weryfikację AMP, ponieważ dodaliśmy wszystkie wymagane obowiązkowe tagi dla prawidłowej strony wzmacniacza.