Содержание

Спецификация AMP HTML

AMP HTML — это подмножество стандарта HTML для создания контентных страниц (например, новостных статей), позволяющее гарантировать определенные базовые характеристики производительности.

Будучи подмножеством HTML, оно накладывает некоторые ограничения на набор доступных HTML-тегов и функций, однако не требует разработки новых механизмов рендеринга: существующие пользовательские агенты могут отображать AMP HTML так же, как и любой другой код HTML.

Если вас в первую очередь интересует, что разрешено и что запрещено в AMP, посмотрите наше обучающее видео об ограничениях AMP.

AMP HTML-документы можно загружать на веб-сервер и выдавать так же, как и любой другой HTML-документ; никакой специальной конфигурации сервера не требуется. Однако AMP-документы могут также выдаваться посредством специализированных систем AMP, выполняющих их проксирование. Эти системы выдают AMP-документы с собственного домена и могут дополнительно преобразовывать документ для повышения его производительности. Вот неполный список оптимизаций, которые может выполнять такая система:

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

AMP HTML использует ряд специальных элементов (коллективно разрабатываемых, однако централизованно управляемых и размещенных) для реализации расширенных возможностей, таких как галереи изображений для документов AMP HTML. Несмотря на то, что это позволяет задействовать в документе свои стили с помощью пользовательского CSS, это не позволяет использовать авторский JavaScript, помимо предлагаемого посредством специальных элементов для достижения целей производительности.

Используя формат AMP, производители контента делают контент в файлах AMP доступным для индексирования (с учетом ограничений robots.txt), кеширования и отображения третьими сторонами.

Производительность

Предсказуемая производительность — ключевая цель разработки AMP HTML. В первую очередь мы стремимся сократить задержку перед тем, как содержимое страницы становится доступно пользователю. В более конкретных терминах это означает, что:

Должны быть сведены к минимуму HTTP-запросы, необходимые для рендеринга и полной компоновки документа.
Такие ресурсы, как изображения или реклама, следует загружать только в том случае, если они могут быть просмотрены пользователем.
Браузеры должны иметь возможность вычислять пространство, необходимое каждому ресурсу на странице, без загрузки этого ресурса.

Формат AMP HTML

Образец документа

<!DOCTYPE html>
<html ⚡>
  <head>
    <meta charset="utf-8" />
    <title>Sample document</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>
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Article headline",
        "image": ["thumbnail1.jpg"],
        "datePublished": "2015-02-05T08:00:00+08:00"
      }
    </script>
    <script
      async
      custom-element="amp-carousel"
      src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"
    ></script>
    <script
      async
      custom-element="amp-ad"
      src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"
    ></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>Sample document</h1>
    <p>
      Some text
      <amp-img src="sample.jpg" width="300" height="300"></amp-img>
    </p>
    <amp-ad
      width="300"
      height="250"
      type="a9"
      data-aax_size="300x250"
      data-aax_pubname="test123"
      data-aax_src="302"
    >
    </amp-ad>
  </body>
</html>

Обязательная разметка

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

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

Метаданные

Рекомендуется аннотировать AMP HTML-документы с помощью стандартных метаданных: Open Graph Protocol, Twitter Cards и т. д.

Мы также рекомендуем размечать AMP HTML-документы по схеме schema.org/CreativeWork или любого из ее более специализированных типов, таких как schema.org/NewsArticle или schema.org/BlogPosting.

HTML-теги

В AMP HTML обычные HTML-теги можно использовать без изменений. Некоторые теги имеют специальные эквивалентные теги (например, <img> и <amp-img>), а другие теги категорически запрещены:

