Прежде чем начать создавать странички на AMP, давайте рассмотрим первое шаблонное приложение. Возьмите код ниже, скопируйте в файл с расширением .HTML и сохраните. Это будет каркас первый страницы на AMP HTML.
Код базового шаблона можно найти на нашем сайте, нужно его хорошенько просмотреть и понять, из чего состоит наш каркас страницы AMP.
Обязательная разметка страницы
На всех страницах AMP должны соблюдаться следующие правила:
Общая информация
- Стартовый тег: <!doctype 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 (параметры можно посмотреть в соответствующем коде выше). Отвечает этот тег за то, чтобы страничка масштабировалась под размеры конкретного мобильного экрана пользователя, открывшего ее.
- Последний заголовочный тег <script async src="https://cdn.ampproject.org/v0.js"></script> должен загружать специальную AMP JS библиотеку для быстрой визуализации страниц.
- В заголовочной части также должен быть прописан тег <style> с параметрами (все параметры можно увидеть выше, в представленном AMP HTML коде). Данный тег отвечает за стили. В отличие от HTML, в AMP нельзя подключать CSS, поэтому, стили прописываются в этом теге. Причем, все стили прописываются только в одном месте, чтобы ускорить их загрузку.
Помимо обязательных требований, описанных выше, есть некоторые дополнительные возможности. Они не обязательные, о некоторых из них будет рассказано в других разделах.
Выше приведен только каркас страницы AMP. Теперь его нужно заполнять, добавлять картинки, красивые стили. Всем этим займемся далее.
Если Вас заинтересовала технология, рекомендуем посетить наш сайт: amp-lessons.com
