Как внедрить микроразметку в шаблон блога
В предыдущей статье мы обсудили, зачем использовать микроразметку, какие данные стоит размечать и так далее. Сегодня разберемся, как внедрить эти микроформаты в шаблон блога на движке Вордпресс, чтобы сделать работу с ними максимально удобной и адекватной. Как всегда, предлагаю делать это без плагинов. Один раз прописать в шаблоне и расслабиться!
Популярные варианты размещения микроразметки
Если вы посмотрите в поиске, как нам предлагается работать с микроданными — то обнаружите три самых популярных варианта:
- Установить плагин;
- Использовать внешний инструмент;
- Вписывать микроразметку в редакторе;
Эти возможности кажутся мне, мягко говоря, кособокими. Посудите сами!
Плагины для микроразметки
Ставить плагины по каждой надобности — дурной тон. Так, вскоре, наш блог начнет ползать, а не летать. Конечно, многие инструменты необходимы, но каждый новый стоит рассматривать крайне придирчиво и критично. Тем более, что зачастую, плагин лишь незначительно расширяет наши возможности, зато, как нагружают блог все его формы, окна, чек-листы и так далее.
Внешние генераторы микроразметки
Внешние инструменты, вроде генераторов микроразметки — могут быть очень хороши. Но и тут без ложек дегтя не обойдется. Во-первых, они генерируют код не только с нужной микроразметкой, но и с собственными ссылками.
— Справедливо? — Конечно!
— Нужно оно нам? — Нет!
К тому же, полученный код не повисает в воздухе — его надо куда-то прописать. То есть, вопрос, где и как расположить микроразметку? — остается.
Самостоятельное внедрение микроразметки
И, наконец, можно посмотреть на примеры разметки текста и внедрить ее прямо в редакторе (не визуальном, конечно, а в режиме «Текст»). Но это уже за гранью добра и зла. Зная, сколько времени занимает написание и оформление каждого поста — не стоит даже заикаться о том, чтобы еще что-то где-то прописывать. Пусть даже мы так набьем руку, что будем жонглировать микроформатами, практически, не задумываясь… Не вариант!
Интересно, что во множестве статей, которые я пересмотрела по теме — я видела именно эти способы в разной степени понятности и в разных сочетаниях. Может, была невнимательна…
В общем, то, что я предлагаю вам — это плод моих экспериментов с микроразметкой в блоге. Могу утверждать, что ее валидаторы Яндекса и Google ее увидят. А уж, используют ли поисковики эти данные для сниппета или нет — это, увы, вне моей власти 
Как мы хотим добавлять микроразметку в шаблон
Мы хотим один раз определить, какие варианты микроразметки нас интересуют. Потом настроить все так, чтобы данные размечались автоматически. Если нам что-то новенькое взбредет в голову, то можно вернуться и добавить новые строки в код. Вот тот максимум труда, на который мы согласны!
Разметка авторства, даты и описания в формате Schema
Немного о разных форматах и отношении к ним поисковиков
В предыдущей статье я рассказала, почему считаю именно эти данные достойными микроразметки. По крайней мере, для своего Блоготея.
Поисковые системы Яндекс и Google видят любую микроразметку, но есть схемы и форматы, которые они, скажем, «воспринимают» и могут использовать в сниппетах. А есть виды данных, которые не входят в сферу их интересов.
Например, Google желает видеть разметку авторства в формате hcard. А Яндекс считает, что так должны размечать свои данные именно организации. Для личных имен наш могучий поисковик предпочитает Schema. О том, как оформить имя автора и дату публикации в микроформате hcard читайте тут. А дальше мы познакомимся со стандартом Schema, который дает автору простор для микро-творчества.
Еще стоит уточнить, что Яндекс готов «понять» далеко не все. На сегодняшний день он может использовать при формировании своей выдачи следующие микроданные:
- данные об организациях, адреса, отзывы;
- словарные статьи;
- картинки и видео;
- статьи о фильмах (описания рецензии);
- кулинарные рецепты;
- музыкальные аккорды;
- отзывы об автомобилях;
- целевая аудитория (типа, «18+» или «дети от 3 до 90 лет»)
- творческие работы;
Причем, схема для творческих работ была добавлена Яндексом совсем недавно. И именно это сделало тему микроразметки актуальной и интересной для большинства авторов блогов. Ведь под творческой работой (CreativeWork) подразумевается любая статья, в том числе, в блоге. Вот список схем на сайте http://ruschema.org/ :
КЛИКНИТЕ, чтобы увеличить
Подробно мы не будем сегодня изучать этот формат. Просто отметим себе, где он есть. Англо-читающим предлагаю посетить их исходный сайт Schema.org
Еще нужно понять один нюанс:
микроформаты — это не метаданные! Они не могут касаться контента, который не видит пользователь. Все, что вы разметите — должно быть отображено где-то на странице поста.
Теперь приступим…
Код для микроразметки
Имя автора:
<div itemscope itemtype="http://schema.org/BlogPosting"> Автор:<span itemprop="author"><?php the_author(); ?></span> </div>
Дата публикации:
<div itemscope itemtype="http://schema.org/BlogPosting">
Дата:<span itemprop="datePublished"><?php the_time('c') ?></span>
</div>Обратите внимание на формат даты ‘c’ — это формат ISO 8601 — ЕДИНСТВЕННЫЙ, который хотят видеть поисковые системы. И хотя выглядит такая дата по-дурацки (2013-10-04T10:00:48+00:00) — приходится мириться…
Описание (description):
<div itemscope itemtype="http://schema.org/BlogPosting"> <span itemprop="description"><?php echo get_post_meta($post->ID, 'description', true) ?></span> </div>
Понятно, что мы можем впихнуть все три формата в один контейнер div. Например, так:
<div itemscope itemtype="http://schema.org/BlogPosting">
Автор:<span itemprop="author"><?php the_author(); ?></span>
Дата:<span itemprop="datePublished"><?php the_time('c') ?></span>
<span itemprop="description"><?php echo get_post_meta($post->ID, 'description', true) ?></span>
</div>Добавив классы CSS, вы сможете вписать эту информацию в общий стиль вашего блога.
Где размещать такую информацию? — Я решила выводить ее вверху статьи. В небольшой таблице. Конечно, она совершенно не нужна читателю — ведь я надеюсь, что он прочитает весь пост, а не только его краткое описание. Но это возможный компромисс, между удобством ботов и людей.
Для этого, я собрала код в таблицу и вставила его в шаблон поста (страница single.php) — сразу после заголовка (title), перед контентом (content). Вот, как это выглядит у меня (реализацию можно посмотреть под заголовком каждого поста Блоготея):
<h1 class="entry-title"><?php the_title() ?></h1>
<div class="mystyle" itemscope itemtype="http://schema.org/BlogPosting">
<table class="mystyle"><tr>
<td>Автор:<span itemprop="author"><?php the_author(); ?></span></td>
<td>Дата:<span itemprop="datePublished"><?php the_time('c') ?></span></td>
<td><span itemprop="description"><?php echo get_post_meta($post->ID, 'description', true) ?></span></td></tr>
</table><div class="line"></div>
</div>
<?php the_content(); ?>Этот код не нужно копировать себе в шаблон — это просто пример того, как можно вписать микроразметку в шаблон поста!
Валидаторы обоих поисковиков правильно видят такую мироразметку.
КЛИКАЙТЕ, чтобы увеличить
КЛИКАЙТЕ, чтобы увеличить
И все! Нам не нужно будет заполнять никаких окошек каждый раз, даже лишнюю галочку не придется ставить нигде… Жду ваших мнений в комментариях!
| Читайте БлоготеЙ! на Google+ | |
| Читайте БлоготеЙ! на Фейсбуке |
Мамочки… Для меня эти коды — темный лес до сих пор. Пойду сначала предыдущие почитаю, а то глаза уже квадратные…
[Ответить]
Ой для меня это все -темный лес. Не разобраться. И даже вникать не могу — не лезет.Потому и забросила блог на Вордпрессе
[Ответить]
Девочки, вы меня пугаете)))
[Ответить]
Т.е. то, что последнее надо просто вставить в файл темы single.php?
[Ответить]
Katyaru отвечает:
Январь 22nd, 2014 at 16:04
Да
[Ответить]
У меня до микроразметки по плану еще четыре пункта затратных по времени реорганизаций, ставлю пятым пунктом разобраться в этом вопросе.
[Ответить]
Katyaru отвечает:
Январь 22nd, 2014 at 16:06
Озвучишь другие пункты?
[Ответить]
Я а бы хотела, чтобы рядом с постом в поисковике выводилась картинка
[Ответить]
Katyaru отвечает:
Январь 22nd, 2014 at 16:04
Все бы хотели
[Ответить]
Начинаю читать и думаю о том, какие люди сейчас грамотные и продвинутые, а я темнота полнейшая.
[Ответить]
Блогобабушка отвечает:
Январь 22nd, 2014 at 15:45
Алечка, у тебя еще все впереди. Я вон тоже несколько дней билась с настройкой плагина и думала — что же я такая тупая?… А потом до меня дошло, что плагин не может сделать того, что мне нужно, он делает, как правильно
[Ответить]
Katyaru отвечает:
Январь 22nd, 2014 at 16:06
Кстати, Люда, я жду тебя в чате, чтобы узнать, что с плагином. Я за него переживаю)))
[Ответить]
Блогобабушка отвечает:
Январь 22nd, 2014 at 16:33
Иду
[Ответить]
Katyaru отвечает:
Январь 22nd, 2014 at 16:05
Не-е-е. Это просто кому что интересно — тот тем и морочится)))
[Ответить]
Темна вода в облацех… Не осилить мне сих премудростей!
[Ответить]
Пойду-ка я лучше статейку напишу, а с разметкой девочки, я пас….
[Ответить]
Вечно ищу куски кода, потом все опять забываю, теряю)
[Ответить]
Спасибо, у Вас самое лучшее решение! К сожалению, используя Ваш код, у меня на странице не выводится описание(description). Блог на WP и установлен плагин All In One SEO Pack. Не подскажете как можно откорректировать код описания?
[Ответить]
Katyaru отвечает:
Январь 23rd, 2014 at 21:35
Здравствуйте, Андрей! Первое, что я должна спросить: а Вы прописываете описание в полях плагина All In One? Второе (если прописывете): посмотрите в списке произвольных полей (вот статья о них /proizvolniye-polya/ ), генерирует ли плагин поле description? — Если, вдруг, не генерирует, то это какой-то ломаный плагин. Просто нужно его переустановить (с официального сайта вордпресс) или поставить Platinum SEO Pack (вот статья о нем /platinum_seo/ )
[Ответить]
А почему вы выбрали BlogPosting? Я вот решила, что лучше Article. Дело в том, что если помечать BlogPosting, поисковики анализируют до 200 слов, а если Article, то 400, они считают, что пост не должен быть длинным, но мы то с вами пишем довольно длинные посты, поэтому лучше Аrticle.
[Ответить]
Katyaru отвечает:
Январь 24th, 2014 at 16:52
Вот пример вдумчивого подхода! Возможно переделаю на Article…
[Ответить]
Спасибо за статью. Так что, дату показывать только таким способом можно, а если я хочу по-другому?
[Ответить]
Katyaru отвечает:
Январь 24th, 2014 at 16:51
Да, увы, они теперь дату хотят видеть в таком формате некрасивом
[Ответить]
Валентина отвечает:
Январь 24th, 2014 at 17:08
Мне нравится Катин блог, и я надеюсь, она не обидится, если я кое в чем ее исправлю, ведь мы должны делиться идеями и опытом, тем более если это ново для всех. Дату можно отобразить так, как вы захотите, для этого есть одна хитрость, которая описана здесь — happyblogging.ru/mikrorazmetka-wordpress/
[Ответить]
Валентина отвечает:
Январь 24th, 2014 at 19:35
Я очень осторожна с кодом на странице. А почему вы так боитесь ссылок. у меня на блоге — всегда пожалуйста.
[Ответить]
Katyaru отвечает:
Январь 24th, 2014 at 22:16
Я не боюсь) Но не считаю это возможным без разрешения автора) Не в обиду, но я считаю не вполне этичным поставить ссылку на аналогичную статью.
[Ответить]
Очень сложный вопрос, но интересно и доступно изложено.
[Ответить]
Без разрешения автора (модерации) комментарий не появится. Извините, не хотела вас обидеть, просто хотела немного подисскутировать, у нас ведь разные подходы, обсудить проблему, послушать ваше мнение. Ведь в спорах рождается истина.
[Ответить]
Katyaru отвечает:
Январь 25th, 2014 at 00:12
Да я и не думала обижаться!
Просто ответила, почему убираю ссылки и сама их не ставлю в своих комментах))) Все нормально. Решение с датой — очень правильное.
[Ответить]
Здравствуйте, скопировал себе на сайт undelete-file.ru в шаблон записей, — автор показывается, дата тоже, а описания НЕТ. Почему? И гугл ругается на мою эту разметку? Что не правильно? Спасибо.
[Ответить]
Katyaru отвечает:
Апрель 4th, 2014 at 00:50
Здравствуйте, Евгений!
Вероятно, у Вас не работает php функция, которая должна выводить описание. У Вас стоит SEO-плагин, типа, All-in-One SEOpack или аналогичный. Думаю, что функции просто неоткуда взять описание. Или вы просто его не заполняли для статей… Сильнее ничего проинтуичить не могу)
[Ответить]
Евгений отвечает:
Апрель 4th, 2014 at 01:14
Стоит All-in-One SEOpack, описание, ключи везде заполнены!
Как исправить? Или функции добавить?
[Ответить]
Katyaru отвечает:
Апрель 4th, 2014 at 01:18
А Вы не добавили функцию, которая выводит описание? Вот, как в коде в статье.
Евгений, извините, я сейчас еще работаю, но понимаю уже очень туго))) Единственное, что очевидно сейчас — описание появится, если заработает php-функция…
[Ответить]
Привет. Спасибо за статью, только я не понял одного. А зачем выводить описание? Ведь их получается будет два?
В all in one seo pack выводится одно и будет второе?
[Ответить]
Александр Борисов отвечает:
Май 26th, 2014 at 11:19
Было бы круто itemprop=»description» просто прописать там где плагин all in one seo pack выводит описание, вот это высший клас, только где это делается я не знаю.
[Ответить]
Katyaru отвечает:
Май 26th, 2014 at 11:28
Вот тут есть ответ /proizvolniye-polya/
[Ответить]
Александр Борисов отвечает:
Май 26th, 2014 at 15:18
Спасибо, но я ни чего не понял.
[Ответить]
Katyaru отвечает:
Май 26th, 2014 at 15:19
[Ответить]
Александр Борисов отвечает:
Май 26th, 2014 at 15:30
Я прописал строчку ID, ‘description’, true) ?> в single.php, но описание не показывает http://webmaster.yandex.ru/microtest.xml все равно! Значит описание каким-то другим кодом выводится в новых версиях пресса.
[Ответить]
Katyaru отвечает:
Июнь 3rd, 2014 at 21:19
(извините, что только сейчас нашла Ваш коммент — попал в СПАМ почему-то) Ну надо, как минимум, вписать все, вместе со строкой, указывающей на адрес шаблона разметки, прописывать… Вы так сделали?
[Ответить]
Katyaru отвечает:
Май 26th, 2014 at 11:25
Спасибо за отклик) В All in One дается SEOописание для поисковиков. На странице будет одно описание — видимое пользователям. Оно же станет частью и микроразметки, которую считывают «другие роботы» поисковиков… Как-то так.
[Ответить]
Бодрого дня! Есть такой плагин для Chrome, SeoQuke называется. Этот плагин не видит микроразметки на вашем блоге. Сегодня целый день потратил на изучение микроразметки, вернее, как ее применить, но нигде ничего не могу найти. Думал воспользоваться вашим способом, но неизвестно, работает ли он.
[Ответить]
Katyaru отвечает:
Июнь 3rd, 2014 at 21:06
Да-да, был у меня Сеоквейк (сейчас что-то слетел — хром обновился). Он много чего не видит… Мне кажется, важнее, что ее видят валидаторы Яндекса и Гугла.
[Ответить]
Вот я и подумал: возможно плагин не видит. Хорошо, если так. Буду завтра устанавливать разметку.
Успехов!
[Ответить]
Екатерина, а в чем разница между BlogPosting и Article?! Я размещал разметку с помощью инструментов Google, но там мне система указала, что указать нужно Article (в начале выбрал «Статья», так как более подходящего не было).
Вы бы могли посоветовать что-то для меня, — сайт автомобильной тематики об конкретно одном бренде (новости, двигатели, характеристики), ну, вообщим публикую практически все, что связано с этой маркой.
[Ответить]
Katyaru отвечает:
Июль 19th, 2014 at 19:54
Да, в сущности, особой разницы не вижу. Главное, чтобы Гугл заметил, что есть разметка. На ранжирование, имхо, это сильно не повлияет. Просто добавит ресурсу некого «траста» в глазах поисковика. Поскольку Ваш блог все-равно не официальный сайт бренда — размечать его стоит, как любой другой. Если у Вас есть обзоры отдельных деталей, например, можете посмотреть разметку review здесь http://schema.org/Review
[Ответить]
Катерина здравствуйте, искал информацию про микроданные попал на Ваш блог. Подскажите пожалуйста, я воспользовался инструментов для вебмастеров от гугл, после проверки структурированных данных ввел url одной из записей на блоге, мне выдало ошибку. Что это может быть, как ее исправить?
Ошибку выдает после оставления комментариев пользователями?
hcard
fn: Андрей Назыров
person-name:
family-name: Назыров
given-name: Андрей
url:
http:…
Ошибка. If this markup is about a person, at least 2 of the following fields are needed: organization, location, or role. See the people help page for more information.
[Ответить]
Katyaru отвечает:
Июль 26th, 2014 at 14:25
Здравствуйте. По сути, это и не ошибка. Просто Гугл считает, что для обозначения человека нужно добавить еще поля «организация», «местоположение» или «роль» («должность»).
[Ответить]