Тег	Статус в AMP HTML
script	Запрещен, если параметр type не имеет значение `application/ld+json`, `application/json` или `text/plain` (другие неисполняемые значения могут быть добавлены по мере необходимости). Исключения — обязательный тег script, используемый для загрузки среды выполнения AMP, а также теги script для загрузки расширенных компонентов.
noscript	Разрешен. Можно использовать в любом месте документа. Содержимое внутри элемента будет показано, если пользователь отключит JavaScript.
base	Запрещен.
img	Заменен на `amp-img`. Обратите внимание: в соответствии со стандартом HTML5 `<img>` является пустым элементом, поэтому у него нет закрывающего тега. Однако у закрывающий тег есть ().
picture	Запрещен. Чтобы выдавать изображения в разных форматах, используйте атрибут fallback или добавьте несколько атрибутов `srcset` в элемент .
video	Заменен на `amp-video`.
audio	Заменен на `amp-audio`.
iframe	Заменен на `amp-iframe`.
frame	Запрещен.
frameset	Запрещен.
object	Запрещен.
param	Запрещен.
applet	Запрещен.
embed	Запрещен.
form	Разрешен. Требует добавления расширения amp-form.
Элементы input	В основном разрешены, за исключением некоторых типов, а именно , . Разрешены также связанные с ними теги: ,
button	Разрешен.
`style`	Обязательный тег стиля для amp-boilerplate. В теге head допускается еще один тег стиля для индивидуального оформления. Этот тег стиля должен иметь атрибут `amp-custom`. 🔗
link	Допускаются значения `rel`, зарегистрированные на microformats.org. Если значение `rel` отсутствует в нашем белом списке, создайте задачу. Запрещены `stylesheet` и другие значения, такие как `preconnect`, `prerender` и `prefetch`, имеющие побочные эффекты в браузере. Предусмотрено одно исключение для загрузки таблиц стилей с сайтов разрешенных поставщиков шрифтов.
meta	Атрибут `http-equiv` может использоваться для указания определенных допустимых значений; подробности см. в спецификации валидатора AMP.
`a`	Значение атрибута `href` не должно начинаться с `javascript:`. Если установлен атрибут `target`, значение должно быть `_blank`. В остальных случаях разрешен. 🔗
svg	Разрешено большинство элементов SVG.

В реализациях валидатора должен использоваться белый список, созданный на основании спецификации HTML5 с удалением вышеуказанных тегов. См. Справочник по тегам AMP.

HTML-атрибуты

В AMP HTML запрещены имена атрибутов, начинающиеся с on (например, onclick или onmouseover). Атрибут с буквальным именем on (без суффикса) является допустимым.

Атрибуты, связанные с XML, такие как xmlns, xml:lang, xml:base и xml:space, запрещены в AMP HTML.

Внутренние атрибуты AMP с префиксом i-amp- запрещены в AMP HTML.

Классы

Имена внутренних классов AMP с префиксом -amp- и i-amp- запрещены в AMP HTML.

Обратитесь к документации AMP, чтобы узнать значение имен классов с префиксом amp-. Такие классы предназначены для настройки некоторых функций среды выполнения AMP и расширений.

Остальные пользовательские имена классов разрешены.

Идентификаторы

Некоторые имена идентификаторов запрещены в AMP HTML, например идентификаторы с префиксами -amp- и i-amp-, которые могут конфликтовать с внутренними идентификаторами AMP.

Перед использованием идентификаторов amp- и AMP изучите соответствующие расширения, описанные в документации AMP, — это позволит вам избежать конфликта с функциями, предоставляемыми этими расширениями (такими, как amp-access).

Чтобы увидеть полный список запрещенных наименований идентификаторов, пройдите по этой ссылке и введите в поиске mandatory-id-attr.

Ссылки

Схема javascript: запрещена.

Таблицы стилей

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

@-правила

В таблицах стилей разрешены следующие @-правила:

@font-face, @keyframes, @media, @page, @supports.

Правило @import запрещено. Другие правила могут быть добавлены в будущем.

Авторские таблицы стилей

Авторы могут добавлять в документ собственные стили с помощью одного тега <style amp-custom> внутри head или с помощью встроенных стилей.

Правила @keyframes разрешено использовать внутри <style amp-custom>. Однако, если их слишком много, рекомендуется поместить их в дополнительный тег <style amp-keyframes>, который должен находиться в конце документа AMP. Дополнительные сведения см. в разделе Таблица стилей ключевых кадров в этом документе.

Селекторы

К селекторам в авторских таблицах стилей применяются следующие ограничения:

Имена классов и тегов

Имена классов, идентификаторов, тегов и атрибутов не могут начинаться с -amp- и i-amp-. Эти наименования зарезервированы для внутреннего использования средой выполнения AMP. Соответственно, пользовательская таблица стилей не может ссылаться на CSS-селекторы классов -amp-, идентификаторов i-amp- и тегов/атрибутов i-amp-. Имена таких классов, идентификаторов и тегов/атрибутов не могут изменяться авторами, однако авторы могут переопределять стили классов и тегов amp- для любых CSS-свойств, которые явно не запрещены спецификацией этих компонентов.

