AMP (Accelerated Mobile Pages) — это технология, позволяющая создавать облегчённые версии страниц сайта для быстрой загрузки на мобильных устройствах. Внедрение AMP в WordPress помогает улучшить скорость загрузки, повысить удобство пользователей и улучшить SEO-показатели сайта.
Почему важно добавить поддержку AMP в WordPress
С каждым годом доля мобильного трафика растёт, и поисковые системы, в частности Google, всё больше ориентируются на мобильную версию сайта при ранжировании. AMP позволяет:
- Уменьшить время загрузки страниц до долей секунды;
- Снизить отказ от просмотра страниц из-за долгой загрузки;
- Улучшить позиции в поисковой выдаче, так как Google отдаёт предпочтение быстрым сайтам;
- Повысить удобство пользователей на мобильных устройствах.
Добавить AMP можно разными способами — от использования готовых плагинов до написания собственного кода для тонкой настройки.
Лучшие плагины для поддержки AMP в WordPress
Для большинства сайтов достаточно установить и настроить один из проверенных плагинов:
1. AMP от официальной команды WordPress
Плагин AMP — официальный проект, который позволяет быстро включить поддержку AMP. Он автоматизирует преобразование страниц в AMP-формат. В настройках можно выбрать режим работы: стандартный (AMP-страницы заменяют обычные), транзиентный (параллельные AMP-страницы) или читательский.
Преимущества:
- Полная поддержка стандартов AMP;
- Гибкий выбор режима;
- Поддержка кастомных типов записей и шаблонов;
- Возможность кастомизации через хуки и фильтры.
2. WP AMP — премиум плагин для WooCommerce и блогов
Если у вас магазин на WooCommerce или сложный блог, WP AMP (https://wpshop.ru/plugins/wp-amp/?utm_source=wpdesk.ru&utm_medium=article&utm_campaign=kak-dobavit-podderzhku-amp-v-wordpress-s-pomoshhyu-plaginov-i-koda) предлагает расширенные возможности кастомизации, поддержку AMP для страниц товаров, категорий и отзывов. Плагин также совместим с популярными конструкторами страниц.
3. AMP for WP — расширенные функции и SEO-настройки
Этот плагин добавляет поддержку AMP с SEO-оптимизацией, интеграцией с Google Analytics, рекламными блоками и социальными кнопками. Полезен для сайтов с большим трафиком и сложной структурой.
Как настроить AMP вручную с помощью кода
Иногда готовых плагинов недостаточно — требуется тонкая настройка или интеграция с кастомными шаблонами. Рассмотрим пример базовой реализации поддержки AMP на уровне темы и функций.
Шаг 1. Подключение AMP-версии через фильтр
В файл functions.php вашей темы можно добавить функцию, которая будет определять AMP-страницу и подгружать соответствующий шаблон:
function wpdesk_is_amp() {
return isset($_GET['amp']) || (function_exists('is_amp_endpoint') && is_amp_endpoint());
}
add_filter('template_include', 'wpdesk_amp_template_include');
function wpdesk_amp_template_include($template) {
if (wpdesk_is_amp()) {
$amp_template = locate_template('template-amp.php');
if ($amp_template) {
return $amp_template;
}
}
return $template;
}
Этот код проверяет, есть ли параметр ?amp в URL или функция AMP активна, и подгружает шаблон template-amp.php с AMP-разметкой.
Шаг 2. Создание AMP-шаблона
Создайте файл template-amp.php в папке темы и добавьте минимальную AMP-разметку:
<!doctype html>
<html amp lang="ru">
<head>
<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>
<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>
<title><?php wp_title(); ?></title>
</head>
<body>
<?php
if (have_posts()) :
while (have_posts()) : the_post();
?>
<h1><?php the_title(); ?></h1>
<div><?php the_content(); ?></div>
<?php
endwhile;
endif;
?>
</body>
</html>
Такой шаблон соответствует требованиям AMP и отображает заголовок и контент поста.
Шаг 3. Добавление поддержки AMP для изображений и видео
В AMP запрещены стандартные теги <img> и <video>, вместо них нужно использовать <amp-img> и <amp-video>. Чтобы преобразовать вывод контента, можно использовать фильтр the_content:
function wpdesk_amp_replace_media_tags($content) {
if (!wpdesk_is_amp()) {
return $content;
}
// Заменяем img на amp-img
$content = preg_replace('/<img(.*?)src="(.*?)"(.*?)>/i', '<amp-img$1src="$2" layout="responsive" width="600" height="400"></amp-img>', $content);
// Аналогично можно заменить видео, если нужно
return $content;
}
add_filter('the_content', 'wpdesk_amp_replace_media_tags');
В этом примере мы заменяем теги img на валидные amp-img с обязательными атрибутами layout, width и height. Для более точной работы нужно дополнить регулярные выражения и учитывать все случаи.
Советы по совместимости и тестированию AMP
После настройки важно проверить валидность AMP-страниц:
- Используйте официальный AMP тест от Google для проверки страниц;
- Проверяйте консоль браузера на ошибки AMP;
- Тестируйте на разных устройствах и браузерах;
- Следите за совместимостью с плагинами и темами — некоторые элементы могут конфликтовать с AMP.
Интеграция AMP с плагинами WPShop
Если вы используете продукты WPShop, например, WP AMP, настройка ускоренных мобильных страниц становится ещё проще. Плагин предлагает готовые шаблоны и поддержку WooCommerce, что позволяет:
- Автоматически создавать AMP-версии страниц товаров;
- Сохранять оформление и стили;
- Добавлять на AMP-страницы отзывы, рейтинги и кнопки покупки;
- Настраивать SEO-оптимизацию и аналитику.
Это отличный вариант для тех, кто хочет быстро внедрить AMP без глубокого погружения в код.
Итог
Поддержка AMP в WordPress — это важный шаг для улучшения скорости и удобства мобильных пользователей. Используйте готовые плагины для быстрого старта, а при необходимости дополняйте функционал кастомными решениями с помощью кода. Тестируйте и следите за актуальностью AMP-страниц, чтобы сохранить высокий рейтинг сайта.