Формат AMP создан компанией Google для отображения лёгких версий страниц сайта. Такие страницы оптимизированы для более быстрой загрузки страницы, особенно при медленном интернете. Такой формат подходит для новостных и контентных сайтов, предоставляющих в основном содержимое для чтения.
Google при определённых условиях будет ранжировать AMP-версии страниц выше, поэтому внедрение AMP хорошо скажется на SEO сайта.
В этой статье я расскажу, как сделать AMP-версию любой страницы сайта в MODX Revolution, хотя подход можно применить и для других CMS.
0 Сниппет
Нужно создать сниппет, который собирает информацию о странице и кладёт её в плейсхолдеры (заголовок, содержимое и так далее). Я назвал сниппет GoogleAmp.
<?php
$site_url = MODX_SITE_URL;
$base_url = MODX_BASE_PATH;
$get = modX::sanitize($_GET, $modx->sanitizePatterns);
$alias = urldecode($get['page']);
$resource = $modx->getObject('modResource', [
'alias'=>$alias,
'class_key'=>'modDocument'
]);
$prefix = 'amp.';
if ($resource) {
$placeholders = [
'pagetitle' => $resource->get('pagetitle'),
'content' => $resource->get('content'),
'canonical' => $modx->makeUrl($resource->get('id'), '', '', 'full'),
'published' => $resource->get('publishedon'),
'edited' => $resource->get('editedon'),
];
$tvName = 'image';
$tvValue = $resource->getTVValue($tvName);
if (!empty($tvValue)) {
$image_url = $site_url.$tvValue;
$image_base = $base_url.$tvValue;
list($width, $height) = getimagesize($image_base);
$placeholders[$tvName] = $tvValue;
$placeholders[$tvName.'_width'] = $width;
$placeholders[$tvName.'_height'] = $height;
}
$modx->setPlaceholders($placeholders, $prefix);
}Дополнительно я создал небольшой сниппет ampCodeEntities:
<?php
$input = str_replace('<link ', '<link ', $input);
$input = str_replace(' />', ' />', $input);
return $input;1 Шаблон
Далее создаём новый шаблон, можно назвать как угодно, я назвал AMP. Он нужен для отображения ресурса в формате AMP.
[[!GoogleAmp]]<!doctype html>
<html amp lang="en">
[[$AMPHead]]
<body>
<h1>[[+amp.pagetitle]]</h1>
<article>
[[+amp.content:ampCodeEntities]]
</article>
</body>
</html>2 Чанк
Раздел head с различными meta-тегами и прочим для AMP-страницы отличается от традиционного, его тоже необходимо создать. Чанк я назвал AMPHead.
<head>
<meta charset="utf-8" />
<title>[[+amp.pagetitle:htmlentities]]</title>
<meta itemprop="name" content="[[+amp.pagetitle:htmlentities]]" />
<meta itemprop="description" content="[[+amp.description:htmlentities]]" />
<meta itemprop="image" content="[[!++site_url]][[+amp.image:default=`assets/templates/main/images/touch-icon-ipad-retina.png`]]" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="theme-color" content="#233539" />
<meta name="application-name" content="quasi-art.ru" />
<link rel="canonical" href="[[+amp.canonical]]" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "[[+amp.pagetitle]]",
"datePublished": "[[+amp.published]]",
"dateModified": "[[+amp.edited]]",
"author": "[[++site_name]]",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "[[++site_url]]"
},
"publisher": {
"@type": "Organization",
"name": "quasi-art.ru",
"logo": {
"@type": "ImageObject",
"width": "152",
"height": "152",
"url":"[[!++site_url]]assets/templates/main/images/touch-icon-ipad-retina.png"
}
},
"image": {
"@type": "ImageObject",
"width": "[[+amp.image_width:default=`152`]]",
"height": "[[+amp.image_height:default=`152`]]",
"url":"[[!++site_url]][[+amp.image:default=`assets/templates/main/images/touch-icon-ipad-retina.png`]]"
}
}
</script>3 Ресурс
Далее нужно создать универсальный ресурс, который будет служить входной точкой для всех AMP-страниц. Можно назвать его как угодно, главное — указать у него шаблон AMP.
Это входная точка у всех AMP-страниц. Этой странице будет передаваться GET-параметр, содержащий псевдоним (alias) страницы, например:
https://quasi-art.ru/amp?page=modx-and-ampНапример, AMP-версия этой статьи: https://quasi-art.ru/amp?page=modx-and-amp
4 Шаблон оригинальной версии
В шаблоны оригинальных версий страниц (у меня он называется Article) нужно добавить мета-тег, указывающий на адрес AMP-версию текущей страницы:
<link rel="amphtml" href="[[~350? &scheme=`[[++server_protocol]]` &page=`[[*alias]]`]]" />, где 350 — это id ресурса AMP, созданного в третьем пункте.
В итоге это должно выглядеть примерно так:
<link rel="amphtml" href="https://quasi-art.ru/amp?page=modx-and-amp" />Как проверить AMP-страницу
Для валидации AMP-страниц есть сервис: https://search.google.com/test/amp.