Формат AMP создан для отображения «лёгких» страниц. Поисковые системы отдают предпочтение AMP-версиям страниц, если пользователь использует мобильное устройство. Нет смысла объяснять, какую роль это играет в SEO (важную).
И сейчас я пошагово объясню, как сделать AMP-версию любой страницы сайта.
0 Сниппет
Сначала нужно создать сниппет. Он будет собирать нужную информацию о ресурсе и заносить её в плейсхолдеры. Я назвал сниппет GoogleAmp. Свежую версию (хотя на момент написания этой статьи последний коммит датируется 2016 годом) можно скачать здесь: https://github.com/dubrod/Google-Amp-for-MODX
<?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:
$input = str_replace('<link ', '<link ', $input);
$input = str_replace(' />', ' />', $input);
return $input;1 Шаблон
Новый шаблон можно назвать как угодно, я назвал AMP.
[[!GoogleAmp]]<!doctype html>
<html amp lang="en">
[[$AMPHead]]
<body>
<h1>[[+amp.pagetitle]]</h1>
<article>
[[+amp.content:ampCodeEntities]]
</article>
</body>
</html>2 Чанк
Чанк я назвал 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-страниц одна. Этой странице будет передаваться GET-параметр, содержащий псевдоним (alias) страницы, например:
https://quasi-art.ru/amp?page=modx-and-amp4 Шаблон оригинальной версии
В шаблоны оригинальных версий страниц нужно добавить мета-тег, указывающий на адрес AMP-версии текущей страницы:
<link rel="amphtml" href="https://quasi-art.ru/amp?page=modx-and-amp" />Как проверить AMP-страницу
Для валидации AMP-страниц есть сервис: https://search.google.com/test/amp.