Микроразметка сайта – что это, что дает и зачем она нужна

Приветствую вас, уважаемые читатели блога royal-site.ru!

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

Микроразметка сайта – это определенный стандарт для SEO разметки сайта. Особые метки в коде сайта размечают самые важные элементы для поисковиков (цены, комментарии, описания, заголовки, фото …)

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

Кстати недавно я писал о том, как добавить карту сайта на wordpress без плагинов. Если вы еще не сделали у себя на сайте карту, то обязательно прочитайте эту статью.

Итак, перейдем к делу. Сначала ознакомьтесь с главными пунктами нашей темы.

 

Что такое микроразмета сайта и зачем она нужна

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

Если вы хотите увидеть как примерно видит ваш сайт поисковик, то зажмите одновременно ctrl+u и увидите исходный код страницы. Там все: скрипты, стили, картинки, комментарии, заголовки, блоки и т.д.

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

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

Если вы все же не поняли, что такое микроразметка сайта, то посмотрите это видео от Яндекс:

Как проверить микроразметку сайта

Чтобы проверить, есть ли на вашем ресурсе микроразметка и в каком она состоянии, просто перейдите по этой ссылке https://webmaster.yandex.ru/microtest.xml и введите в верхней строке адрес вашего ресурса. Возможно, что в ответ будет написано, что микроразметка не обнаружена или же вылезет Предупреждение – это значит, что нужно что-то исправить. Вот и все, посмотрели как есть, идем дальше.

Микроразметка header 

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

Первым делом добавим микроразметку  названия и описания блога. В панели управления wordpress в разделе Внешний вид – Редактор находим файл header.php, также этот и последующие файлы вы можете найти в файловом менеджере хостинга в папке с вашей темой.

Находим тег  header  и внутри тега пишем

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

itemscope говорит роботу о том, что внутри этого тега будет что то описано.

itemtype сообщает, что конкретно будет описываться.

http://schema.org/WPHeader – сообщаем, что речь пойдет о заголовке блога на WordPress.

Далее нам нужно показать поисковикам конкретные места, на которые мы хотим обратить внимание. Для этого используем атрибут itemprop

Ищем место где выводится имя блога, обычно это выглядит так –<?php bloginfo (‘name’); ?> и находится в теге <h1>. Внутри тега h1 пишем itemprop=”headline”. Должно получиться примерно так

<h1 itemprop="headline" ><?php bloginfo (‘name’); ?></h1>

Дальше скорее всего в теге <h2> будет вывод описания блога <?php bloginfo ( ‘description’ ); ?> в тег <h2>

добавляем itemprop=”description”. Вот так:

<h2 itemprop="description"><?php bloginfo ( ‘description’ ); ?></h2>

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

Микроразметка статьи за 10 минут

Микроразметка статьи облегчает работу поискового робота и ускоряет индексацию сайта в поисковике. ПРОЧИТАЙТЕ ДО КОНЦА, чтобы узнать какой должна быть правильная микроразметка для статьи.

Вот список атрибутов, которые понадобятся для микроразметки:

• itemscope itemtype=”http://schema.org/Article”
• itemprop=”articleBody”
• itemprop=”name”
• itemprop=”articleSection”
• itemprop=”datePublished”
• itemprop=”author”

Чтобы сделать микроразметку для статей найдите в папке со своей темой файл single.php или что-то похожее, типа content-single.php.

Здесь найдите блок <div>, в котором выводится весь основной контент вашего поста, часто это что то вроде <div id=”content”>, но может быть и по другому, ведь у всех разные темы для WordPress. Добавьте внутри тега такой атрибут itemscope itemtype=”http://schema.org/Article”. Должно быть примерно так:

<div id="content" itemscope itemtype="http://schema.org/Article">

У меня это выглядит вот так:

<section class="blog-section" itemscope itemtype="http://schema.org/Article">

Так мы показали роботу, что здесь будем размечать нашу запись.

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

Найдите код, который отвечает за вывод автора  <?php the_author () ?>. Если этот или другой код не заключен в <div>, то просто оберните его тегами  <span> </span>. Внутри тега добавьте: itemprop=”author”. У меня это выглядит так:

<span itemprop="author" ><?php the_author(); ?></span>

Микроразметка даты публикации статьи

Найдите место где выводится функция  <?php the_time (‘Y-m-d’); ?>, и добавьте атрибут  itemprop=”datePublished” к тегу, в котором выводится дата

Как то так:

