Configuring AMP Pages for 1C-Bitrix
AMP (Accelerated Mobile Pages) is a Google HTML subset with strict limitations: no custom JavaScript, only allowed components, CSS no more than 75KB inline. For Bitrix, this means you cannot use jQuery, BX.ajax, or standard JS components. AMP page is a separate template that lives alongside the regular site.
Is AMP Needed in 2024
Google removed AMP lightning from search results in 2021. The benefit of AMP now is Google cache (google.com/amp/s/...) and speed from Google CDN. For news and blog sites on Bitrix, AMP still provides Core Web Vitals improvement. For online stores — questionable: AMP doesn't support full cart and checkout, only informational pages.
AMP Template Structure in Bitrix
AMP page is served on the same URL with parameter ?amp=1 or on a separate subdomain. First option is simpler — one site template, switch in prolog:
// /bitrix/templates/TEMPLATE/header.php
if (!empty($_GET['amp'])) {
define('IS_AMP', true);
// Include AMP template
include __DIR__ . '/amp_header.php';
return;
}
AMP requires specific <html ⚡> or <html amp> and set of mandatory tags:
<!doctype html>
<html ⚡ lang="en">
<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>
/* All page CSS — no more than 75KB */
</style>
</head>
Images and Media via amp-img
In AMP, you cannot use <img> tag — only <amp-img>. Required attributes are width and height. In the catalog.element template for 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>
For gallery use 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>
Forms in AMP
Standard Bitrix forms (JS submission, AJAX) don't work in AMP. For callback form or subscription, use 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">Subscribe</button>
<div submit-success><template type="amp-mustache">Thank you!</template></div>
<div submit-error>Error, please try again</div>
</form>
Handler /local/ajax/amp-subscribe.php must return JSON with required fields and set CORS headers for ampproject.org domain.
Canonical and AMP Page Link
On the regular page, link to AMP:
<link rel="amphtml" href="https://example.com/catalog/product/?amp=1">
On AMP page — to canonical:
<link rel="canonical" href="https://example.com/catalog/product/">
Without this pair, Google won't use the AMP page as an accelerated version. Check via Google Search Console → "Accelerated Mobile Pages."