Приветствую всех читателей! Для удобства и повышения качества восприятия сайта поисковыми система была разработана микроразметка. Она представляет собой разметку страницы сайта специальными атрибутами. Помогает структурировать информацию на сайте для робота, чтобы он лучше понимал Ваш сайт.
Для интернет магазинов, порталов фильмов или музыки, внедрение микроразметки оказывает положительное влияние в плане привлечения посетителей. Сайт с микроразметкой становится кликабельнее в поисковой выдаче.
Интернет магазины, внедрившие микроразметку, в результатах выдачи выделяются. В сниппете прописывается описание товара, а не набор выделенных жирным ключей, как у других, а также указывается цена товара:
Что такое микроразметка сайта
Рекомендую Вам посмотреть видео, что говорит сам Yandex о микроразметке:
В 2011 году крупные поисковые системы Яндекс, Google, Bing обьявили о внедрении семантической разметки данных. Семантическая разметка должна помочь роботам точнее обрабатывать и структурировать, определять и понимать информацию на сайтах. Чтобы потом представлять ее пользователям в результатах поиска.
В HTML-код страниц сайта добавляются специальные атрибуты, которые указывают роботам на тип обрабатываемой информации.
Разметка происходит непосредственно в HTML-коде страниц с помощью специальных атрибутов и не требует создания отдельных экспортных файлов.
Микроразметка дает возможность сайту добиться лучшей релевантности страницы в поисковой выдаче. Пример результатов поисковой выдачи, приведенный на картинке ниже, показывает, что у сайтов с микроразметкой показывается не только описание товара, но и телефон, адрес, время работы, ссылка на карту, другие разделы сайта:
<img class="aligncenter wp-image-5618 size-full" title="как выглядят интернет-магазины в результатах поиска после внедрения микроразметки" src="https://readmag.ru/wp-content/uploads/2014/07/mikrorazmetka-schema-9.png" alt="как выглядят интернет-магазины в результатах поиска после внедрения микроразметки" width="592" height="573" />
Разработанная микроразметка Schema.org использует микроданные для описания сущностей и обьектов на страницах сайта. Подробнее о ней Вы можете прочесть у Яндекса
Валидатор микроразметки Яндекс и Google
Проверить микроразметку в Яндекс можно из панели Яндекс Вебмастер. Как зарегистрироваться в ней я писала в этой статье https://inetsovety.ru/yandex-webmaster/
Заходите в панель вебмастера, справа внизу ищите ссылку «Проверить микроразметку». После клика по ней откроется страница проверки:
У Гугла свой инструмент проверки структурированных данных, находится он по адресу
Как сделать микроразметку сайта на WordPress
Сейчас я приведу Вам пример микроразметки сайта. Я буду внедрять микроразметку на одном из своих сайтов, на котором стоит бесплатный шаблон. Важно перед установкой разметки schema.org проверить нет ли на сайте какой-то дугой разметки. Если Ваш шаблон сделан на заказ, то скорее всего в нем ничего такого не будет. А вот с бесплатными шаблонами посложнее, тут как повезет. Для проверки берез запись с оставленными в ней комментариями. На одном из моих сайтов с бесплатным шаблоном какая-то микроразметка была, а на другом выдавалось сообщение: «Микроразметка не обнаружена =(«:
Вот такая вот «кривая и не поддерживаемая Яндексом» микроразметка найдена в бесплатном премиум шаблоне. Если в Вашем шаблоне нашлось что-то подобное, необходимо его удалить. Микроформат hCard служит для описания человека. Т.е. роботу говорится, что этот участок текста оставлен человеком и вот информация о нем. В данном примере, fn указывает фамилию, nickname — ник, photo — аватар. Главный минус микроформата hCard — роботу не указывается дата оставления комментария и его содержание. 
Из-за того что у Вас разные шаблоны, я не могу Вам показать, где в Вашем случае находится разметка hCard. Я приведу схему поиска свойства vcard, который потом мы переименуем. Бесплатные шаблоны генерируются программами, которые и внедряют vcard, как стиль оформления для какого-то блока. Наша задача найти его и переименовать.Забегая наперед скажу, что чаще всего он встречается в комментариях, поэтому я рекомендую Вам проверять валидатором микроразметки статью с комментариями. Проверка статьи без комментариев покажет, что микроразметка не найдена, а на самом деле она есть на сайте.
Действуем так:
- Открываете любую из своих статей, нажимаете одновременно CTRL и U. Откроется исходный код страницы. Жмете комбинацию клавиш CTRL и F, внизу появится строка поиска по странице, в нее вставляете vcard и смотрите, где он нашелся. В моем случае он находится у блока div class=»comment-author vcard«.
- Теперь необходимо найти свойство vcard в файлах темы. Обязательно скопируйте файлы темы Вашего блога перед редактированием. В моем случае vcard нашелся в таблице стилей (style.css) и в файле комментариев (comments.php). Я заменила vcard на vca везде, где он встречался. Теперь проверка микроразметки показывает, что таковая на сайте не найдена.
Если Вам не удается найти самостоятельно vcard ни в одном из файлов шаблона, обращайтесь к фрилансерам за помощью. Бесплатные шаблоны хорошо тем, что они бесплатны 
На этом все их преимущества заканчиваются, а начинаются проблемы с их редактированием и внедрением различных фишек.
Когда проблема с микроразметкой решена, приступаем к внедрению микроразметки schema org.
Размечать мы будем те участки сайта, на которых мы хотим акцентировать внимание поисковых роботов. На своем блоге я разметила файл header.php и single.php.
Файл header.php отвечает за вывод данных в шапке сайта. Я хочу, чтобы поисковые роботы адекватно воспринимали название сайта и его описание.
В файле header.php ищем тег header, пример из моего шаблона <div id=»header» class=»out»> , добавляем внутрь следующий атрибут:
itemscope itemtype="https://schema.org/WPHeader"
После добавления этого атрибута код примет вид:
<div id="header" class="out" itemscope itemtype="https://schema.org/WPHeader">
Обратите внимание куда я вставила атрибут. Не правильная вставка в код может привести к тому, что шаблон перестанет работать.
Теперь в том же файле header.php ищем строчки, отвечающие за вывод названия сайта и его описания:
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
Функция <?php bloginfo(‘name’); ?> выводит заголовок сайта, <?php bloginfo( ‘description’ ); ?> соответственно его описание.
Добавляем атрибут itemprop=»headline» к заголовку, а itemprop=»description» к тегу описания. Вот коды этих атрибутов
itemprop="headline" itemprop="description"
Вот так выглядит мой код с данными атрибутами:
<h1 itemprop="headline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2 itemprop="description"><?php bloginfo('description'); ?></h2>
Теперь проверка микроразметки Яндекс показывает, что поисковый робот понимает, что в шапке сайта мы прописали для него заголовок сайта headline и ого описание description. Для моих сайтов показывается предупреждение, что описание сайта короткое и должно быть длиннее 250 символов. Какие влияние оказывает короткое описание сайта на продвижение, я пока не знаю. Время покажет
Микроразметка поста (статьи) в WordPress
Шапку сайта в файле header.php мы разметили. Приступим к микроразметке постов блога. Мы покажем роботу, что вот тут начинается статья, вот это дата, это автор, а это сам текст. Начнем. Открывайте файл single.php, который отвечает за вывод статей. В некоторых шаблонах из файла single.php идет подключение к другому файлу, название может быть подобным content-single.php. В таком случае редактировать придется его. Главное, чтобы в нем Вы нашли теги, о которых я напишу ниже.
Ищем функцию отвечающую за вывод контента <div id=»content»>. Добавляем внутрь атрибут:
itemscope itemtype="https://schema.org/Article"
Получится примерно так:
<div id="content" itemscope itemtype="https://schema.org/Article">
Укажем поисковикам на начало статьи добавив атрибут itemprop=»articleBody». В моем шаблоне за вывод поста отвечает entry, у Вас может быть другое название класса.
<div class="entry" itemprop="articleBody">
<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(300,225), array("class" => "alignleft post_thumbnail")); } ?>
<?php the_content('Читать далее »'); ?>
Несколькими строчками выше будет код, который выводит заголовок статьи, автора и дату публикации:
<h2 class="title"><?php the_title(); ?></h2>
<div class="postdate">
<?php the_time('d.m.Y в G:i:s') ?>
<?php the_author() ?>
</div>
В теге заголовка h2 функция <?php the_title(); ?> отвечает за вывод заголовка поста. Ее мы помечаем атрибутом itemprop=»name». За вывод даты публикации отвечает функция <?php the_time(‘d.m.Y в G:i:s’) ?>. В большинстве шаблонов формат даты не поддерживается микроразметкой schema, поэтому Вам придется его изменить. Непосредственно внутрь <?php the_time(‘d.m.Y в G:i:s’) ?> мы не можем вставить атрибут itemprop=»datePublished», шаблон перестанет работать. Заключаем функцию даты и автора в тег <span> </span>.
<h2 class="title" itemprop="name"><?php the_title(); ?></h2>
<div class="postdate">
<span itemprop="datePublished"><?php the_time('Y-m-d') ?></span>
<span itemprop="author"><?php the_author() ?></span> </div>
Проверяем и видит результат:
В бесплатном шаблоне вывод рубрики был после статьи. Чтобы акцентировать внимание роботов на названии рубрики добавьте ей следующий атрибут:
<div class="postmeta">
Опубликовано в рубрике <span itemprop="articleSection"><?php the_category(', ') ?></span>
</div>
Вот список кодов всех атрибутов, которые мы используем для разметки поста:
itemprop="articleBody" itemprop="name" itemprop="articleSection" itemprop="datePublished" itemprop="author"
Еще раз обратите внимание внимание на правильный формат даты, чтобы не выскакивало предупреждение при проверке микроразметки.
Картинок
Вот этот атрибут отвечает за микроразметку картинок:
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');
Я добавила этот код в конец файла functions.php до закрывающего тэга ?> .
Микроразметка комментариев в Wordpress
Выполнить микроразметку комментариев для меня оказалось сложнее всего. Если в шаблоне на этом блоге, который создавался на заказ, я разобралась что к чему минут за 15, то ни в одном из бесплатных шаблонов мне не удалось сделать микроразметку комментариев. Видно, что код вывода комментариев генерировался программой и понять в нем что-либо сложно.
Сейчас я дам Вам атрибуты, которые нужно прописать для разметки самих комментариев, а Вы уже или сами, или при помощи фрилансеров программистов, добавите их в код шаблона.
itemprop="comment" itemscope="itemscope" itemtype="https://schema.org/Comment" itemprop="commentCount" itemprop="creator" itemprop="dateCreated" itemprop="text"
Атрибут в первой строчке размечает блок комментариев; второй — подсчитывает количество комментариев к статье; третий — имя комментатора; четвертый — время (не забывайте, что формат должен быть таким ‘Y-m-d’ ); пятый — сам комментарий.
! Обратите внимание.
В июне 2015 произошло обновление микроразметки, старые атрибуты вызывают ошибку в валидаторе:
ПРЕДУПРЕЖДЕНИЕ: поле interactionCount не определено в спецификации https://schema.org/Article
Поле comment содержит некорректный тип данных https://schema.org/UserComments
Если вы используете эти атрибуты срочно измените их на те, что выше:
itemprop="comment" itemscope="itemscope" itemtype="https://schema.org/UserComments"
itemprop="interactionCount"
itemprop="commentTime"
itemprop="commentText"
Контактных данных
Много расписывать не буду, приведу лишь код:
<div itemscope itemtype="https://schema.org/PostalAddress"> <span itemprop="name">Прописываем название блога</span> <span itemprop="postalCode">Ваш индекс</span> <span itemprop="addressLocality">Город, в котором Вы живете</span> <span itemprop="streetAddress">Адрес</span> <span itemprop="telephone">Телефон</span> <span itemprop="email">Электронная почта (желательно, чтобы в адресе фигурировал домен)</span>
Ну вот собственно и все, что я на сегодняшний день знаю о том, как сделать микроразметку на сайте WordPress. Если что-то узнаю новенькое, буду дополнять статью. Если кому-то известно больше, дополняйте в комментариях.