<span itemprop="datePublished" ><?php echo get_the_date('Y-m-d'); ?></span>

Внимание! Дата обязательно должна быть в формате ‘Y-m-d’. Хотя это непривычный для нас формат, зато очень даже привычный для поисковиков. Я разместил у себя 2 функции вывода даты поста. Одну для роботов и при помощи CSS скрыл этот блок, а вторую для людей.

Микроразметка заголовка H1, H2, H3 …

Ищите тег h1 или у кого то h2 внутри которого выводится <?php the_title (); ?> и к этому тегу добавьте атрибут itemprop=”name”

У меня получилось так:

<h1 itemprop="name"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>

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

В WordPress за это отвечает функция <?php the_content (); ?>. Найдите div который содержит эту функцию и добавьте к нему itemprop=”articleBody”

Должно быть примерно как у меня:

<div itemprop="articleBody"><?php the_content(); ?> </div>

Для полного завершения картины покажем поисковику в какой рубрике находится эта публикация. Ищите <?php the_category (‘, ‘); ?> и добавьте к блоку в котором находится функция атрибут itemprop=”articleSection”

Ну и последнее по микроразметке на сайте статей: если вы хотите указать поисковому роботу на рубрику, в которой находится размечаемый пост, то нужно найти функцию <?php the_category (‘, ‘); ?>, и вставить в её контейнер или при отсутствии его между тегами <span> </span> следующий код: itemprop=”articleSection”

В моей теме за вывод категории отвечает другая функция, поэтому выглядит немного по другому :

<a href="'.get_category_link($category->term_id ).'"><span itemprop="articleSection">' . $category->name . '</span></a>

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

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

Что нам понадобится:

1.Основа разметки -itemprop=”comment” itemscope itemtype=”http://schema.org/Comment”
2.Всего комментариев – itemprop=”interactionCount”
3.Автор комментария – itemprop=”creator”
4.Дата комментария – itemprop=”commentTime”
5.Текст комментария – itemprop=”commentText”

 

1.Найдите файл comments.php и в нем ищите блок в котором происходит вывод комментариев. У меня этот блок расположен после условия if ( have_comments() ) :  Так вот к этому div добавьте атрибуты itemprop=”comment” itemscope itemtype=”http://schema.org/Comment”. 

У меня это выглядит вот так:

<div class="comment_section animate" data-anim-type="fadeInUp" data-anim-delay="600" itemprop="comment" itemscope itemtype="http://schema.org/Comment">

2.Далее можно указать количество всех комментариев, найдите место где используется функция comments_number. И добавьте itemprop=”interactionCount”

Получится примерно так:

<h3 id="comments" itemprop="interactionCount">Комментариев к записи:
 <?php comments_number ('Нет', '1', '%' );?></h3>

Боюсь, что оставшаяся часть вывода комментариев будет разной в зависимости от шаблона. Поэтому попробуйте найти самостоятельно в каком месте у вас выводится Автор комментария, Дата и Текст

И добавьте в местах вывода те атрибуты, которые я написал в списке выше. Принцип везде один, думаю разберетесь.

Микроразметка изображений (картинок)

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

Конечно если кого-то устраивает такой вариант, то пожалуйста. Нужно добавлять к тегам img атрибут itemprop=”image”‘. 

Но есть функция, которая делает микроразметку изображений автоматически. Возьмите код функции и вставьте его в файл functions.php. Вставить можно в конце перед ?> 

Код функции:

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');

Добавили? Славненько. теперь вмикроразметка картинок будет происходить автоматически.

Микроразметка контактных данных

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

Тем более это несложно, просто заполните примерно такой шаблон и вставьте его в разделе Об авторе или Контакты.

Название – <span itemprop=”name”>Здесь название блога</span>
Индекс – <span itemprop=”postalCode”>Здесь индекс</span>
Населенный пункт – <span itemprop=”addressLocality”>Здесь населенный пункт</span>
Улица – <span itemprop=”streetAddress”>Здесь адрес</span>
Телефон – <span itemprop=”telephone”>Здесь ваш телефон</span>
Электронная почта – <span itemprop=”email”>Здесь ваш e-mail</span>

* e-mail доменного имени типа info@site.ru (не mail.ru, gmail.com, yandex.ru и т.д.)

 

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

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

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

Как вам статья? Получилось начать внедрение микроразметки? Отпишитесь в комментариях.

 

С уважением,
Артем Губтор

Читайте также:

Как ускорить свой сайт

Как защитить сайт от взлома