Налаштування AMP-сторінок для 1С-Бітрікс
AMP (Accelerated Mobile Pages) — це HTML-підмножина Google з жорсткими обмеженнями: ніяких кастомних JavaScript, тільки дозволені компоненти, CSS не більше 75KB inline. Для Бітрікса це означає, що не можна використовувати ні jQuery, ні BX.ajax, ні стандартні JS-компоненти. AMP-сторінка — це окремий шаблон, який живе паралельно з звичайним сайтом.
Потрібен ли AMP у 2024 році
Google видалив AMP-блискавку з пошукової видачі у 2021 році. Перевага AMP зараз — це кеш Google (google.com/amp/s/...) й швидкість розповсюджування з CDN Google. Для новинних сайтів і блогів на Бітриксі AMP все ще дає приріст у Core Web Vitals. Для інтернет-магазинів — спірно: AMP не підтримує повноцінний кошик і checkout, тільки інформаційні сторінки.
Структура AMP-шаблону у Бітриксі
AMP-сторінка відаються за тим самим URL із параметром ?amp=1 або на окремому поддомені. Перший варіант простіший — один шаблон сайту, перемикання в пролозі:
// /bitrix/templates/ШАБЛОН/header.php
if (!empty($_GET['amp'])) {
define('IS_AMP', true);
// Підключити AMP-шаблон
include __DIR__ . '/amp_header.php';
return;
}
AMP вимагає специфічного <html ⚡> або <html amp> й набору обов'язкових тегів:
<!doctype html>
<html ⚡ lang="uk">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="<?= $canonicalUrl ?>">
<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}...</style>
<noscript><style amp-boilerplate>body{-webkit-animation:none}</style></noscript>
<style amp-custom>
/* Весь CSS сторінки — не більше 75KB */
</style>
</head>
Зображення й медіа через amp-img
В AMP не можна використовувати тег <img> — тільки <amp-img>. Обов'язкові атрибути width і height. У шаблоні catalog.element для AMP:
$img = \CFile::GetFileArray($arResult['DETAIL_PICTURE']);
$w = $img['WIDTH'] ?: 800;
$h = $img['HEIGHT'] ?: 800;
?>
<amp-img src="<?= absoluteImageUrl($img['SRC']) ?>"
width="<?= $w ?>" height="<?= $h ?>"
alt="<?= htmlspecialcharsEx($arResult['NAME']) ?>"
layout="responsive">
</amp-img>
Для галереї використовується amp-carousel:
<script async custom-element="amp-carousel"
src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<amp-carousel width="400" height="400" layout="responsive" type="slides">
<?php foreach ($slides as $slide): ?>
<amp-img src="<?= $slide['src'] ?>" width="400" height="400" layout="responsive"
alt="<?= $slide['alt'] ?>"></amp-img>
<?php endforeach; ?>
</amp-carousel>
Форми в AMP
Стандартні бітриксові форми (JS-відправка, AJAX) в AMP не працюють. Для форми зворотного звонка або підписки потрібен amp-form:
<script async custom-element="amp-form"
src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<form method="POST" action="/local/ajax/amp-subscribe.php"
action-xhr="/local/ajax/amp-subscribe.php">
<input type="email" name="email" placeholder="Email" required>
<button type="submit">Підписатися</button>
<div submit-success><template type="amp-mustache">Дякую!</template></div>
<div submit-error>Помилка, спробуйте ще раз</div>
</form>
Обробник /local/ajax/amp-subscribe.php повинен повертати JSON з потрібними полями й встановлювати CORS-заголовки для домена ampproject.org.
Зв'язок канонічної та AMP-сторінки
На звичайній сторінці вказується посилання на AMP:
<link rel="amphtml" href="https://example.com/catalog/product/?amp=1">
На AMP-сторінці — на канонічну:
<link rel="canonical" href="https://example.com/catalog/product/">
Без цієї пари Google не буде використовувати AMP-сторінку як прискорену версію. Перевірка через Google Search Console → «Прискорені мобільні сторінки».