MAC Affiliate Conference in Armenia 30-31 мая 2024 года Подробнее

Accelerated Mobile Pages (AMP) — осваиваем технологию ускорения мобильных страниц

Мы увеличиваем посещаемость и позиции в выдаче. Вы получаете продажи и платите только за реальный результат, только за целевые переходы из поисковых систем
Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Подпишись на рассылку и получи книгу в подарок!

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

Технология AMP состоит из:

  • AMP HTML - это привычный нам язык разметки HTML, но он имеет свои особенности, некоторые теги заменены на эквивалентные AMP-теги, а некоторые запрещены в использовании;
  • AMP JS - используется только собственная js-библиотека AMP, позволяющая осуществлять асинхронную загрузку элементов страницы;
  • Google AMP Cache. Индексируя AMP страницу, поисковая система кеширует ее контент и отдает пользователю не с вашего сайта, а со своих серверов.

Как создать AMP страницу

Рассмотрим разметку 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>

Перечислим ряд рекомендаций, которые нужно обязательно учитывать при создании AMP страницы, документ должен:

  • начинаться с <!doctype html>;
  • содержать теги:
    • <html amp> или <html ⚡ >;
    • <head>;
    • <body>;
    • <meta charset="utf-8">;
    • <meta name="viewport" content="width=device-width,minimum-scale=1">;
    • содержит <script async src="https://cdn.ampproject.org/v0.js"></script> - подключение AMP JS библиотеки, указывается перед закрывающим тегом </head>;
    • в теге <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>
    

В теге <head> можно прописать пользовательские стили:

<style amp-custom>
  /* any custom style goes here */
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>

Используем rel="canonical"

Если при реализации на вашем сайте имеются обе версии одной страницы: обычной и AMP, во избежания дублирования, необходимо использовать канонические URL. Для того чтобы Google проиндексировал обе версии страницы необходимо выполнить следующее:

  • на обычной (основной) странице в раздел <head> добавить ссылку на AMP-страницу:
    <link rel="amphtml" href="http://ваш_домен.ru/articles/dom/kak-ochistit-chajnik-ot-nakipi.html/amp" />
    
  • на AMP страницу в раздел <head>  добавляем код ссылки на каноническую версию основной страницы:
    <link rel="canonical" href="http://ваш_домен.ru/articles/dom/kak-ochistit-chajnik-ot-nakipi.html" />
    

 

Accelerated mobile pages для сайтов на WordPress

Если ваш сайт работает под управлением CMS WordPress, вам необходимо всего лишь установить плагин, который добавить поддержку AMP на сайт, правда, с небольшими ограничениями:

  1. плагин применяется только к записям, обычные страницы и страницы архивов записей не поддерживаются;
  2. записи могут отображаться мобильным пользователям только из выдачи поисковой системы Google.
2dcac8b4e0

После активации плагина если URL  записи добавить "/amp", то мы увидим AMP страницу .

f35e878fbf

Валидатор проверки AMP страниц?

Google уведомляет, что страницы с ошибками не будут отображаться в результатах поиска.

После создания AMP страниц обязательно проверьте корректности их реализации с помощью валидатора. Для этого необходимо к URL  страницы дописать #development=1, затем перейти в консоль браузера, где будут отображены результаты проверки. При успешной проверке вы увидите следующий результат:

ed06b29d10

Быстро загружающиеся страницы для мобильных устройств в вашем Вебмастере

Следить за индексацией  ваших ускоренных мобильных страниц вы можете в Google Вебмастере. Для этого в панели Вебмастера вам необходимо перейти на вкладку "Вид в поиске", далее вкладка "Быстро загружающиеся страницы для мобильных устройств":

Вывод:

 

Google пытается найти способы сделать информацию доступней и в этот раз действия направлены на улучшения мобильного интернета. Мы получили инструмент, с помощью которого можно сделать контент доступней для пользователей. С 25 февраля поисковая система анонсировала — страницы на базе AMP будут появляться в результатах мобильного поиска в разделе "Главные новости". В российской выдаче это выглядит так:

amp

 

На текущий момент эта технология подходит для новостных и статейных ресурсов и действует неполноценно только в поиске Google, но все еще впереди. Внедрять уже или подождать — решать вам. Но отслеживать дальнейшее развитие технологии AMP стоит.

Продвигайтесь в Семантике

– Только качественный трафик
– Понятная отчетность о работе и о планах работ
– Полная прозрачность работ

Продвижение сайтов – качественный трафик из Яндекса и Google
Продвигаясь в Семантике, вы не платите:
– За переходы с упоминанием названия вашей компании.
– За переходы по стоп-словам.
– За непродолжительные переходы (менее 10 секунд).
Подпишись на обновления блога