Учебники

Google AMP — основной синтаксис

Март 15, 2019

В этой главе мы обсудим основные требования для начала работы со страницами AMP Google.

Пример страницы усилителя

Базовый пример страницы усилителя показан ниже — 

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

Обязательные теги

На странице усилителя есть несколько обязательных тегов. Этот раздел обсуждает их подробно —

  • Мы должны убедиться, что мы добавляем amp или ⚡ к тегу html, как показано ниже

Мы должны убедиться, что мы добавляем amp или ⚡ к тегу html, как показано ниже 

<html amp>
   OR 
<html ⚡>

  • Мы должны добавить теги <head> и <body> на html-страницу.

Мы должны добавить теги <head> и <body> на html-страницу.

Проверка усилителя может завершиться неудачей, если вы пропустите какой-либо из обязательных мета-тегов. Некоторые обязательные мет-теги, которые должны быть добавлены в головной раздел страницы, показаны здесь — 

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

  • Ссылка rel = «canonical» будет добавлена ​​внутри тега head

Ссылка rel = «canonical» будет добавлена ​​внутри тега head 

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

  • Бирка стиля с усилителем-шаблоном —

Бирка стиля с усилителем-шаблоном — 

<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 тег с усилителем-образцом —

Noscript тег с усилителем-образцом — 

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

  • Тег сценария amp с асинхронным добавлением, как показано ниже. Это самый важный тег из всех

Тег сценария amp с асинхронным добавлением, как показано ниже. Это самый важный тег из всех 

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

  • Вы должны использовать этот тег, если вы хотите добавить пользовательские CSS на страницу. Пожалуйста, отметьте здесь, что мы не можем назвать внешнюю таблицу стилей на страницах усилителя. Чтобы добавить пользовательский CSS, все ваши CSS должны идти сюда —

Вы должны использовать этот тег, если вы хотите добавить пользовательские CSS на страницу. Пожалуйста, отметьте здесь, что мы не можем назвать внешнюю таблицу стилей на страницах усилителя. Чтобы добавить пользовательский CSS, все ваши CSS должны идти сюда — 

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

Вы можете проверить вышеуказанную страницу в своем браузере, используя # development = 1 в конце URL-адреса страницы.

Теперь давайте проверим то же самое в браузере. Я разместил страницу локально и сохранил ее как amppage.html.

URL для проверки выше

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

пример 

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

Выход

Пример страницы усилителя

Вы можете увидеть статус проверки усилителя в консоли разработчика следующим образом:

Разработчик валидации

Это дает нам успешную проверку AMP, поскольку мы добавили все необходимые обязательные теги для действительной страницы усилителя.

41
Share: