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

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

Изменена: 28 июля 2020 в 12:46

В данном уроке постараюсь раскрыть все нюансы технической SEO оптимизации MODX Revolution, с готовыми примерами, копируйте, внедряйте, радуйтесь позициям.

Базовые мета теги для 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">

Заголовки

На странице должен быть один 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-я должны быть. Должны быть четкими, лаконичными и без лишней «мути» в виде хлебных крошек, больших картинок сверху, когда не виден текст ошибки и ссылки на уход с нее.

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">

Подтягивание картинки при постинге в vk

<meta property="vk:image" content="[[++site_url]][[*img]]" /> или
<meta property="vk:image" content="{$_modx->config.site_url}{$_modx->resource.img}" />

Разметка для 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}">

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.

Микроразметка Shema org

Далее кода будем делать меню, хлебные крошки и т.д. мы ее будем внедрять.

Алексей

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

Оцените автора
( Пока оценок нет )
web-revenue.ru
Добавить комментарий