Как сделать микроразметку schema org на WordPress блоге

Приветствую на блоге aDvDk!

Семантическая микроразметка для блога очень важна, поэтому в этой статье, я расскажу и опишу, как сделать микроразметку на WordPress блоге.

Есть инструмент для вебмастера в аккаунте Google для микроразметки, чтобы ее сделать новичкам веб-мастерам или тем, кто боится лазить в код, но этот инструмент работает только для поисковой системы Гугл. Он называется маркер, я описывал его работу и показал на наглядном примере, как с его помощью разметить страницы сайта, подробности читайте: «Google инструмент маркер«.

Если вы хотите продвигать свой ресурс только в этой поисковой системе, то используйте инструмент маркер, но для остальных поисковых роботов этого будет не достаточно, точнее они вообще ее не увидят. Сегодня мы с вами сделаем разметку для всех поисковых систем! Смотрите ролик от Яндекс про семантическую микроразметку:

Возможно вы уважаемый читатель думаете, что это сложно? На самом деле, это не так! Как я уже сказал: «В этой статье на наглядных примерах, я покажу, как сделать микроразметку для WordPress блога». Плюс к этому, я дам вам специальные коды, которые разметят ваш блог, и он будет отлично индексироваться, хорошо выглядеть в поисковой выдаче и у вас на сайте или блоге вырастет посещаемость.

Только есть одно, но! У вас на блоге должны быть все необходимые элементы, например, имя автора статьи, дата написания и хлебные крошки, которые улучшают навигацию на сайте и делают ваш веб-ресурс удобным для пользователей.

Если у вас этого нет, то ничего страшного, все можно исправить. Читайте «Исправление SEO ошибки«, а потом «Установка хлебных крошек«, сделайте все рекомендации в них и приступайте к семантической микроразметке. Смотрите на то, что мы сегодня будем размечать:

  1. Основа — itemscope itemtype=»https://schema.org/Article»
  2. Заголовоки — itemprop=»name»
  3. Автор — itemprop=»author»
  4. Дата — itemprop=»datePublished»
  5. Текст статей — itemprop=»articleBody»
  6. Рубрики — itemprop=»articleSection»
  7. Изображения — itemprop=»image»
  8. Комментарии — itemprop=»interactionCount»

Как разметить записи блога на движке WordPress

Я буду считать, что вы прочитали две статьи, установили у себя на блоге автора, дату и хлебные крошки правильно. Тогда начнем…

Сначала, я покажу вам, как должна выглядеть микроразметка (пример моего блога):

Как сделать микроразметку schema org

Теперь, когда вы знаете, что должно отображаться и как ваш ресурс будут видеть поисковые системы, например, Яндекс, можно приступать к делу. Начнем со статей.

Для этого нам потребуется доступ к FTP, чтобы соединится с сервером, на котором лежит ваш блог. Если вы пользуетесь браузером для изменений в коде, то я расскажу и для вас, как сделать микроразметку, то есть покажу два способа:

  • Зайти с файлового менеджера
  • Зайти с браузера

Перед изменениями рекомендую сделать резерв блога. Что бы в случае чего, вы смогли вернуть все на место. Например, вставите куда-то не туда код и блог станет криво отображаться или вообще перестанет загружаться. Поэтому создайте копию сайта.

Сейчас нам нужен файл отвечающий за вывод и содержание всех статей блога. Нам нужно сделать семантическую микроразметку schema org в основе статей, чтобы продолжить размечать ее дальше. Знайте, если вы не сделаете разметку основы, то будет выводиться ошибка. Остальное будет все правильно, но микроразметка уже будет нарушена и тогда никакой пользы она не принесет. Именно поэтому следите внимательно за последующими действиями.

Я буду показывать все примеры на тестовом блоге, так как он еще не размечен. Кстати, советую вам тоже создать тестовый блог и все изменения делать на нем, а потом просто перенести уже готовые файлы на основной. Читайте «Как создать тестовый блог«.

Заходите в проверку микроразметки webmaster.yandex. Если у вас там нет своего аккаунта, то создайте, это займет пару минут. Копируйте адрес статьи вашего сайта и вставляйте в поле URL:

Семантическая микроразметка schema

На современных шаблонах можно встретить уже готовую микроразметку, поэтому у вас будут показаны ошибки в виде красного круга. Все потому что, стандартная разметка не правильная, но мы все это дело исправим. Если у вас вообще не было разметки, то сервис Яндекс отобразит грустный смайлик.

Ну что, давайте перейдем к делу? Готовы? Тогда поехали…

Как сделать микроразметку основы статьи блога schema org

Нам нужен файл single.php, отвечающий за все посты. Как я обещал: «Описание будет для двух категорий», первая для FTP, а вторая для браузеров.

FTP — запускайте файловый менеджер (рекомендую File-Zila). Заходите в корень по адресу:

Wp-content/themes/название шаблона

Браузер — заходите в админ-панель по адресу:

Внешний вид/редактор темы

Теперь для обоих сразу: находите single.php или одна запись. Здесь нам нужно найти правила, которые отвечают за весь написанный контент. У меня, это class=»inner». Если у вас шаблон не emulator-pro, как у меня, то нужно искать другой вывод.

