- Базовые мета теги для head
- Дополнительные рекомендуемые теги для head
- Вывод при помощи стандартного шаблонизатора
- Вывод при помощи шаблонизатора fenom
- Open Graph в MODX
- Разметка для Twitter
- Подтягивание картинки при постинге в vk
- Заголовки
- Last Modified
- Цикличные ссылки
- Страницы ошибок
- Favicon иконки под браузеры и поисковики
- Дополнительно
- Dublin Core metadata
- robots.txt
- sitemap.xml
- .htaccess
- Микроразметка Shema.org
- Оптимизация скорости загрузки MODX под Google PageSpeed Insights
- Оптимизация изображений
- Оптимизация CSS и JS
- Прочее
- Прочие SEO полезности
В данном уроке постараюсь раскрыть все нюансы технической SEO оптимизации MODX Revolution, с готовыми примерами, копируйте, внедряйте, радуйтесь позициям.
Первые 3 пункта: мета теги, Open Graph, Twitter Card + sitemap.xml можно закрыть при помощи SEO дополнения Seo Suite.
Базовые мета теги для head
- title — Заголовок страницы для ПС;
- meta description — описание страницы для ПС;
Дополнительные рекомендуемые теги для head
- rel=»canonical» — помогает избавится от дублей страниц. Кто пользуется PdoPage нужно добавить в его вызов параметр ‘setMeta’ => 0;
- meta robots — разрешение индексирования страницы или запрет;
- meta author — автор контента.
- language — язык контента.
Тегов на самом деле намного больше, но все остальное прямо сказать второстепенно для SEO, а некоторые просто хлам.
Вывод при помощи стандартного шаблонизатора
<link rel="canonical" href="[[~[[*id]] &scheme=`full`]]" />
<meta name="robots" content="[[*searchable:is=`1`:then=`index, follow`:else=`noindex, nofollow`]]">
<title>[[*longtitle:default=`[[*pagetitle]]`]]</title>
<meta name="description" content="[[*description]]">
<meta name="author" content="[[!+modx.user.id:userinfo=`fullname`]]"/>
<meta name="language" content="Russian">
Пояснения по коду.
- title — выводит значение из поля заголовок, если не заполнен расширенный заголовок — если он заполнен, то он и выводится. Рекомендация не используйте h1 в качестве title.
- meta robots — управляется чекбоксом «Доступен для поиска», если его снять, то подставится noindex, nofollow
- meta author — можно и вручную прописать, если автор один. Если несколько, то данные тянутся из профиля.
Вывод при помощи шаблонизатора fenom
<link rel="canonical" href="{$_modx->makeUrl($_modx->resource.id, '', '', 'full')}" />
{if $_modx->resource.searchable}<meta name="robots" content="index, follow">
{else}<meta name="robots" content="noindex, nofollow">{/if}
<title>{$_modx->resource.longtitle ?: $_modx->resource.pagetitle}</title>
<meta name="description" content="{$_modx->resource.description}">
<meta name="author" content="{$_modx->user.fullname}">
<meta name="language" content="Russian">
Open Graph в MODX
<meta property="og:url" content="[[~[[*id]] &scheme=`full`]]">
<meta property="og:type" content="[[*ogtype]]">
<meta property="og:title" content="[[*longtitle:default=`[[*pagetitle]]`]]">
<meta property="og:image" content="[[++site_url]][[*img]]">
<meta property="og:description" content="[[*description]]">
<meta property="og:site_name" content="[[++site_name]]">
<meta property="og:locale" content="ru_RU">
Здесь у нас используется 2 дополнительных поля, которые нужно создать:
[[*ogtype]] — тип страницы, имеет следующие значения:
имя ogtype, тип ввода — одиночный выбор, возможные значения: website||article||business.business||place||product.group||product.item||profile||video.episode||video.movie||video.other||video.tv_showbook||books.author||books.book||books.genre||fitness.course||game.achievement||music.album||music.playlist||music.radio_station||music.song||restaurant.menu||restaurant.menu_item||restaurant.menu_section||restaurant.restaurant
значение по умолчанию website — если обычный сайт визитка, article — если блог, product.item — если интернет магазин.
[[*img]] — изображение для постинга, имеет следующие значения:
имя — img, Описание — изображение для постинга, тип ввода — изображение. Значение по умолчанию: путь до какой-нибудь обще тематической картинки (чтобы не было ошибок валидации в коде).
Также нужно добавить к тегу html префикс:
<html lang="ru" prefix="og: http://ogp.me/ns#">
Код на fenom
<meta property="og:url" content="{$_modx->makeUrl($_modx->resource.id, '', '', 'full')}">
<meta property="og:type" content="{$_modx->resource.ogtype}">
<meta property="og:title" content="{$_modx->resource.longtitle ?: $_modx->resource.pagetitle} | {$_modx->config.site_name}">
<meta property="og:image" content="{$_modx->config.site_url}{$_modx->resource.img}">
<meta property="og:description" content="{$_modx->resource.description}">
<meta property="og:site_name" content="{$_modx->config.site_name}">
<meta property="og:locale" content="ru_RU">
Разметка для Twitter
Не пользуетесь твиттер — она вам не нужна!
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@alex87_ru">
<meta name="twitter:creator" content="@alex87_ru">
<meta name="twitter:url" content="[[~[[*id]] &scheme=`full`]]">
<meta name="twitter:title" content="[[*longtitle:default=`[[*pagetitle]]`]]">
<meta name="twitter:description" content="[[*description]]">
<meta name="twitter:image" content="[[++site_url]][[*img]]">
Пояснение: в site и creator указываем ваш ник в твиттер.
Код на fenom.
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@alex87_ru">
<meta name="twitter:creator" content="@alex87_ru">
<meta name="twitter:url" content="{$_modx->makeUrl($_modx->resource.id, '', '', 'full')}">
<meta name="twitter:title" content="{$_modx->resource.longtitle ?: $_modx->resource.pagetitle} | {$_modx->config.site_name}">
<meta name="twitter:description" content="{$_modx->resource.description}">
<meta name="twitter:image" content="{$_modx->config.site_url}{$_modx->resource.img}">
Подтягивание картинки при постинге в vk
<meta property="vk:image" content="[[++site_url]][[*img]]" />
или
<meta property="vk:image" content="{$_modx->config.site_url}{$_modx->resource.img}" />
Заголовки
На странице должен быть один H1 — одна страница один H1 (обязательно). Есть еще и иные заголовки. Так вот, H2, H3 и H4 имеет место быть только в тексте (наше поле content) и на важных фразах. Нельзя оформлять заголовками служебные фразы, используемые как элементы шаблона или навигации. А в нашем шаблоне они есть, в шапке и footer.
Их рекомендуется сделать обычными элементами текста (особенно 2,3,4 уровней). Например так:
было <h4 class=»widget-title»>Useful Links</h4>
стало <div class=»h4 widget-title»>Useful Links</div > или <p class=»h4 widget-title»>Useful Links</p>
Возможно придется влезть в css.
Last Modified
Вывод информации о том, когда был изменен документ важен. Простое решение уже есть, пакет — modlastmodified.
Цикличные ссылки
Попадая на сайт, большинство пользователей знают, что, кликнув на логотип, они смогут перейти на начальную страницу сайта. Так как кликабельный логотип уже давно стал стандартом. Но единственная ошибка – это то, что на главной странице логотип также кликабелен, то есть мы получаем цикличную ссылку, страница ссылается сама на себя. Лечение просто:
{if $_modx->resource.id != 1}
<a href="{$_modx->makeUrl(1)}" title="Перейти на главную страницу" >
<img src="images/logo.png" alt="{$_modx->config.site_name}, перейти на главную"></a>
{else}
<img src="images/logo.png" alt="{$_modx->config.site_name}, перейти на главную">
{/if}
Или так:
[[*id:is=`1`:then=`
<img src="images/logo.png" alt="[[++site_name]], перейти на главную">
`:else=`
<a href="[[~1]]" title="Перейти на главную страницу">
<img src="images/logo.png" alt="[[++site_name]], перейти на главную">
</a>
`]]
Страницы ошибок
При попадании на такую страницу, важно не потерять пользователя. Дать понятное описание произошедшей ошибке и предоставить возможность перейти в популярный раздел или вернуться на главную страницу. 404-я и 403-я должны быть. Должны быть четкими, лаконичными и без лишней «мути» в виде хлебных крошек, больших картинок сверху, когда не виден текст ошибки и ссылки на уход с нее.
Favicon иконки под браузеры и поисковики
Я в последнее время генерю их при помощи сервиса: realfavicongenerator.
Дополнительно
<base href="[[++site_url]]" />
— базовый урл (Url), тег нужен, чтобы modx нормально подгружал пути к файлам.
<base href="{$_modx->config.site_url}" />
<meta charset="[[++modx_charset]]" />
— выводит кодировку из системных настроек — можно указать вручную.
<meta charset="{$_modx->config.modx_charset}" />

