V6NET.RU

Начало

AMP HTML страница имеет строго определенную структуру и схематично выглядит примерно так:

<!doctype html>

<html amp>

<head>

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

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

<link rel="canonical" href="SOME_URL">

<style amp-custom> </style>

</head>

<body>

[ Здесь размещается содержимое страницы, отображаемое на экране ] </body>

</html>

Подробнее:

Страница ВСЕГДА начинается с тэга <!doctype html>, затем следует тэг <html amp>. Далее следуют служебные строки, обязательные для формата AMP.

В тэге <link rel="canonical" href="$SOME_URL"> должна содержаться ссылка или на “классическую”, то есть не-АМР страницу, или ссылка на саму АМР-страницу, если для нее не существует “классической”. Второй вариант имеет место быть если вы делаете только АМР-сайт, как например этот :-).

Метаданные.

Желательно включать в AMP HTML документ аннотации с использованием какого-нибудь распространенного протокола: Open Graph Protocol, Twitter Cards, и т.д.

Рекомендуется добавлять в раздел информацию, описывающую саму страницу, то есть микроразметку, например от schema.org.

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

Конечно же, headline, image и datePublished нужно заменить на свои данные.

Компоненты AMP

AMP HTML использует свои тэги как замену принятым в HTML. Пример заменяемых тэгов: <img>, <video>, <form>.

Существует два вида компонентов:

  1. Встроенные
  2. Остальные

Встроенные компоненты доступны по умолчанию, а для использования остальных нужно включать ссылку на них в раздел <head>.

Атрибуты AMP

layout, width, height, media, placeholder, fallback

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

on

Атрибут on используется для назначения реакции на события, генерируемые элементами. Синтаксис будет такой:

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

Пример: on="tap:fooId.showLightbox" - наиболее часто используемый вариант, при прикосновении к элементу с ID=“fooId” будет вызван элемент “showLightbox”.

Как это работает

В случае, если у “классического” документа прописана в заголовках ссылка на AMP-документ, то поисковая система (Гугл) сохраняет копию AMP-документа у себя и показывает ее, а не ссылку на исходный документ. Это значительно ускоряет отображение страницы.

(В случае, если у вас есть только AMP-документ, он должен указывать на самого себя)

V6NET.RU