AMP
Something went wrong while trying to load more search results.
We apologize for the inconvenience caused.
Please try again later.

;(

Something went wrong…

…while trying to load the search results.
We apologize for the inconvenience caused.
Please try again later.

Создание страницы AMP HTML

Следующая разметка может служить хорошей начальной точкой или шаблоном. Скопируйте ее и сохраните в файл с расширением .html.

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/ru/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <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>Welcome to the mobile web</h1>
  </body>
</html>

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

Необходимая разметка

Документ AMP HTML ДОЛЖЕН:

  • Начинаться с типа документа <!doctype html>.
  • Содержать тег верхнего уровня <html ⚡> (также допускается использование <html amp>).
  • Содержать теги <head> и <body> (необязательные в разметке HTML).
  • Содержать внутри заголовка тег <link rel="canonical" href="$SOME_URL">, который указывает на обычную HTML-версию документа AMP HTML или на сам исходный документ, если такой версии не существует.
  • Содержать тег <meta charset="utf-8"> в качестве первого дочернего элемента тега заголовка.
  • Содержать в теге заголовка тег <meta name="viewport" content="width=device-width,minimum-scale=1">. Также рекомендуется включить в него значение initial-scale=1.
  • Содержать в качестве последнего элемента заголовка тег <script async src="https://cdn.ampproject.org/v0.js"></script>, который указывает и загружает библиотеку AMP JS.
  • Содержать в теге <head> следующий код: <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>

Дополнительные метаданные

Кроме выполнения этих простых требований заголовок нашего примера также включает определение Schema.org, которое не является жестким требованием для AMP, но необходимо для предоставления контента в некоторых местах, например в демонстрации карусельного представления новостей Google Поиска (попробуйте на своем телефоне).

Чтобы узнать больше о всех метаданных, которые потребуются в различных других местах, таких как Twitter, ознакомьтесь с нашими примерами. Для получения дополнительной информации об использовании AMP в Google Поиске см. раздел Горячие новости с AMP.


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