Ускорение мобильных страниц стало одной из ключевы задач продвижения сайта. Фактор скорости определяет до 70% успеха в SEO.
Мы собрали свой плагин, который позволяет автоматически формировать AMP-страницы для сайтов на MODx. AMP (Accelerated Mobile Pages) — это гугловский аналог турбо-страниц Яндекса для мобильной выдачи.
Плагин работает на базе библиотеки Amp-library: гитхаб/Lullabot/amp-library.
Инструкция для специалистов:
1) Устанавливаем пакет через Установщик — Загрузить пакет с компьютера;
2) Создаем шаблон AMP Страницы:
<!DOCTYPE html>
<html amp lang="ru">
<head>
<meta charset="utf-8">
<title>[[*pagetitle]]</title>
<link rel="canonical" href="/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
</head>
<body>
<amp-sidebar id="sidebar" layout="nodisplay">
<div role="button" on="tap:sidebar.close" tabindex="5" class="close">×</div>
<ul>
<li role="navigation" tabindex="1"><a href="/" title="Главная страница">Главная страница</a></li>
</ul>
</amp-sidebar>
<div id="header">
<a href="[[++site_url]]" title="[[*pagetitle:escape]]">
<amp-img src="[[++site_url]]logo.svg" alt="[[*pagetitle:escape]]" width="200" height="40" style="float:right"></amp-img>
</a>
<div role="button" on="tap:sidebar.toggle" tabindex="0" id="ham">☰</div>
</div>
<div style="margin: 10px;">
<h1>[[*pagetitle]]</h1>
[[*content]]
</div>
<div id="footer">
</div>
</body>
</html>
3) Если у вас один шаблон, то к ссылке дописываем запрос ?amp (или в Системные настройки — googleAmpModx меняем имя запроса на другой) и в Системные настройки — googleAmpModx выбираем шаблон по умолчанию:
<link rel="amphtml" href="https://test.ru/test.html?amp">
<link rel="canonical" href="https://test.ru/test.html" />
Или к ссылке дописываем запрос ?amp=14 (14 - id шаблон), для нескольких AMP шаблонов:
<link rel="amphtml" href="https://test.ru/test.html?amp=14">
<link rel="canonical" href="https://test.ru/test.html" />
4) В файле robots.txt разрешаем индексацию AMP-страниц:
Allow: *?amp