На изображении представлены стандартные поля и их вывод при помощи парсера modx, а вот так они вызываются на fenom: {$_modx->resource.pagetitle}
Dublin Core metadata
Очень сильно сомневаюсь что от нее вообще есть толк, но на всякий случай (для информации) вынес все в отдельный PDF файл.
Сохраняем шаблон, переходим на главную и смотрим код (CTRL+U)
Сопутствующие ссылки для ознакомления что к чему:
- developers.facebook.com/docs/sharing/webmasters#markup
- ogp.me/
- https://github.com/Konfuze/HEAD
- dev.twitter.com/cards/getting-started
- dev.twitter.com/docs/cards/validation/validator
Также посмотрите на модификаторы, на них можно много логики создать, например сделать вывод такого типа.
<meta name="description" content="[[*description:notempty=`[[*description]]`:default=`[[*content:ellipsis=`200`:notags]]`]]">
К примеру такой вывод можно использовать на портале где множество страниц и где не когда не заполняли описания, тогда просто будет браться первые 200 символов контента из редактора.
robots.txt
О нем мы говорили в прошлом уроке: MODX robots.txt.
sitemap.xml
О ней мы говорили в соответствующем уроке: MODX sitemap.xml.
.htaccess
В файле .htaccess обычно производится склейка домена с www с без www (или на оборот), склейка дубля главной страницы, 301 редирект с http на https.
Микроразметка Shema.org
Shema.org помогает роботам лучше понимать код и часто получаются расширенные сниппеты в ПС. В статьях уже много готовых решений с данной разметкой:
В дальнейшем еще добавлю готовых решений.
Оптимизация скорости загрузки MODX под Google PageSpeed Insights
Оптимизация изображений
Изображения больше всего отнимают скорость загрузки, поэтому лучше всего начать с них.
Google рекомендует следующее:
- Настроить подходящий размер изображений — т.е. если к примеру у вас область контента занимает 800px (ширена), а вы помещаете в нее изображение 1980px — то это не хорошо, т.к. оно как минимум весит намного больше.
- Для изображений явным образом должны быть заданы атрибуты
width
иheight
. - Настройте эффективную кодировку изображений — он рекомендует использовать для изображений формат WEBP — который до сих пор не все браузеры переваривают.
- Отложите загрузку скрытых изображений.
Закрыть данные 4 пункта можно при помощи pthumb, например так:
<picture>
<source type="image/webp" srcset="{$img | pthumb: 'w=354&h=156&zc=1&far=C&f=webp'}">
<source type="image/png" srcset="{$img | pthumb: 'w=354&h=156&zc=1&far=C&f=png'}">
<img loading="lazy" class="img-fluid" src="{$img | pthumb: 'w=354&h=156&zc=1&far=C&f=jpg'}" alt="{$pagetitle}" width="354" height="156">
</picture>
Это пример на Fenom для вывода изображений через PdoResources. Его не сложно адаптировать под все остальное. Смотрите также: Дружим WebP и MODX.
Оптимизация CSS и JS
Склеиваем CSS и JS файлы, после чего создаем файл nocrit.css — помещаем в него весь склеенный при помощи MinifyX css код и убираем из вызова MinifyX все что отвечает за склейку CSS.
Подключаем наш nocrit.css в футере сайта, вот такой конструкцией:
<link rel="preload" href="template/css/nocrit.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="template/css/nocrit.css"></noscript>
После чего с помощью jonassebastianohlsson.com/criticalpathcssgenerator/ генерируем critical CSS и добавляем в head в виде inline.
Прочее
По всем остальным пунктам советую почитать пару готовых статей на других ресурсах:
Статья чисто под GOOGLE PAGESPEED INSIGHTS и еще одна.
Прочие SEO полезности
Ниже приведу перечень общих статей, которые помогут вам занять ТОП:
Семанка: что такое, как и чем собирать;
Пока все, со временем расширю статью.
Добрый день не подскажите а что может быть если использую ваш код вида
а в результате на главное все время получаю
причем если подвести мышь к /, то высвечивается нормальное название домена, уже сломал всю голову как решить, если страница вложенная, на ней все нормально, так только на главной, за ранее спасибо
Ничего не понятно (код съел редактор)
Автор, спасибо за статью!
Когда ожидать материал посвященной внедрению Schema org для сайта на Modx?
Смотрите статьи, много где есть примеры внедрения Schema org