Микроразметка в WordPress

5 комментариев

shema.org

Хочется выделиться в поисковой системе? Хочется больше кликов 🙂 ? Тогда к нам идут, как утверждают опытные товарищи, надо не только писать хорошие статьи, но и как-то выделиться в выдаче поисковых систем. Даже если нам удалось оказаться в ТОП10 выдачи, это еще не означает, что именно на наш сайт будут кликать. Для этого есть разные способы.

Один из них состоит в том, чтобы сделать необычный title страницы, причем его необычность может быть разной: от яркого содержания до включения в него различных символов. Также в сниппете страницы можно видеть разнообразные символы, в особенности, если отображается рубрика данной страницы.
Вот пример, который иллюстрирует сразу оба подхода 🙂 :
snippet

Трудно не заметить!
Часто в выдаче приходится видеть страницы, в сниппете которых находится добрая половина ответа на поставленный вопрос. Например, так:
snippet-micro
И наглядно, и понятно, и хочется съесть… Так, не отвлекаться на вкусности 😉  . Как же так получается, что одни сниппеты выглядят обычно в поисковой выдаче, а другие украшаются подобным образом?

Что такое микроразметка сайта

Микроразметка сайта — это заранее известный набор указателей для поисковой системы, с каким типом контента она имеет дело, будь то просто текст, будь то видео, будь то картинка и т.п. При этом сейчас можно указать не просто, что «это текст статьи!», а указать более подробно, такого типа этот текст именно, какую смысловую нагрузку он несет. Например, у Вас на сайте может быть рассказ о каком-нибудь событии, Ваш сайт может быть посвящен кулинарной тематике и у Вас на сайте размещены рецепты, которые хотелось бы выделить для ПС. Практически у всех на блогах есть комментарии. Видите звездочки в сниппете на картинке выше? Это тоже своя микроразметка сайта. То, что гугл иногда отдельно в сниппете пишет адрес организации, как на картинке ниже, думаю, знают почти все. Я лично пользовалась часто. snippet-address Также выделяемая информация по организации может быть использована Яндексом на своих Яндекс.Картах. Если щелкнуть на дом, часто можно видеть, что появляется информация по организации, находящейся в этом доме. Микроразметка сайта найденной организации ему в этом помогает. Т.о. помимо поискового робота сайт становится понятнее и пользователю, который даже на него еще не заходил. Поисковые системы Яндекс и Гугл не говорят о том, что микроразметка напрямую влияет на позиции сайта в поисковой выдаче. Однако, если учесть, что ПС сейчас активно опираются на поведенческие факторы, то можно предположить, что более привлекательный из-за сниппета сайт может занимать более высокие позиции (если конечно сниппет — не единственное ценное место сайта 😉 ). Также Яндекс предлагает участие в своей партнерской программе тем сайтам кулинарной направленности, которые обладают правильной микроразметкой. О критериях правильности можно почитать на сайте Яндекса.

Типы микроразметки

Существует три основных типа микроразметки. Среди них:

  1. Микроданные
  2. Микроформаты
  3. RDFa

Под микроданными понимается разметка, описывающая специальные данные (просто текст, видео, картинка, событие, рецепт и т.п.) в контенте. Самым популярным на данный момент словарем разметки микроданными является Schema.org. Это достаточно простой в использовании, но очень добротный словарь. Особенно радует, что развивается он не в отрыве, а при непосредственном участии поисковых систем. О нем чуть подробнее и с примерами применения в WordPress будет рассказано ниже.

При использовании микроформатов в обычные HTML-теги добавляются уже известные атрибуты, в основном class, с определенными, заранее заданными значениями. Популярным форматом является hCard, который базируется на vCard, стандарте, используемом для обмена контактной информацией между различными девайсами. Думаю, многие видели в Outlook’е возможность экспорта/импорта карточек vCard? Вот так примерно выглядит код с использованием hCard:

Язык разметки RDFa (Resourse Description Framework in attributes) предполагает использование атрибутов в разметке XTML Вообще может использоваться любой XML-формат. Среди атрибутов используются

  • about — url, в котором указывается, о чем говорится в данном документе
  • rel — здесь указывается, какие взаимосвязи есть у данного документа с другими
  • src, href и resource — url документа-спутника
  • property — описывает некое свойство элемента контента
  • content — замещает описание контента элемента, в котором используется атрибут property
  • datatype — определяет тип данных, используется совместно с атрибутом property
  • typeof — определяет тип ресурса, который описывается в основном теге

Метадата RDFa может быть представлена в виде атрибутов типа Dublin Core (отсюда dc) и FOAF.

Вот пример совместного использования использования XHTML и RDFa:

Также встречается еще и словарь разметки JSON-LD, являющийся расширением JSON, но о нем я рассказывать не буду.

Микроразметка в WordPress. От теории к практике

Познакомившись с основными типами разметок можно и за WordPress приниматься 🙂 .

Сразу оговорюсь, что будем использовать словарь Schema.org. Он представляет из себя целый набор наследуемых классов с набором свойств, который можно использовать. Для интереса посмотрите на всю эту иерархию и Вы поймете, что самое базовое использование данной разметки, которое будет описано ниже — это 0,000000001% возможностей словаря. Число с потолка, ничего не считала http://noservice.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif

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

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

Итак, прогон и… ошибка! «microdata ОШИБКА: невозможно определить принадлежность данных полей.» Причем по коду было видно, что ошибка использования словаря Schema.org. Интересно…

errorSchema.org

Я еще ничего такого не делала… Тут я вспомнила про плагин All in One SEO. Если у кого такая проблема есть, то достаточно зайти в настройки данного плагина и снять галочку «Использовать разметку Schema.org» и сохранить настройки.

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

Идем в нашу админку, в ней заходим в редактор темы (Внешний вид -> Редактор), из списка справа выбираем файл header.php и начинаем его немного править. Для начала необходимо указать всему нашему блогу, что мы будем использовать микроразметку Schema.org. Для этого надо, чтобы в шапке сайта был отмечен атрибут itemscope itemtype=’http://schema.org/WPHeader’. У меня шапка сайта размещается в контейнере <div id=’header’>…</div>. Т.о. на выходе получаем

Обязательно надо разметить блок, в котором содержится описание Вашего блога. С большой вероятностью именно этот текст будет размещен в сниппете после переиндексации Вашего блога поисковыми системами. У меня это блок <div class=’navbarleft’>…</div>. Его необходимо пометить атрибутом itemprop=’description’. Итого

Далее все в том же header.php находим место, где указывается название блога. Название выводится php-скриптом <?php bloginfo(‘name’); ?>. Оборачиваем этот кусочек кода в span примерно так, пометив контейнер атрибутом itemprop=’headline’:

У меня есть файл home.php, при помощи которого на главную страницу блога выводятся все статьи с их названием и началом текста. Если у Вас есть такой или аналогичный, в него надо зайти и как минимум разметить начало контента. Находим контейнер с контентом, у меня это блок <div id=’content’>…</div>. Его надо разметить так, чтобы поисковик понял: ага, тут статьи находятся ! http://noservice.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif

Размечаем, например, так:

Если этого не сделать, то валидатор Яндекса будет ругаться, мол в начале каждой статьи есть картинка, видео и все, что попало на главную страницу размеченным, а кто тут главный класс, откуда все эти itemprop берутся?

Теперь размечаем наши статьи. Идем в код основного шаблона index.php. Также начинаем разметку с самого главного контейнера, в котором находится весь контент:

Затем начинаем размечать саму статью. Что у нас есть в статье? Да много чего есть! Название, автор, время создания, сам текст, картинки в нем, видео, адреса, всякая специфика типа рецептов, событий (имеются ввиду концерты, фестивали, собрания и проч.) и проч. Все это нельзя просто так оставлять!

Итак, начинаем с названия статьи. Оно передается при помощи кода <?php the_title(); ?>, оборачиваем его в span, как в коде ниже:

