AMP - Ускоренные мобильные страницы, полезная информация

Владимир Демянович
03.09.2017
Accelerated Mobile Pages (AMP)

Ускоренные мобильные страницы (Accelerated Mobile Pages, AMP) - технология с открытым исходным кодом, которая помогает оптимизировать контент для мобильных устройств и обеспечивает быструю загрузку.

По сути AMP-страницы хранятся в специальном кеше Google, что обеспечивает более быструю загрузку. Страница грузится прямо с серверов google. При этом счетчики посещений и отображения рекламных блоков работают и учитываются.

Пример сайта на amp-страницах, можно увидеть на одном из моих подблогов - elims.org.ua/lifehack/amp. Лучше всего смотреть с мобильных устройств, ведь именно для них предназначены amp-страницы. Все реализовано при помощи установки 3-х wordpress-плагинов, при этом основные настройки производятся лишь в одном из них.

Содержание

Изначально я планировал создать подробное и полноценное руководство о том, как ввести AMP на своем сайте и не наступить на те или иные грабли. Но погрузившись с головой в их документацию, примеры и нюансы, понял что всего не описать и лучше вести эту запись в моем любимом формате - в виде сумбурных заметок, которые буду стараться как-то структуризировать.

Ввод AMP страниц на своем сайте

AMP можно вводить двумя способами (испробовал оба):

  1. Через установку и настройку плагинов к популярным CMS - наиболее легкий способ изучения технологии: "на живом примере". По сути вам нужно лишь иметь общее представление что такое AMP, произвести настройки в интуитивно понятных плагинах и проверить автоматическими валидаторами есть ли какие-то ошибки.
  2. Верстка своего шаблона с нуля в AMP-корректном формате - в этом случае Вам придется потратить свое время на изучение технологии, узнать о ее требованиях и ограничениях. Можете начать с внимательного прочтения этой записи и продолжить чтением всех ресурсов которые указаны в блоке полезных ссылок.

WordPress плагины для AMP

Если у вас wordpress-сайт, то вам повезло - тут все просто. Нужно установить и настроить три плагина:

  • AMP - плагин-ядро AMP, от известной команды "Automattic", создателей таких мега-популярных плагинов и решений как Jetpack, Gravatar, VaultPress, Akismet, Woocommerce, WP Super Cache. Этот плагин нужно лишь установить, ничего настраивать в нем не нужно.
  • Glue for Yoast SEO & AMP - дополнение к SEO-плагину от Yoast, в котором появляется несколько настроек, касающихся SEO на AMP - страницах.
  • AMP for WP - Accelerated Mobile Pages - плагин в котором производятся основные настройки AMP страниц

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

AMP состоит из набора 3-х технологий:

  • AMP HTML – HMTL в котором некоторые тэги заменены на свои.
  • AMP JS – JS библиотека для AMP страниц
  • Google AMP Cache – CDN, распространяет валидные AMP-страницы.

URL для AMP рекомендуются использовать такого вида: amp.domain.com/page или domain.com/amp/page, но не domain2.com/page когда при этом не amp версия находится на domain.com/page.

Как объявить о том, что доступна AMP-версия страницы

На не AMP страницу добавьте код:

<link rel="amphtml" href="https://example.com/amp-version" />

Если AMP версия страницы имеет не AMP, обычную версию - каноническую, то укажите на нее

<link rel="canonical" href="https://example.com/html-version" />

Если AMP версия страницы не имеет обычную версию страницы, то в canonical нужно указать ссылку на саму себя.

Пример самой простой amp страницы

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</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>Welcome to the mobile web</h1>
  </body>
</html>

Требования, ограничения, рекомендации

Требования к HTML разметке

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

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

Ограничения:

  • Разрешены только асинхронные скрипты
  • Нельзя описывать стили с помощью «style» по месту применения, например <div style='....'>.
  • Стили должны быть описаны в HTML файле в единственном тэге <style amp-custom>, в разделе <head>
  • Стили ограничены размером в 50 КБ
  • Параметры «width» и «height» внешних ресурсов, таких как картинки, должен быть указан внутри html
  • Нельзя написать произвольный Javascript-код, можно использовать только поддерживаемую библиотеку AMP JS
  • Шрифты должны быть загружены по ссылке или в CSS-конструкции @font-face
  • Запрещено использовать тег <img>, замена: <amp-img>
  • css не должен использовать инструкции "!important"

Рекомендации по логотипам для отображения в "карусели горячих новостей"

  • Изображения должны быть в растровом формате (например, .jpg, .png, .gif). Векторные форматы (например, .svg) и анимация не допускаются.
  • Логотипы должны быть представлены полным товарным знаком или полным логотипом, а не значком.
  • Изображение должно поместиться в прямоугольник с размерами 600x60 пикселей.
  • В идеальном случае изображение логотипа должно иметь размер ровно 60 пикселей по вертикали и не более 600 пикселей по горизонтали. Если при высоте 60 пикселей ширина окажется более 600 пикселей, рекомендуется уменьшить ширину изображения до 600 пикселей и пропорционально уменьшить его высоту до размера менее 60 пикселей, сохранив исходное соотношение сторон.
  • Изображение должно иметь размер либо точно 60 пикселей по вертикали (рекомендуется), либо точно 600 пикселей по горизонтали. Например, размер 450x45 пикселей не допускается, хотя он помещается в прямоугольник 600x60 пикселей.
  • Логотипы на основе слов должны иметь высоту не более 48 пикселей и быть выровнены по вертикали относительно центра изображения высотой 60 пикселей.
  • Для единообразного представления логотипы должны быть хорошо читаемы на белом или светлом фоне.
  • Логотипы со сплошным фоном должны иметь вокруг торгового знака отступы не менее 6 пикселей.

