Насчет адресов - вынести можно как на поддомен amp.site.com/page так и в директорию site.com/amp/page, но не на отдельный домен (чтобы пользователь был на том же сайте).
Google подхватывает те страницы AMP, на которые ссылаются обычные. То есть - нужна перелинковка адресов (каноничный / АМПшный).
Делается это добавлением в блоке <head> линков типа этого:
<ink rel="canonical" href="https://site.com/page">
<ink rel="amphtml" href="https://site.com/amp/page">
Что обязательно должно быть в AMP странице1.) Начинаться с типа документа <!doctype html>
2.) содержать тег <html> или <html amp>
3.) содержать теги <head> и <body>
4.) содержать внутри <head> тег <link rel="canonical" href="адрес">, указывающий на обычную версию страницы (или сам на себя, если обычной версии не существует)
5.) содержать внутри <head> тег <meta charset="utf-8"> (вписанный первым внутри <head>)
6.) содержать внутри <head> тег <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> (значение initial-scale=1 очень рекомендуется).
7.) содержать внутри <head> тег <script async src="https://cdn.ampproject.org/v0.js"></script>, который загружает библиотеку AMP JS (обязательно в самом конце <head>)
8.) содержать в теге <head> следующий код:
<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>
Какие ограничения есть для AMP страниц1.) разрешены только асинхронные скрипты (то есть <script async src="file.js"></script> или <script defer src="file.js"></script>)
2.) запрещено вписывать стили по месту применения (то есть <div style="color:#060"></div> запрещается)
3.) все стили должны быть в HTML-файле, в единственном тэге <style amp-custom> (внутри <head> страницы)
4.) объем стилей ограничен размером в 50 килобайт (кто не уложился - у того не вёрстка, а груда говнокода)
5.) параметры «width» и «height» внешних ресурсов, таких как картинки, должны быть указаны внутри html
6.) нельзя вставить прямо в документ произвольный Javascript-код, можно использовать только поддерживаемую библиотеку AMP JS (подгружать можно)
7.) шрифты должны быть загружены по ссылке или в CSS-конструкции @font-face
8.) запрещено использовать тег <img>, вместо него использовать <amp-img> (как-то вот так вот <amp-img src="файл" width="" height=""></amp-img>)
9.) стили css не должны использовать инструкции "!important" (говнокодеры сейчас вообще в шоке)
Очень настойчиво рекомендуетсяНе используйте относительные URL при объявлении линка на AMP-страницу.
плохо: <link rel="amphtml" href="/amp/page">
хорошо: <link rel="amphtml" href="https://site/amp/page">
Компоненты AMP (шило на мыло)Встроенные:
amp-ad - контейнер для отображения рекламы
amp-img - замена тега img
amp-video - замена HTML5-тегу video
Подключаемые отдельными библиотеками:
amp-anim - анимированное изображение (GIF)
amp-audio - замена HTML5-тегу audio
amp-carousel - карусель превью картинок по горизонтали
amp-fit-text - автоматическое уменьшение или увеличение размера шрифта, для впихивания в ограниченную область
amp-iframe - замена iframe
amp-image-lightbox - лайтбокс (полноразмерный просмотр большого изображения при клике на превью или ссылку)
amp-lightbox - еще один лайтбокс
amp-instagram - отображает пост в инстаграме
amp-twitter - отображает твит
Тестировать свое безобразие можно этим. Но имейте ввиду, что от частых проверок там придется гадать на капче. И не офигевайте от ошибок открыв консоль, большая их часть будет вызвана попыткой подгружать неразрешенное (так уж сделано средство тестирования).
https://search.google.com/test/amp
С какими еще проблемами можно столкнутьсяВо-первых, разгадав капчу можно узнать что проверялка решила отдохнуть. :angry:
Во-вторых, можно "активно огорчиться", узнав о запрете использования <noindex> в AMP-страницах. :laugh:
Что хорошего в AMPНаконец-то счетчики можно прикрутить асинхронно.
Яндекс-метрика добавляется в <head> (подгрузка с их CDN'ки)
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
А затем в то место, где её выводить собрались
<amp-analytics type="metrika">
<script type="application/json">
{
"vars": {
"counterId": "сюдаНомерСчетчикаВставить"
...
}
}
</script>
</amp-analytics>
P.S:Подключать рекламные блоки от гугла к AMP-страницам нужно особым образом.
https://support.google.com/adsense/answer/7183212?hl=ru
Если кому-то особо нефиг делать, можете переверстать страницу лейаутами специально под AMP.
https://www.ampproject.org/ru/docs/guides/responsive/control_layout