Чтобы предотвратить использование селекторов атрибутов для обхода ограничений в отношении наименований классов, в CSS-селекторы обычно не разрешается включать токены и строки, начинающиеся с -amp- и i-amp-.

Важно!

Использование квалификатора !important не допускается. Данное требование обусловлено тем, как AMP реализует инварианты размера элементов.

Свойства

В AMP разрешены переходы и анимации только тех свойств, которые могут задействовать аппаратное ускорение в распространенных браузерах. В настоящее время в нашем белом списке находятся opacity, transform (также -vendorPrefix-transform).

В следующих примерах свойство <property> должно быть в вышеуказанном белом списке.

transition <property> (также -vendorPrefix-transition)
@keyframes name { from: {<property>: value} to {<property: value>} } (также @-vendorPrefix-keyframes)

Максимальный размер

Размер авторской таблицы стилей или совокупный размер встроенных стилей не должен превышать 75 000 байт, в противном случае вы получите ошибку валидации.

Таблица стилей ключевых кадров

В дополнение к <style amp-custom> авторы могут также добавить тег <style amp-keyframes>, который разрешен специально для анимации по ключевым кадрам.

К тегу <style amp-keyframes> применяются следующие ограничения:

Может быть размещен только как последний дочерний элемент элемента <body>.
Может содержать только @keyframes, @media, @supports и их комбинации.
Его объем не может превышать 500 000 байт.

Тег <style amp-keyframes> был создан с целью решить проблему, которая заключается в том, что правила ключевых кадров часто являются громоздкими даже для умеренно сложных анимаций, что приводит к замедлению синтаксического анализа CSS и задержке первой отрисовки контента (FCP). Такие правила часто превышают ограничение на размер, установленное для <style amp-custom>, поэтому, чтобы обходить ограничения по размеру, объявления ключевых кадров следует размещать в <style amp-keyframes> в нижней части документа. А поскольку ключевые кадры не блокируют рендеринг, первая отрисовка контента может выполняться раньше завершения их анализа.

Пример:

<style amp-keyframes>
@keyframes anim1 {}

@media (min-width: 600px) {
  @keyframes anim1 {}
}
</style>
</body>

Пользовательские шрифты

Авторы могут использовать таблицы стилей, добавляющие пользовательские шрифты. Это можно делать двумя способами: либо с помощью тегов ссылок на поставщиков шрифтов из белого списка, либо с помощью @font-face.

Пример:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Tangerine"
/>

Поставщики шрифтов могут быть добавлены в белый список, если они поддерживают интеграцию посредством чистого CSS-кода и работают по HTTPS. На текущий момент для загрузки шрифтов с помощью тегов ссылок разрешены следующие источники:

Fonts.com: https://fast.fonts.net
Google Fonts: https://fonts.googleapis.com
Font Awesome: https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com
Typekit: https://use.typekit.net/kitId.css (замените kitId соответствующим образом)

ПРИМЕЧАНИЕ ДЛЯ ИСПОЛНИТЕЛЕЙ. Для добавления провайдера в этот список требуется изменить правило CSP-политики AMP-кеша.

Авторы могут свободно добавлять любые пользовательские шрифты с помощью инструкции @font-face в своем коде CSS. Шрифты, добавленные через @font-face, должны загружаться по HTTP или HTTPS.

Среда выполнения AMP

Среда выполнения AMP — это специальный код JavaScript, который выполняется внутри любого документа AMP. Он реализует функциональность специальных элементов AMP, управляет загрузкой ресурсов и установкой приоритетов и позволяет задействовать runtime-валидатор AMP HTML на этапе разработки.

Загрузка среды выполнения AMP осуществляется с помощью обязательной строки <script src="https://cdn.ampproject.org/v0.js"></script>, расположенной в разделе <head> документа AMP.

Среду выполнения AMP можно переключить в режим разработки на любой странице. В этом режиме на встроенной странице запускается механизм валидации AMP, который выводит статус валидации и все ошибки в консоль разработчика JavaScript. Чтобы запустить режим разработки, добавьте к URL страницы #development=1.

Ресурсы

Ресурсы, такие как изображения, видео, аудиофайлы или реклама, должны размещаться в AMP HTML-файле с помощью специальных элементов (например, <amp-img>). Мы называем их «управляемыми ресурсами», потому что их загрузкой (временем загрузки, необходимостью загрузки) управляет среда выполнения AMP.

