Микроразметка для блога WordPress: типы, свойства и методы внедрения

микроразметка schema.org для блога WordPress

Микроразметка — это один из инструментов в seo, который не только помогает улучшить визуализацию сниппета в выдаче поисковых систем, но повлиять на качество контента и его релевантность, а так же ранжирование в целом.

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

Замечание: отсутствие микроразметки на сайте отрицательно не сказывается ни на отношение с поисковыми системами, ни на продвижение в целом. А вот её наличие в многом помогает получить высокие позиции благодаря понятной структуре и разметки контента.

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

В большей части своих проектов я использую микроразметку schema.org — простой способ разметить контент, имея доступ к коду. Многие могли бы мне напомнить, что существуют готовые решения в виде плагинов для микроразметки, но они создают дополнительную нагрузку на и без того тяжелый WordPress. Да и работоспособность данных плагинов напрямую зависит от разработчиков, которые не всегда успевают следить за изменениями в поисковых системах. Как следствие, делаем разметку будет с помощью кода с применением одного единственного плагина, который мне нравится и оттестирован лично мной.

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

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

Стандартная статья на WordPress содержит в себе:

  1. заголовок,
  2. текстовое содержание,
  3. медиа-контент (картинки, иллюстрации и фотографии),
  4. комментарии,
  5. в некоторых случаях рейтинг материала.

Данные блоки и следует разметить элементами schema.org.

Микроразметку хлебных крошек я описал в отдельной статье.

Как найти в коде блоки для микроразметки

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

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

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

выбираем просмотр кода элемента

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

подсветка кода в браузере google chrome

Как видите необходим мне блок <div id="content">, так как он содержит в себе весь контент страницы (текст, картинки, комментарии, рейтинг и т.д.).

блок content

Именно его и следует размечать типом микроразметки (в моём случае schema.org/Article)

Как найти в коде WordPress необходимые php файлы для микроразметки

Как вы уже могли догадаться необходимые div блоки можно будет найти в файле single.php — файл, который отвечает за все статьи на блоге.

блок content article

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

itemscope itemtype="http://schema.org/Article"

Находим по соседству блок <h1> — заголовок нашей статьи и сообщаем роботу, о чём наша статья:

itemprop="name"

С помощью того же браузера находим необходимый div, в котором содержится контент нашей статьи (стандартный блок: <div class="entry-content">)

блок articlebody

и размечаем его:

itemprop="articleBody"

Для того, чтобы разметить картинки, иллюстрации и фотографии, которые содержаться в нашей статье, я рекомендую использовать функцию, которая автоматически добавит нужное свойство (itemprop="image") в каждой статье:

/* микроразметка изображений */ function micro_image($content) { global $post; $pattern = "<img"; $replacement = '<img itemprop="image"'; $content = str_replace($pattern, $replacement, $content); return $content; } add_filter('the_content', 'micro_image'); /* микроразметка изображений */

Данный код необходимо разместить в файле function.php

Микроразметка рейтинга материалов

Самый простой способ сделать микроразметку рейтинга материалов да и сам рейтинг — плагин WP-PostRatings. Данный плагин хоть в некоторых случаях требует некоторой корректировки, но работает полноценно, обеспечивая вас звёздами с сниппете Google выдачи.

Следует отметить: количество голосов и значение рейтинга никак не влияет на факторы ранжирования. И внедряться рейтинг может с помощью простого html кода:

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

<div style="display: none;" itemprop="aggregateRating" itemscope="itemscope" itemtype="http://schema.org/AggregateRating"><span itemprop="bestRating" content="5" />5</span><span itemprop="ratingValue" content="5" />5</span><span itemprop="ratingCount" content="89564" />89564</span></div>

Микроразметка комментариев на блоге WordPress

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

как яндекс понимает комментарии wordpress

Но лишь в том случае, когда вы пользуетесь стандартами известными поисковикам и в том случае, когда ваша статья размечена с помощью schema.org/Article.

Во всех остальных случаях микроразметку комментариев необходимо делать (особенно на сайтах «с нуля» ), это позволит выставить приоритеты для поисковых систем основного контента и дополняющего — снизить процент разбавления семантического ядра страницы.

В WordPress функция с выводом комментариев находится в файле function.php, найти которую можно с помощью простого поиска на странице Ctrl+F:

<?php comment_class(); ?>

Каждому отдельному комментарию (id=comment-<?php comment_ID(); ?>) присваивается тип:

itemprop="comment" itemscope itemtype="http://schema.org/Comment"

usercomments в коде wordpress

Имени комментатора присваивается свойство:

itemprop="creator"

свойство creator в микроразметке комментариев

Дате публикации в формате год-месяц-день (2015-06-17):

itemprop="commentTime" — изменилось на itemprop="datePublished"

свойство commentTime в микроразметке комментариев

Сам текст комментария:

itemprop="commentText" — изменилось на itemprop="text"

свойство commentText в микроразметке комментариев

Как я сказал, микроразметка комментариев достаточно сложна в WordPress и не влияет на поисковое продвижение, если чувствуете, что ваши знания в php несильны, не трогайте код, вполне достаточно того, что вы разметите сам материал и медиа-контент.

Примеры микроразметки

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

Микроразметка рецептов

Для того, чтобы понаблюдать за тем, как поисковые системы отнесутся к рецепту на seo блоге, я создал с помощью шаблона страницы отдельную страницу (Рецепт идеального seo), которую разметил с помощью schema.org/Recipe.

И Google, и Яндекс обработали микроразметку рецепта:

улучшенный сниппет микроразметки рецепты

Яндекс же по этому поводу говорит:

требования яндекс к микроразметке рецепты

И тем не менее выдача показывает улучшенный сниппет:

микроразметка рецептов в Яндекс

Внедряется такая микроразметка частично с помощью php кода, частично с помощью html:

  1. заменяем

    itemscope itemtype="http://schema.org/Article"

    на

    itemscope itemtype="http://schema.org/Recipe"

  2. размечаем заголовок <h1> так же как при микроразметке статей
  3. с помощью функции картинок добавляем к фотографиям itemprop="image"

Все остальные свойства прописываются через html:

  1. itemprop="ingredients" — ингредиенты чаще всего выстраиваются <li> списком. В каждый <li> необходимо добавить <li itemprop="ingredients">. Так поисковые системы узнают, что для приготовления блюда понадобится.
  2. itemprop="recipeInstructions" — процесс приготовления рецепта выделяется с помощью <div itemprop="recipeInstructions">
  3. itemprop="totalTime" — время приготовления блюда в формате ISO (05:00)
  4. itemprop="recipeYield" количество порций
  5. и так далее: калорийность (itemprop="nutrition"), категория блюда (itemprop="recipeCategory"), подкатегории блюда (itemprop="recipeSubCategory")…

Микроразметка отзывы товаров и организаций

Микроразметка адреса и организации знакома многим, её структуру и свойства хорошо описаны в статье Яндекс, товары же следует размечать с помощью Google инструкции.

Данные адреса размещаются либо на отдельной страницы «Контакты», либо же в сквозных блоках (шапка, сайдбар). Информация заложенная в микроразметку считывается поисковыми роботами и используется для составления Яндекс и Google карт. Внимательно следите за тем, чтобы информация была актуальна, иначе ваши клиенты могут позвонить не вам.

Микроразметка отзывов же, формат который может дать большие преимущества для сайта. Это одно из вариантов партнерства с Яндекс. Для того, чтобы стать партнером Яндекс необходимо размещать на своём интернет-ресурсе отзывы об организациях размеченные с помощью микроразметки http://schema.org/Review, в которую включаются микроразметка организаций, о которой пишется отзыв http://schema.org/Organization и сама разметка отзыва.

