Как сделать микроразметку 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>

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

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

Готово? Переходим к автору, то есть к разметке человека, который ее написал. Функция отображения автора, должна быть под тегом 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 thoughts on “Как сделать микроразметку schema org на WordPress блоге

  1. Надежда Давыдова

    Леша, ссылка на подписку открытая.

    Спасибо за подробное объяснение. Никак не соберусь разметить свой блог, да еще информация противоречивая. Теперь будет легче разобраться.

        1. Алексей Кобзарев Автор записи

          Да? Я такого не видел, а о чем пишут?

        2. Надежда Давыдова

          Леша, нашел академика 🙂 я не стала сильно вникать, там коды, они страшные 🙂

        3. Алексей Кобзарев Автор записи

          Да ладно, не скромничай, просто времени не было..

  2. Игорь Черноморец

    Привет Алексей! А у меня микроразметка прописана была в шаблоне уже, но…она hCard, а на сколько мне известно, она не поддерживается яндексом, не так ли?

      1. Игорь Черноморец

        Боже мой, а как удалять то? Я даже боюсь подумать этим заниматься 🙂

        1. Алексей Кобзарев Автор записи

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

        2. Алексей Кобзарев Автор записи

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

        3. Игорь Черноморец

          А, извини, просто я почистил кеш и наверно случайно ошибся!
          Так и да, мой шаблон платный от Гудвина. Завтра обращусь к нему. Спасибо

  3. Андрей

    Привет, Алексей. Хорошая инструкция, добавлю в закладки. Как настрою шаблон, займусь микроразметкой.

    1. Алексей Кобзарев Автор записи

      Вижу, что ваш сайт размечен по этому принципу, это еще один способ.

  4. Vlad

    Отдал бабки и сплю спокойно! Хотя, если бы знал, что после начнут выходить подобные инструкции, то я бы наверное подождал немножечко… 🙂

      1. Vlad

        Тратил еще как! На предыдущем шаблоне мне ведь самому удалось почти все разметить! 😉

        1. Алексей Кобзарев Автор записи

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

        2. Vlad

          Ну по таким инструкциях почему бы и нет! 😉

        3. Алексей Кобзарев Автор записи

          Я думаю, ты и сам бы смог…

  5. Андрей

    Алексей, за код микроразметки изображений огромное спасибо! Все получилось, работает отлично, а то я думал обращаться к фрилансерам уже, у которых заказывал микроразметку страниц, записей и комментариев.

  6. Наталья

    Здравствуйте, Алексей!
    У меня кулинарный сайт, на котором я попробовала использовать для рецептов микроразметку. Но в результате появляются два заголовка h1. Первый заголовок предусмотрен в самом шаблоне и выводится на Главную страницу. Второй предусмотрен микроразметкой — без него нельзя. Как с этим «бороться», не подскажете? Спасибо.

  7. Наталья

    Если отключить верхний заголовок — то он исчезает в анонсах на главной. Если убрать в теле мирокразметки заголовок — то нарушается микроразметка. (

    1. Алексей Кобзарев Автор записи

      2 заголовка выводит разметка, правильно? Вы пытаетесь отключить одну из них или у вас встроена функция «заголовки» в шаблон темы?

  8. Егор

    Здравствуй. Как быть с ПРЕДУПРЕЖДЕНИЕ: микроразметка внутри тега noindex не учитывается при построении сниппета. У меня плагин WP-Сashe портит разметку.
    Но я у тебя посмотрел, такая-же ситуация.

    1. Алексей Кобзарев Автор записи

      Надо будет посмотреть код, когда время будет.

  9. Fktrctq

    Не получается разметку сделать для меню На странице меню выводится так

     'Навигация по сайту','container' => 'nav','container_class' => 'menu','items_wrap' => 'меню%3$s','walker' => $walker ) ); ?>
    подскажите куда вставить itemscope itemprop="http://schema.org/SiteNavigationElement"
  10. Ирина

    Здравствуйте, Алексей. При проверке наличия микроразметки выдает такой код rdfanode
    ОШИБКА…
    Не подскажете что он значит?

    1. Алексей Кобзарев Автор записи

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

  11. Рустам

    Добрый день Алексей! Для пробы вставил в фанкшн пхп Ваш код разметки картинок и — белый экран. Удалил — восстановилось. В чем может быть загвоздка? Спасибо заранее за ответ.

    1. Алексей Кобзарев Автор записи

      Здравствуйте! Скорей всего идет конфликт с темой или плагином.

      1. Рустам

        Спасибо за развернутый ответ Алексей! Блог ваш весьма и весьма полезный! Творческих успехов Вам!

  12. Саня

    Добрый день! у меня функция работает, только с теми изображениями, которые добавлены в ручную. для добавления миниатюр в категории использовал Taxonomy Images. да вот беда, функция не проставляет разметку. Может есть какой-то выход? Спасибо заранее!

Добавить комментарий

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