AMP

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

Important: this documentation is not applicable to your currently selected format ads!

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-теги можно использовать без изменений. Некоторые теги имеют специальные эквивалентные теги (например, и ), а другие теги категорически запрещены:

Тег Статус в AMP HTML
script Запрещен, если параметр type не имеет значение application/ld+json, application/json или text/plain (другие неисполняемые значения могут быть добавлены по мере необходимости). Исключения — обязательный тег script, используемый для загрузки среды выполнения AMP, а также теги script для загрузки расширенных компонентов.
noscript Разрешен. Можно использовать в любом месте документа. Содержимое внутри элемента будет показано, если пользователь отключит JavaScript.
base Запрещен.
img Заменен на amp-img.
Обратите внимание: в соответствии со стандартом HTML5 является пустым элементом, поэтому у него нет закрывающего тега. Однако у закрывающий тег есть ().
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 не допускаются.

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 разрешено использовать внутри