Аналогично отмечаем дату создания статьи:

Тоже самое с рубрикой:

И, наконец, самое главное — указываем поисковику на местонахождение текста статьи. У меня это так:

Все, самое главное мы сделали, мы указали поисковику на самые важные части блога, которые у нас есть. Теперь можно размечать контент внутри самих статей, есть явно указывать на картинки, видео и т.п. В принципе, это можно делать каждый раз руками, но можно и автоматизировать процесс. Так, чтобы при вставке картинки при помощи кнопки в админке в ее тег сразу записывался атрибут itemprop=’image’. Единственный минус состоит в том, что если сделать это напрямую в движке, все уйдет вместе с обновлениями. А хочется, чтобы это с нами осталось надолго 🙂 .

Но в рамках этой статьи мы все же будем вставлять код в текст самой статьи. Чтобы разметить картинку, надо в тег <img src=…/> вставить выше указанный тег itemprop=’image’. С видео несколько сложнее. Если мы добавляем видео с Youtube, то нам надо вставить предлагаемый самим ютубом код html вида <iframe src=’https://www.youtube. …’/></iframe>. Перед этим фреймом мы должны вставить довольно длинную портянку из описаний, которые удовлетворяют требованиям Яндекса. Для гугла надо меньше 🙂

Вот пример с самого Яндекса:

Причем это описание простого видео. Schema.org позволяет разделять просто видео от фильма или сериала. Яндекс подробно об это пишет. Для описания фильма портянка в два раза больше =)) .

Также можно разметить и комментарии к Вашим статьям. Для этого идем в файл comments.php и начинаем расставлять особые атрибуты. Помечаем блок, ответственный за начало вывода комментариев. У меня это <div id=’commentblock’>…</div>. Итак, размечаем:

Этим самым мы указали использовать словарю класс комментариев.

Помечаем автора комментария:

Затем указываем поисковику дату комментария:

Наконец, отмечаем сам текст комментария:

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

Подпишитесь на обновления блога!


5 комментариев “Микроразметка в WordPress”

  1. Что-то сайт изменился…

    Ответить
  2. Дмитрий

    Здравствуйте! Делаю себе микроразметку, все получается хорошо, кроме комментариев! В гугле показывает все замечательно, а вот яндекс ругается, выдает ошибку:
    » microdata
    ОШИБКА: невозможно определить принадлежность данных полей. Возможны две причины: эти поля некорректно размещены, либо указан лишний атрибут itemprop
    itemType =
    comment
    comment
    itemType = http://schema.org/Comment
    creator = Никанорыч
    text = Спасибо за интересную статейку, есть к чему присмотреться.
    datepublished = 2016-03-03
    comment
    comment
    itemType = http://schema.org/Comment
    creator = admin Дмитрий
    text = Всегда пожалуйста!
    datepublished = 2016-03-03″

    С автоматической микроразметкой не выходит, выдает ошибку 500, белый экран!
    Прописал в ручную, вроде бы комменты отображаются в валидаторе, но с ошибкой!
    Подскажите пожалуйст, что можно сделать?
    Пробовал отключать все плагины, перемещал itemprop=»comment» itemscope=»itemscope» itemtype=»http://schema.org/UserComments» в разные блоки, также пробовал разделять его, всеравно ошибка выскакивает!

    Ответить
  3. Дмитрий

    Разобрался! не без помощи конечно….
    оказывается, надо блок комментариев разместить в тело статьи и яндекс перестает ругаться. Спасибо!

    Ответить
    • Admin

      Я рада, что все получилось! Извините, что долго не отвечала, была дико занята.

      Ответить

Оставьте комментарий

XHTML: Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url=""> <img src="" alt="" class="" width="" height="">

http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ab.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ac.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ag.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ah.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ai.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ak.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/am.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/an.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ao.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/aq.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ar.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/at.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/av.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/aw.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ay.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/az.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/bb.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/bc.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/bd.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/be.gif 
больше...