Настройка 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="ru">
<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 → «Ускоренные мобильные страницы».