Остальные рекомендации:

  • Не рекомендуется использовать относительные URL при объявлении ссылки на AMP-страницу.
    • Так НЕ рекомендуется: <link rel="amphtml" href="/lifehack/amp" />
    • Так рекомендуется: <link rel="amphtml" href="https://elims.org.ua/lifehack/amp" />

Возможности

Множество демо-примеров возможностей технологии доступно на официальном сайте: ampbyexample.com

Ниже я буду собирать лишь, некоторые из них, которые нужны мне "под рукой".

"Адаптивные изображения"

amp-img позволяет показывать разные изображения устройствам с разными разрешениями экрана.

Например:

<amp-img media="(min-width: 650px)" src="wide.jpg" width=466 height=355 layout="responsive"></amp-img>

<amp-img media="(max-width: 649px)" src="narrow.jpg" width=527 height=193 layout="responsive"></amp-img>

Или

<amp-img
    src="/img/narrow.jpg"
    srcset="/img/wide.jpg 640w,
           /img/narrow.jpg 320w"
    width="1698"
    height="2911"
    layout="responsive"
    alt="an image">
</amp-img>

Плюсы и минусы технологии

Плюсы:

  • Увеличение скорости загрузки страниц может дать преимущество в SEO, ведь скорость загрузки - один из факторов ранжирования.
  • Стандарт разработан Google, а значит само наличие AMP-страниц для выдачи мобильным пользователям на сайте может быть фактором ранжирования.
  • АМР-страницы могут попасть в «карусель» в мобильной выдаче в топе Google.
  • Есть возможности для кастомизации, и в том числе возможность не использовать AMP Cache от Google и отдавать контент со своей CDN или своего сервера.
  • Наличие плагинов для популярных CMS облегчающие внедрение AMP

Минусы:

  • АМР добавляет сложности. Приходится заниматься внедрением еще одной технологии.
  • Поддержка кастомного Javascript возможна только через «amp-iframe», но это не дает возможности получить доступ к данным из этого скрипта.

Остальное

Нужно ли добавлять AMP страницы в xml карту сайта?

Нет, не нужно. Ссылки с rel=amphtml достаточно. Ответ в twitter Джона Мюллера - представителя поиска.

Проверка AMP страницы на корректность

  • search.google.com/search-console/amp - сообщает соответствует ли указанная страница критериям AMP, можно посмотреть как страница будет отображаться в поиске, можно добавить в индекс Google
  • search.google.com/structured-data/testing-tool - проверка структурированных данных, подскажет какие именно ошибки допущены
  • validator.ampproject.org - мне этот валидатор показался наиболее информативным, можно проверять как по ссылке, так и просто вставив в форму исходный код страницы
  • AMP Validator - расширение для chrome от создателей validator.ampproject.org. Расширением пользоваться намного удобней - также отображает все ошибки и замечания, с их описанием и номерами строк, в котором они обнаружены
  • technicalseo.com/seo-tools/amp - проверяет правильно ли слинкованы между собой amp и полноценная каноническая страница и еще некоторые параметры. Можно проверять по 100 страниц за раз и выгружать результат в csv-файл
  • javascript-консоль в Google Chrome - тоже может помочь с проверкой валидности AMP страниц. Для этого добавьте к ссылке на AMP-страницу вот это: "#development=1", должно получится например вот так: https://elims.org.ua/lifehack/amp/#development=1 . Для перехода в консоль нажмите в google chrome сочетание клавиш "Ctrl + Shift + J" - консоль появится. Для пущей верности можете еще раз обновить ту страницу, которую проверяете на предмет ошибок и замечаний.

Полезные ссылки

Возможно Вам будет интересно:
  1. WordPress: Повторяющиеся заголовки (title) и номер страницы
  2. PHP: Защита страницы паролем
  3. PHP: Отображение разного контента в зависимости от адреса страницы
Понравилось? =) Поделись с друзьями:
Опубликовано в рубрике SEO
«
»

Обсуждение записи “AMP - Ускоренные мобильные страницы, полезная информация”

  1. Павел says:
    07.11.2017 в 21:50

    Здравствуйте! Объясните, пожалуйста, как сделать эту страницу, если сайт не на джумлах, а просто на html. Надо сделать файл .html и разместить его в корне?? или как?

  2. Рустам says:
    08.12.2017 в 08:36

    Отличный формат постов. Видно, что погружаетесь в каждую тему.

Обсудить

 
⇧
⇩