для AMP страниц

Цель: ускорения мобильных страниц : удобство использования + занять приоритетные позиции в мобильной выдаче. (запуск частями)

Задача

Задачу реализуем по частям.

Сначала делаем теги. Смотрим результат. Если видим улучшение позиций для мобильной выдачи и рост трафик с мобильных устройств, то делаем следующим шагом

  • категории
  • товарчики
  • прочее

Google будет индексировать страницы AMP, если другие веб-страницы ссылаются на них или связаны с ними специальным тегом в <head>.

Добавить на обычную страницу ссылку на страницу AMP, чтобы робот Google узнал о ней:


<link rel=”amphtml” href=”https://www.example.com/url/to/amp-version.html” />

Добавить на страницу AMP ссылку на каноническую версию обычной страницы:


<link rel=”canonical” href=”https://www.example.com/url/to/regular-html-version.html” />

Страницы AMP, у которых нет обычных версий, нужно указать как канонические:


<link rel=”canonical” href=”https://www.example.com/url/to/amp-document.html” />

Страницы должны быть указаны в файле Sitemap, если нет обычной версии сайта/ (если есть отдельно добавлять не нужно)

Не закрываем от индексации ни тегом, ни в robots.txt. (только каноникл)

Документ AMP HTML ДОЛЖЕН :

  • Начинаться с типа документа <!doctype html>.
  • Содержать тег верхнего уровня <html ⚡> (также допускается использование <html amp>).
  • Содержать теги <head> и <body> (необязательные в разметке HTML).
  • Содержать тег <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>, который указывает и загружает библиотеку AMP JS.

Содержать в теге <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>

Пример:

<!doctype html>
     <html amp> (1)
     <head>
          <meta charset=”utf-8″>
          <link rel=”canonical” href=”hello-world.html”>
          <meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″> (2)
          <style amp-boilerplate> (3)
          /* стили страницы */
          </style>
          <!— библиотека скриптов AMP —>
          <script async src=”https://cdn.ampproject.org/v0.js”></script> (4)
     </head>
     <body>
          Hello World!
     </body>
</html>

На что рекомендуют обратить внимание:

  • Тег meta с объявлением «viewport» нужен для нормального отображения сайта на мобильных
  • Тег style c атрибутом amp-boilerplate — все стили на странице должны быть объявлены именно в таком виде. Это делается для уменьшения количества запросов на странице — все стили здесь загружаются быстро.
  • Для всех изображений нужно обязательно проставить «width» и «height»
  • Для адаптивных изображений нужно проставить
  • Инлайн-стили через атрибут style запрещены, их нужно выносить вверх страницы или подключать отдельными файлами.
  • layout=”responsive”

Делать все сразу. Но если удобнее делать частями, то можем начать с тегов


Аналитика:
https://developers.google.com/analytics/devguides/collection/amp-analytics/?hl=ru

Гид по AMP:
https://www.ampproject.org/docs/guides/discovery.html

Тестирование страниц AMP:
https://www.ampproject.org/ru/docs/guides/validate.html
https://validator.ampproject.org/
https://search.google.com/test/amp

Рекомендации от Google Поиска по созданию ускоренных мобильных страниц:
https://support.google.com/webmasters/answer/6340290

Все доступные виды компонентов с примерами использования:
https://ampbyexample.com/

Добавить комментарий