Смотрите на строки, которые находятся в самом начале файла. Они должны начинаться с невидимого для пользователей тега div. С его помощью заключаются все правила, которые работают на PHP. Нам нужен самый первый див!

Вставляйте в него:

itemscope itemtype=https://schema.org/Article/

Выглядеть это должно так:

<div class="название вашего класса" itemscope itemtype="https://schema.org/Article">.

После внесения изменения, ваш блог будет типа здороваться с поисковиком, выведет приветствие, такого рода: itemType = https://schema.org/Article. Это сразу скажет поисковому роботу, что основа статьи размечена правильно, но этого мало! Необходимо сделать микроразметку с системой schema полностью.

Семантическая микроразметка заголовка

Первый шаг к полной микроразметке у нас лежит через заголовок H1, поэтому начнем с него. Найдите в файле этот тег. Это можно быстро сделать при помощи поиска. Нажмите комбинацию клавиш CTRL+A (на английской клавиатуре), всплывет окно и вставьте в поисковую строку H1. Если у вас нет этого тега в файле single.php значит, на вашем блоге не правильно сделаны заголовки. Это тоже можно исправить, но в другой статье: «Как настроить заголовки«. Прочитайте ее и сделайте все как надо.

Нашли тег H1? Хорошо, вставьте в него такое правило:

itemprop="name"

Выглядеть, это должно таким образом:

<h1 itemprop="name"> функция отображения заголовка</h1>

Следующий шаг мы разберем только в том случае, если у вас установлена дата написания статьи, имя автора и хлебные крошки. Нет такого? Тогда необходимо прочитать эту статью, установить к себе на блог эти функции и только тогда переходить к дальнейшим изменениям для улучшения индексации, красивого отображения в поисковой выдачи и для роста трафика.

Микроразметка автора статьи

Готово? Переходим к автору, то есть к разметке человека, который ее написал. Функция отображения автора, должна быть под тегом H1, но у них нет классов и специальных атрибутов, в которые можно вставить следующие правила для правильной микроразметки schema. Заключаем в теги span, это правило:

itemprop="author"

Выглядеть вся конструкция будет примерно так:

<span itemprop="author"><?php the_author_posts_link(); ?></span>

Там же у нас стоят дата и рубрика, поэтому делаем для них тоже самое, но прописываем другие правила:

Для даты установите обязательно время в формате «Y-m-d»:

itemprop="datePublished"

Для рубрики:

itemprop="articleSection"

Сделали? Хорошо! Приступим к разметке тела, то есть к содержимому поста.

Создание семантической микроразметки в теле статей

За тело отвечает PHP правило <?php the_content(); ?>. Скорей всего у вас оно будет голым, то есть не заключено в теги div. Поэтому нам нужно сделать это самим, но не с помощью div, а с помощью другого тега, например, span.

Нам нужно поставить это:

itemprop="articleBody"

Теперь создаем правило вместе с функцией, которое будет выглядеть так:

<span itemprop="articleBody"><?php the_content(); ?></span>

Как видите тело постов заключено в теги спан и прописан необходимый атрибут для микроразметки schema org. Теперь роботы будут видеть содержание наших записей.

Как сделать микроразметку schema org всем изображениям на блоге

Когда, я только узнал об этой разметке, мне пришлось размечать все изображения вручную, но, когда, я только начал это делать, в интернете появилось счастье: PHP функция, она вставляется в файл function.php, шаблон блога. Сейчас, я дам эту функцию вам и не придется размечать все картинки вручную, вот она:

// Микроразметка картинок www.advdk.com
function mayak_image_marking($content) {
global $post;
$pattern = "<img";
$replacement = '<img itemprop="image"';
$content = str_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'mayak_image_marking');


Да, такая она короткая, но работает отлично. Вставьте ее функции темы или файл function.php, после открывающего тега <?php, то есть в самое начало.

Нам осталось сделать последний шаг, это разметка комментариев, чтобы роботы отчетливо видели их. Правило для комментариев выглядит так:

itemprop="interactionCount"

Микроразметку сообщений нам нужно сделать в другом файле. Опять опишу инструкцию для двух категорий.

FTP – открывайте файл comments.php

Браузеры – жмите на ссылку комментарии.

Тут необходимо найти строку кода, которая выводит надпись «Обсуждение» или «Оставить комментарий», в общем, что-то в этом роде. Эта функция выглядит примерно так:

<span class="comment-title"> Обсуждение: <?php plural_form(get_comments_number(),array('комментарий','комментария','комментариев'));?></span>

В нее надо вставить правило chema org:

itemprop="interactionCount"

Ставьте его после класса, если у вас нет правила class, то напишите конструкцию span. Как ее делать, я уже рассказывать не буду, так как мы это делали выше.

После проделанных нами изменений в инструменте «Микроразметка Яндекс», у вас будут отображаться все страницы, как у меня.

На этом все, работа закончена. Знаю, что это было не просто! Вставлять правила микроразметки schema org просто, а вот искать необходимые места было сложно. Но все же это дает хорошие результаты.

Скоро мы перейдем к продолжению стратегии по продвижению моих читателей, поэтому, если вы еще не подписаны на обновления моего блога, то сделайте, это сейчас, нажав здесь. До встречи!

С уважением, Алексей Кобзарев

42 комментария

Ваш комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *