MODX SEO оптимизация

SEO оптимизация MODX MODX Revo

В данном уроке постараюсь раскрыть все нюансы технической 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- можно и вручную прописать, если автор один. Если несколько, то данные тянутся из профиля.

canonical можно выводить и при помощи сниппета.

Вывод при помощи шаблонизатора 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.

Заголовки в шапке

Заголовки в 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, а раньше генерил при помощи самодельного сниппета FaviconGenerator.

Дополнительно

<base href="[[++site_url]]" /> — базовый урл (Url), тег нужен, чтобы modx нормально подгружал пути к файлам.

<base href="{$_modx->config.site_url}" />

<meta charset="[[++modx_charset]]" /> — выводит кодировку из системных настроек — можно указать вручную.

<meta charset="{$_modx->config.modx_charset}" />
Синтаксис modx
Стандартные поля в MODX

На изображении представлены стандартные поля и их вывод при помощи парсера modx, а вот так они вызываются на fenom: {$_modx->resource.pagetitle}

Dublin Core metadata

Очень сильно сомневаюсь что от нее вообще есть толк, но на всякий случай (для информации) вынес все в отдельный PDF файл.

Сохраняем шаблон, переходим на главную и смотрим код (CTRL+U)

SEO оптимизированный код head

Сопутствующие ссылки для ознакомления что к чему:

  • 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 полезности

Ниже приведу перечень общих статей, которые помогут вам занять ТОП:

Семанка: что такое, как и чем собирать;

Внедрение активной семантики;

Пока все, со временем расширю статью.

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( 4 оценки, среднее 5 из 5 )
Web-Revenue.ru
Добавить комментарий

  1. Александр

    Добрый день не подскажите а что может быть если использую ваш код вида

    а в результате на главное все время получаю

    причем если подвести мышь к /, то высвечивается нормальное название домена, уже сломал всю голову как решить, если страница вложенная, на ней все нормально, так только на главной, за ранее спасибо

    Ответить
    1. Алексей автор

      Ничего не понятно (код съел редактор)

      Ответить
  2. Mr.Twister

    Автор, спасибо за статью!
    Когда ожидать материал посвященной внедрению Schema org для сайта на Modx?

    Ответить
    1. Алексей автор

      Смотрите статьи, много где есть примеры внедрения Schema org

      Ответить