Создание первой AMP страницы

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


<!doctype html>
<html amp lang="ru">
<head>
<meta charset="utf-8">
<title>Здравствуйте, товарищи!</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
<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>Добро пожаловать в мир AMP</h1>
</body>
</html>

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

Обязательная разметка страницы

На всех страницах AMP должны соблюдаться следующие правила:

Общая информация

  • Стартовый тег: <!doctype html>. Он должен быть всегда первым.
  • Начало страницы отмечается стандартным тегом <html>, либо <html amp>. Соответственно, последним будет закрывающий тег </html>.
  • В отличие от стандартного языка разметки HTML, в AMP теги <head> и <body> обязательны.

Блок заголовка <head>

  • Необходимо задать базовую (каноническую, образцовую) HTML-страничку той AMP-страницы, которую Вы создаете. Прописывается это в теге <link>, в его атрибуте rel="canonical", туда нужно передать ссылку на базовую HTML-страницу. Если Вы не хотите делать HTML-версию, можно прописать здесь ссылку на эту же AMP-страницу (цикличная ссылка). На основной HTML-странице, соответственно, будет атрибут rel="amphtml", он будет вести на AMP-версию страницы.
  • Обязательно нужно прописывать набор символов <meta charset="utf-8">, и делать это нужно сразу после объявления тега <head>.
  • В том же блоке заголовка, необходимо прописать специальный мета-тег viewport (параметры можно посмотреть в соответствующем коде выше). Отвечает этот тег за то, чтобы страничка масштабировалась под размеры конкретного мобильного экрана пользователя, открывшего ее.
  • Последний заголовочный тег должен загружать специальную AMP JS библиотеку для быстрой визуализации страниц.
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  • В заголовочной части также должен быть прописан тег <style> с параметрами (все параметры можно увидеть выше, в представленном AMP HTML коде). Данный тег отвечает за стили. В отличие от HTML, в AMP нельзя подключать CSS, поэтому, стили прописываются в этом теге. Причем, все стили прописываются только в одном месте, чтобы ускорить их загрузку.

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

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

Оставить комментарий

avatar
25412
  Подписаться  
Уведомление о