В современном мире мобильный трафик занимает значительную долю посещений сайтов. Для улучшения скорости и удобства просмотра на мобильных устройствах Google предлагает технологию AMP (Accelerated Mobile Pages). В этой статье подробно разберём, как добавить поддержку AMP в тему GeneratePress, сохранив её уникальный дизайн и функционал, а также рассмотрим практические примеры и решения возможных проблем.
Что такое AMP и зачем нужна поддержка AMP в GeneratePress
AMP — это фреймворк с открытым исходным кодом, который оптимизирует страницы под мобильные устройства, сокращая время загрузки за счёт упрощения кода и использования кэширования Google.
Для сайтов на WordPress с темой GeneratePress это особенно актуально, так как тема ориентирована на скорость и лёгкость. Добавление AMP позволяет улучшить показатели Core Web Vitals и повысить позиции в поисковой выдаче.
Однако AMP накладывает ограничения на использование JavaScript и CSS, что требует адаптации темы и плагинов.
Выбор плагина AMP для WordPress и интеграция с GeneratePress
Для добавления поддержки AMP в WordPress существует несколько популярных плагинов:
- AMP (официальный от Automattic) — гибкий плагин с возможностью выбора шаблонов и поддержки различных типов AMP.
- Glue for Yoast SEO & AMP — интеграция AMP с SEO-плагином Yoast.
- AMP for WP — расширенный плагин с дополнительными настройками и поддержкой кастомизации.
Для GeneratePress рекомендуем использовать официальный плагин AMP, так как он хорошо совместим и позволяет гибко настраивать шаблоны.
Установка и базовая настройка плагина AMP
Установите и активируйте плагин через админку WordPress. Затем перейдите в Настройки > AMP. В разделе Тип шаблона выберите Стандард — этот режим позволяет загружать одну и ту же страницу как AMP, так и классическую, без дублирования URL.
Важно: режим «Стандард» требует корректной поддержки темы, чтобы не возникло конфликтов.
Адаптация GeneratePress под AMP: что нужно изменить
GeneratePress использует кастомные скрипты и стили, которые не всегда совместимы с AMP. Для корректной работы нужно отключить или адаптировать некоторые элементы.
- Отключение невалидных скриптов: AMP запрещает сторонний JavaScript, кроме встроенного и библиотек AMP.
- Оптимизация CSS: AMP ограничивает размер CSS до 50 КБ, поэтому нужно минимизировать стили.
- Использование AMP-компонентов: например, для изображений —
<amp-img>, для видео —<amp-video>.
Пример кода для отключения невалидных скриптов в GeneratePress
function generatepress_ru_amp_remove_scripts() {
if ( function_exists('is_amp_endpoint') && is_amp_endpoint() ) {
// Отключаем загрузку скриптов GeneratePress, не совместимых с AMP
wp_dequeue_script('generatepress-navigation');
wp_dequeue_script('generatepress-skip-link-focus-fix');
// Добавьте другие скрипты по необходимости
}
}
add_action('wp_enqueue_scripts', 'generatepress_ru_amp_remove_scripts', 20);Минимизация CSS GeneratePress для AMP
Можно использовать фильтр плагина AMP для замены стандартных стилей на кастомные минимальные. Например:
function generatepress_ru_amp_custom_css( $css ) {
if ( function_exists('is_amp_endpoint') && is_amp_endpoint() ) {
// Минимальный CSS для AMP
$css = 'body { font-family: Arial, sans-serif; margin: 0; padding: 0; }'
. 'a { color: #0073aa; text-decoration: none; }'
. 'header, footer { padding: 10px; background: #f5f5f5; }';
}
return $css;
}
add_filter('amp_post_template_css', 'generatepress_ru_amp_custom_css');Как использовать AMP-компоненты для изображений и видео в GeneratePress
Вместо стандартного тега <img> для AMP нужно использовать <amp-img>. Аналогично для видео — <amp-video>.
Если вы выводите изображения через PHP, замените их так:
function generatepress_ru_amp_replace_img_tag( $content ) {
if ( function_exists('is_amp_endpoint') && is_amp_endpoint() ) {
$content = preg_replace('#<img([^>]+)>#i', '<amp-img$1 layout="responsive"></amp-img>', $content);
}
return $content;
}
add_filter('the_content', 'generatepress_ru_amp_replace_img_tag');Это автоматически заменит все теги <img> на валидные для AMP версии.
Устранение распространённых ошибок AMP с GeneratePress
При тестировании через AMP Test Tool часто встречаются ошибки:
- Использование запрещённых JavaScript.
- Большой размер CSS.
- Неверные теги для изображений и видео.
Решение — отключать конфликтующие скрипты, минимизировать стили и заменять теги, как описано выше.
Если на сайте используются популярные плагины, например, Clearfy Pro, можно дополнительно отключить лишний функционал и скрипты через его настройки, чтобы улучшить совместимость с AMP.
Поддержка AMP и SEO на сайте с GeneratePress
Для улучшения SEO важно:
- Добавить в мета-теги ссылки на AMP-страницы, чтобы Google правильно индексировал мобильные версии.
- Интегрировать AMP с SEO-плагинами, например, Yoast SEO.
Для этого можно использовать плагин WPGPT, который помогает автоматически добавлять нужные метаданные и оптимизировать контент для поисковиков.
Добавление ссылки на AMP в <head>
function generatepress_ru_amp_add_amphtml_link() {
if ( function_exists('is_amp_endpoint') && !is_amp_endpoint() ) {
$amp_url = function_exists('amp_get_canonical_url') ? amp_get_canonical_url() : '';
if ( $amp_url ) {
echo '<link rel="amphtml" href="' . esc_url( $amp_url ) . '" />';
}
}
}
add_action('wp_head', 'generatepress_ru_amp_add_amphtml_link');Тестирование и отладка AMP на сайте GeneratePress
После внедрения AMP обязательно проверьте валидность страниц через:
- Google AMP Test
- Консоль Google Search Console — раздел AMP.
Исправляйте ошибки и следите за обновлениями темы и плагинов, чтобы сохранить совместимость.
Выводы и рекомендации по добавлению AMP в GeneratePress
Поддержка AMP значительно улучшит скорость загрузки мобильной версии сайта на GeneratePress, что положительно скажется на поведенческих факторах и SEO. Однако внедрение требует технической доработки темы и плагинов, а также тщательного тестирования.
Используйте официальный плагин AMP, адаптируйте скрипты и стили темы с помощью представленных кодов, заменяйте теги изображений и видео на AMP-совместимые. Для расширенной оптимизации можно применять плагины из экосистемы WPSHOP.