Каких-либо гарантий в отношении загрузки, осуществляемой средой выполнения AMP, не предусмотрено — как правило, среда пытается загружать ресурсы достаточно быстро, чтобы они были готовы к тому моменту, когда пользователь захочет их увидеть. Среда выполнения выделяет наивысший приоритет ресурсам, находящимся в текущей области просмотра; при этом она пытается предугадать изменение области просмотра и выполняет предварительную загрузку соответствующих ресурсов.

Среда выполнения AMP может в любой момент выгружать ресурсы, которые в данный момент не находятся в области просмотра, а также переназначать контейнеры ресурсов, такие как iframe, для уменьшения общего потребления ОЗУ.

Компоненты AMP

AMP HTML использует специальные элементы (т. н. «компоненты AMP») для замены встроенных тегов загрузки ресурсов, таких как <img> и <video>. Эти элементы также используются для реализации функций, выполняющих сложные взаимодействия, таких как кольцевые галереи и лайтбоксы с изображениями.

Подробную информацию о поддерживаемых компонентах см. в спецификации компонентов AMP.

Есть 2 типа поддерживаемых компонентов AMP:

Встроенные
Расширенные

Встроенные компоненты постоянно доступны в документе AMP и имеют специальный выделенный элемент, например <amp-img>. С другой стороны, расширенные компоненты должны быть явным образом добавлены в документ.

Общие атрибуты

`layout`, `width`, `height`, `media`, `placeholder`, `fallback`

Эти атрибуты определяют макет элемента. Их главная цель — гарантировать возможность отображения элемента и резервирования пространства под него до загрузки каких-либо удаленных ресурсов или кода JavaScript.

Подробнее о системе макетов читайте в статье Система макетов AMP.

`on`

Атрибут on используется для установки на элементы обработчиков событий. То, какие события поддерживаются, зависит от элемента.

Синтаксис представляет собой простой предметно-ориентированный язык следующего вида:

eventName:targetId[.methodName[(arg1=value, arg2=value)]]

Пример: on="tap:fooId.showLightbox"

Если не указан параметр methodName, выполняется метод по умолчанию (если он определен для элемента). Пример: on="tap:fooId"

Некоторые действия могут принимать аргументы. Аргументы указываются в круглых скобках в нотации key=value . Допустимые значения:

простые строки без кавычек: simple-value;
строки в кавычках: "string value" или 'string value';
логические значения: true или false;
числа: 11 или 1.1.

Чтобы элемент «слушал» несколько событий, разделяйте события точкой с запятой ;.

Пример: on="submit-success:lightbox1;submit-error:lightbox2"

Подробнее о действиях и событиях AMP можно узнать здесь.

Расширенные компоненты

Расширенные компоненты — это компоненты, которые по умолчанию не включены в среду выполнения AMP. Их следует явным образом добавлять в документ.

Расширенные компоненты загружаются путем включения тега <script> в раздел head документа следующим образом:

<script
  async
  custom-element="amp-carousel"
  src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"
></script>

Тег <script> должен иметь атрибут async, а также атрибут custom-element, ссылающийся на имя элемента.

В рамках реализаций в среде выполнения имя может использоваться для отображения заполнителей для этих элементов.

URL-адрес скрипта должен начинаться с https://cdn.ampproject.org и обязан соответствовать очень строгому паттерну /v\d+/[az-]+-(latest|\d+|\d+.\d+).js.

URL

URL расширенных компонентов имеют следующий вид:

https://cdn.ampproject.org/$RUNTIME_VERSION/$ELEMENT_NAME-$ELEMENT_VERSION.js

Управление версиями

См. Политику управления версиями AMP.

Шаблоны

Шаблоны отображают HTML-контент на основании шаблона, предусмотренного для конкретного языка, а также предоставленных данных JSON.

Подробную информацию о поддерживаемых шаблонах см. в спецификации шаблонов AMP.

Шаблоны не поставляются со средой выполнения AMP и должны быть загружены так же, как и расширенные элементы. Расширенные компоненты загружаются путем добавления тега <script> в тег head документа:

<script
  async
  custom-template="amp-mustache"
  src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"
></script>

