Создание сайтов

MODX и AMP

    2. →
  2. Библиотека
    3. →
  3. Блог
amp development modx доступность extras

Формат 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 ', '&lt;link ', $input);
$input = str_replace(' />', ' /&gt;', $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-amp

4 Шаблон оригинальной версии

В шаблоны оригинальных версий страниц нужно добавить мета-тег, указывающий на адрес AMP-версии текущей страницы:

<link rel="amphtml" href="https://quasi-art.ru/amp?page=modx-and-amp" />

Комментарии