Выполнив все условия и требования Яндекс к сайтам партнёрам, вы можете претендовать за размещение отзывов с вашего сайта на персональных страницах организаций в сервисе Яндекс Город. Таким образом можно получить большое количество ссылок с Яндекс Карт и значительное доверие поисковика относительно вашего сайта.

Последнее время и Яндекс, и Google подсказывают с помощью валидатора, что сделано правильно, а что следует отредактировать:

валидатор микроразметки Яндекс
валидатор микроразметки Google

Так небольшие изменения в коде вашего сайта или блога могут повлечь за собой значительные изменения трафика вашего интернет-ресурса. Пользуйтесь микроразметкой, ведь это бесплатный seo-инструмент.

Дополнения к статье от 15.07.2015

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

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

Свойства принадлежат сущности

ответ Яндекс о микроразметке

С уважением,
  1. Юрий

    Привет, Максим!
    Название статьи прям как на другом твоем блоге. Хотя содержание не идентично. Для меня актуальна эта тема. Хочу разметить статьи, хоть изначально это кажется темным лесом. Даже исходя из объема статьи :)
    Видел много плагинов которые позволяют разметить блог, но они какие то трудно освояемые, уж лучше в коде покопаться.

    Ответить
  2. Максим

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

    Ответить
    • Юрий

      seowordpress точка ru

      Ответить
    • Максим

      Блог мне знаком, но это не моё детище :)

      Ответить
  3. Юрий

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

    Ответить
    • Максим

      Юр, если ты говоришь о WP-Postratings то ничего делать не нужно в плагин уже встроена микроразметка. Просто выводишь функцию плагина в нужном месте блога, микроразметка будет работать. Тот пример, который в «микроразметке рейтинга» — html формат, такой код можно вставить в любую страницу. Но не советую использовать такой формат, так как это некая манипуляция :) Используй плагин, всё сделает за тебя, сам пользуюсь им.

      Ответить
  4. Юрий

    …И почему то после вставки кода для изображений в functions блог уходит в аут с ошибкой и руганью на ошибку синтаксиса.

    Ответить
    • Максим

      Исправил, ошибка в знаках была, попробуй. Я ставил тебе его, работал :)

      Ответить
    • Юрий

      Макс, спасибо за советы.
      Правда с функцией все равно ошибку синтаксиса выдает.

      Ответить
    • Максим

      Странно, я всё проверил, все знаки верны.

      Ответить
  5. Юрий

    И как насчет автора и даты?

    Ответить
    • Максим

      А что с автором и датой?

      Ответить
    • Юрий

      Их надо размечать? Автора и дату. И еще вопрос почему выбрана сущность Article, а не Blog.
      Нужно ли помимо single.php размечать как либо index.php ?

      Ответить
    • Максим

      Дату и автора комментария нужно размечать в hatom — это обязательные значения. А schema не обязательно. Можно использовать Blog — они схожи между собой, небольшие различия.

      Ответить
  6. Татьяна

    Максим, привет. У меня тоже после вставки кода в functions.php сайт перестает работать :(

    Ответить
    • Максим

      Странно, почему у вас функция крашит файл. Проверил вторично, перезалил функцию прямо из статьи, работает.

      Ответить
    • Татьяна

      Ругается все равно. Если после $replacement = ‘<img itemprop="image"' добавить точку с запятой (;) ругаться перестает, но itemprop у картинок все равно не появляется.

      Ответить
    • Максим

      Всё верно, точка с запятой потеряна была, обнови кэш и проверь, должно появится.

      Ответить
    • Татьяна

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

      Ответить
    • Максим

      Ну вот и отлично, как один знак может скрашить весь сайт :) Пойду проверять все знаки в своих статьях :)

      Ответить
  7. Анастасия

    Внеси исправления в микроразметку комментариев, пожалуйста. С недавних пор не UserComments, а Comment. Вместо времени commentTime — datePublished, вместо commentText — text
    С месяц как сменилось

    Ответить
    • Максим

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

      Ответить
    • Анастасия

      Я пару недель назад у всех своих подопечных правила. Можешь проверить по валидатору Яндекса)

      Ответить
    • Максим

      Странно, не ругается Яндекс. Точно я вспомнил, у меня и была разметка комментариев под Comment, во время написания статьи проверял валидатором, обратил внимание на ошибку. Переправил на Usercomment, теперь ошибок нет. А на comment мне Яндекс говорил — неизвестное свойство для Article.

      Ответить
    • Анастасия

      Смотри, может потому, что комментарии вообще должны в разметку статьи входить? А у тебя отдельно
      Вот мой скрин cs622419.vk.me/v622419380/40bd1/Itx0pWkKmnE.jpg (ну я блогом размечала, разницы там никакой)
      А у тебя все отдельно cs622419.vk.me/v622419380/40bda/0ldvQB4J0D8.jpg
      Кстати, насчет списка статей. У тебя вот так cs622419.vk.me/v622419380/40be3/dutz6HI3teM.jpg
      А правильнее будет в одной сущности, как и статья+комментарии — cs622419.vk.me/v622419380/40bec/UchIqureisE.jpg

      Ответить
    • Максим

      Логика действительно подсказывает, что все свойства должны находится внутри сущности. И так было реализовано до изменений, я же применил такой тип микроразметки неспроста. Основывал я своё решение на примере livejournal, где свойства usercomment и blogposting находятся вне сущности. И тем не менее и Яндекс, и Google обрабатывает информацию. Я предполагаю, что данный фактор не принципиален для поисковиков. Хотя нужно будет в клубе вебмастера задать такой вопрос.

      Ответить
    • Анастасия

      Мне все в одном кажется логичнее, вроде как все связано =) Вот так все и делаю
      Плюс изучила англоязычные примеры

      Ответить
    • Максим

      Согласен, логичнее, но так как вопрос уже задал, дождусь ответа от Яндекс, отпишусь конечно же.

      Ответить
    • Максим

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

      Ответить
    • Анастасия

      Зато мы теперь знаем точно рекомендованный вариант =)
      Сущностей много, а поисковики используют лишь часть из них визуально. Нив англоязычном, ни тем более в русскоязычном примеров исользования большинства функций нет. Там вообще рекомендуют размечать всю страницу как WebPage, в ней — Blog , но это по валидаторам ошибка
      Я иногда на статичные страницы добавляю signifikalLinks, когда разметить нечего. Плюс разметку главного меню , сайдбара и футера, ну и изображений функцией

      Ответить
  8. Анастасия

    Максим, привет, еще дополнение — неделю назад где-т у Гугла произошли изменения, по валидатору теперь поля headline, image, datePublished стали обязательными для разметки блога и статьи
    https://developers.google.com/structured-data/rich-snippets/articles?hl=ru
    Тут смотри, Гугл пишет, что картинки из статей будут в поиске

    Ответить
    • Максим

      Настя, спасибо большое за напоминание. Новость видел, не успел ещё отреагировать. С datePublished все достаточно просто:

      <meta itemprop="datePublished" content="<?php the_time('o-m-d') ?>">

      А вот с headline вопрос, заменять сам заголовок статьи, который или же вводить дополнительный условный заголовок без тэгов?

      Ответить
  9. Анастасия

    Сейчас покажу как я всем делаю:

    <time itemprop="datePublished" datetime="»>

    <a itemprop="image" href="»>

    Валидацию прекрасно проходит

    Ответить
    • Максим

      Не, у меня админка подрезает коды. Безопасность :)

      Ответить
    • Анастасия

      Даже pre не работает(
      Тогда вот скрин, чтоб не заморачиваться)) cs623319.vk.me/v623319380/3c78e/Rdk-T96SUdo.jpg

      Ответить
  10. эксперт Незнайкин

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

    Ответить
    • Максим

      Скажу вам по секрету, уже понимают. Об этом в скором времени напишу свои наблюдения из отзывов на картах Яндекс.

      Ответить

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

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