Тег <script> должен иметь атрибут async и атрибут custom-template, указывающий на тип шаблона. URL-адрес скрипта должен начинаться с https://cdn.ampproject.org и обязан соответствовать очень строгому паттерну /v\d+/[az-]+-(latest|\d+|\d+.\d+).js.

Шаблоны объявляются в документе следующим образом:

<template type="amp-mustache" id="template1">
Hello {{you}}!
</template>

Атрибут type является обязательным и должен ссылаться на объявленный скрипт custom-template.

Атрибут id является обязательным. Отдельные элементы AMP используют свои собственные шаблоны. Как правило, элемент AMP ищет <template> либо среди своих дочерних элементов, либо ссылается на него по идентификатору.

Синтаксис в составе элемента шаблона зависит от языка шаблона. В среде AMP на язык шаблона могут накладываться ограничения. Например, в соответствии с элементом «template», все операции должны выполняться на корректно сформированном дереве DOM. Все выходные данные шаблона также подлежат санитизации, чтобы гарантировать валидный для AMP формат данных.

Подробную информацию о поддерживаемых шаблонах см. в спецификации шаблонов AMP.

URL

URL расширенных компонентов имеют следующий вид:

https://cdn.ampproject.org/$RUNTIME_VERSION/$TEMPLATE_TYPE-$TEMPLATE_VERSION.js

Управление версиями

Дополнительные сведения см. в разделе «Управление версиями специальных элементов».

Безопасность

AMP HTML-документы не должны вызывать ошибок при использовании политики безопасности контента, которая не включает ключевые слова unsafe-inline и unsafe-eval.

Формат AMP HTML разработан таким образом, чтобы это условие всегда соблюдалось.

Все элементы шаблонов AMP должны проходить проверку безопасности AMP перед отправкой в репозиторий AMP.

SVG

В настоящее время разрешены следующие элементы SVG:

базовые: "g", "glyph", "glyphRef", "image", "marker", "metadata", "path", "solidcolor", "svg", "switch", "view"
формы: "circle", "ellipse", "line", "polygon", "polyline", "rect"
текст: "text", "textPath", "tref", "tspan"
rendering: "clipPath", "filter", "hkern", "linearGradient", "mask", "pattern", "radialGradient", "vkern"
специальные: "defs" (здесь разрешены все дочерние элементы, указанные выше), "symbol", "use"
фильтр: "feColorMatrix", "feComposite", "feGaussianBlur", "feMerge", "feMergeNode", "feOffset", "foreignObject"
ARIA: "desc", "title"

А также следующие атрибуты:

"xlink:href": разрешены только URI, начинающиеся с "#"
"style"

Обнаружение документов AMP

Ниже приводится стандартный способ, с помощью которого программное обеспечение может определять наличие у канонического документа AMP-версии.

Если существует документ AMP, который является альтернативной версией канонического документа, то канонический документ должен указывать на документ AMP с помощью тега link с отношением «amphtml».

Пример:

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html" />

Ожидается, что документ AMP будет самостоятельно указывать свою каноническую версию тегом link с отношением «canonical».

Пример:

<link
  rel="canonical"
  href="https://www.example.com/url/to/canonical/document.html"
/>

(Если один ресурс является одновременно AMP и каноническим документом, каноническое отношение должно указывать само на себя — указывать отношение «amphtml» не требуется.)

Обратите внимание, что для максимальной совместимости с системами, потребляющими AMP, необходимо обеспечить возможность считать отношение «amphtml» без выполнения JavaScript — то есть тег должен присутствовать в необработанном HTML, а не внедряться посредством JavaScript.

Спецификация AMP HTML

Производительность

Формат AMP HTML

Образец документа

Обязательная разметка

Метаданные

HTML-теги

Комментарии

HTML-атрибуты

Классы

Идентификаторы

Ссылки

Таблицы стилей

@-правила

Авторские таблицы стилей

Селекторы

Имена классов и тегов

Важно!

Свойства

Максимальный размер

Таблица стилей ключевых кадров

Пользовательские шрифты

Среда выполнения AMP

Ресурсы

Компоненты AMP

Общие атрибуты

layout, width, height, media, placeholder, fallback

on

Расширенные компоненты

URL

Управление версиями

Шаблоны

URL

Управление версиями

Безопасность

SVG

Обнаружение документов AMP

`layout`, `width`, `height`, `media`, `placeholder`, `fallback`

`on`