AMP страницы для Google Поиска
Создавая AMP страницу нужно помнить что на ускоренной странице должен быть доступен тот же контент и функционал, который присутствует на стандартной странице. Также нужно использовать только HTTPS протокол.
css AMP страниц не должен содержать:
- !important;
Почему АМП это 
круто?
1. Скорость + в результатах мобильного поиска Google отображаются с расширенными данными и значком, указывающим на быструю загрузку, что делает сниппет более привлекательным для потенциальных посетителей;
2. Падает показатель отказов.
3. Растет мобильный трафик.
4. Снижается нагрузка на хостинг - поисковик хранит КОПИЮ у себя на сервере - вашей АМП страницы!
5. 
Но! Помните что есть AMP JS — библиотека AMP скриптов, которая заточена под асинхронную загрузку и постояно расширяется;
6. С конца 2019 года разрешили добавлять свои скрыпты - смотреть
Пример ускоренной страницы:
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Commerce</title>
<link rel="canonical" href="https://www.ampstart.com/templates/e-commerce/cart.amp">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<!-- Используется Google для установки порядка парсинга DOM и CSSOM. а также скрывает контент до его полной загрузки. -->
<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 href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet">
<style amp-custom="">
<!-- Здесь свои стили -->
</style>
<!--Последний обязательный элемент раздела-->
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<header class="">
<a target="_blank" href="product-listing.amp.html">Products</a>
</header>
<section class="">
<h2>You may also like</h2>
<amp-img src="../img/logo-nav.png" width="279" height="175 alt=""></amp-img>
</section>
<footer>
</footer>
</body>
</html>url amp страницы.
Может быть двух видов:
http://www.example.com/myarticle/amp
http://www.example.com/myarticle.amp.html
canonical и обратная к ней
AMP-страница должна содержать ссылку:
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
А на AMP-странице — доджна быть обратная ссылка:
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
Требования к CSS:
Css стили пишутся inline, и их размер не должен превышать 50кб.
Требования к логотипу:
Логотип должен быть вписан в прямоугольник 60х600px по одной из сторон на выбор
(т.е. высота может быть равна 60px, а ширина взята произвольного размера (до 600px) или же наоборот: ширина равна 600px, а высота - произвольная, но не более 60px). Соответствие одной из сторон названному размеру — обязательное условие, а использование лого квадратной формы не допускаются.
Требования к гиперсылкам:
Все ссылки должни иметь трибут - target="_blank"
В AMP для картинок тег html пишется по другому:
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>AMP для Видео:
документация - здесь
Нужно вставлять еще один скрипт:
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
======
<amp-video controls
width="640"
height="360"
layout="responsive"
poster="/static/inline-examples/images/kitten-playing.png">
<source src="/static/inline-examples/videos/kitten-playing.webm"
type="video/webm" />
<source src="/static/inline-examples/videos/kitten-playing.mp4"
type="video/mp4" />
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>Для вставки видео с YouTube:
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<amp-youtube data-videoid="WHD8FM2lpUE" layout="responsive" width="480" height="270"></amp-youtube>Также есть другие АМР теги (- Список всех тегов) :
<amp-iframe width="200" height="100"
sandbox="allow-scripts allow-same-origin"
layout="responsive"
frameborder="0"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAyAS599A2GGPKTmtNr9CptD61LE4gN6oQ&q=iceland">
</amp-iframe>
<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
<ul>
<li>Nav item 1</li>
<li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
<li>Nav item 3</li>
<li><a href="#idFour" on="tap:idFour.scrollTo">Nav item 4</a></li>
<li>Nav item 5</li>
<li>Nav item 6</li>
</ul>
<nav toolbar="(max-width: 767px)" toolbar-target="target-element">
<ul>
<li>
<input placeholder="Search..."/>
</li>
</ul>
</nav>
</amp-sidebar>
Запрещено добавление пользовательских java-скриптов на AMP-страницы с помощью тега <script> запрещено. Можно только добавлять AMP runtime в раздел заголовков с помощью загрузки данного скрипта:
<script src="https://cdn.ampproject.org/v0.js"></script>
Но самое главное ЭТО МИКРОРАЗМЕТКА - смотреть тут
Компоненты AMP страниц:
amp-ad — контейнер для рекламных блоков:
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<amp-ad width=300 height=200
type="adsense"
data-ad-client="ca-pub-8125901705757971"
data-ad-slot="7783467241">
</amp-ad>amp-pixel — элемент
для отслеживания просмотров страниц. Он не поддерживает стили, код имеет вид:
<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>Для вставки кода отслеживания analytics.google:
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<title>AMP gtag demo</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="self.html" />
<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>
<!-- Load AMP -->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Load amp-analytics -->
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>
<body>
<!-- Configure analytics to use gtag -->
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config": {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
},
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
}
</script>
</amp-analytics>
<h1>Make it so.</h1>
<div>
<button type="button" id="the-button">Engage!</button>
</div>
</body>
</html>* GA_MEASUREMENT_ID - заменить на свой индефикатор. (- более подробно)
Чтобы созданные AMP-страницы попали в поисковую выдачу, стоит избегать синтаксических ошибок и не использовать запрещенные либо устаревшие теги.
Ошибки в таблице стилей CSS:
Существуют следующие ошибки AMP, связанные с таблицами стилей:
STYLESHEET_TOO_LONG — таблица стилей превысила допустимый лимит размера в 50000 байт. В таком случае необходимо уменьшить содержимое тега <style amp-custom> до допустимой величины;
CSS_SYNTAX — синтаксическая ошибка в таблице стилей. Нужно исправить ошибку в указанном месте;
CSS_SYNTAX_INVALID_AT_RULE — использование недействительного правила. Необходимо исправить ошибку, относящуюся к директивам CSS.
--- Ресурсы:
1. Проверка АМП страниц: https://search.google.com/test/amp?hl=ru
2. Google рекомендаци к AMP - https://developers.google.com/search/docs/guides/enhance-amp
3. Учебник по АМП: https://amp.dev/documentation/guides-and-tutorials/start/create/?format=websites
4. Сервис позволяет конвертировать вашу страницу в AMP добавив одну строку - https://mercury.postlight.com/amp-converter/
5. Генератор АМП страницы с существующей - https://html2amp.mobilizetoday.ru
6. Генератор - https://amp.dev/boilerplate/?referrer=ampbyexample.com
===
P.S. Удачи Вам... ой как она Вам пригодится... 