Микроразметка для сайта – размечаем главную страницу, статьи и страницы (часть 1)

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

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

А если учесть тот факт, что современные сайты созданы на языке PHP и то, что мы видим в исходном коде, – это результат выполнения функций из отдельных файлов. Ух ты, как запутано. Но разобраться во всём этом можно, главное, понять алгоритм.

Для чего нужна микроразметка на сайте

Как я уже сказал выше, мы стараемся сделать наши сайты удобными для посетителей и для поисковых роботов. Для посетителей и для роботов мы создаём карты сайта. Посетителям мы стараемся показать всё лучшее на нашем сайте, стараемся сделать удобное меню и вывеси популярные материалы. И это нужно делать!

Но, для робота мы тоже делаем всё возможное. Создали карту сайта, создали инструкции в файле robots.txt, с указанием на что не стоит тратить время при посещении сайта. И робот, придя на сайт, руководствуется картой, robots.txt и не тратит строго лимитированное время впустую на индексацию системных файлов, а берётся сразу за наши статьи. И что? Открывает статью, а там чёрт ногу сломит! А ведь ему нужно перелопатить весь этот код и найти лишь только самое важное (заголовок, текст статьи, автора, дату, категорию, изображение, комментарии).

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

Какие форматы микроразметки выбрать для сайта или блога

На текущий момент существует несколько форматов микроразметки:

— Микроданные;

— Микроформаты;

— Schema.org;

— OpenGraph;

— RDFa.

И если поисковые роботы Google сканирует все форматы микроразметки, то роботы Яндекса, пока отстают в этом вопросе.

И поэтому мы будем использовать микроразметку формата Schema.org. Её понимает и Гугл и Яндекс.

Что необходимо размечать на сайте

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

— Главной страницы;

— Статей;

— Страниц.

А более сложные моменты оставим на закуску.

Какие элементы нужно размечать

Узнать, что конкретно нужно будет размечать, нам поможет «Мастер разметки структурных данных», входящий в набор инструментов веб-мастера Google. Но прежде чем приступить, советую прочесть мою статью «Как подтвердить авторство в Гугл», и решить вопрос с авторством. От этого зависит вид сниппета в поисковой выдачи Гугл и безопасность вашего контента.

Как создать микроразметку для главной страницы, статей и страниц

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

Шаг 1.

Открываем «Инструменты для веб-мастеров» > «Другие сервисы» > «Мастер разметки структурных данных».

Теперь нужно выбрать категорию (тип данных) и ввести адрес вашего сайта. Мы всё будем делать на примере моего блога, поэтому выбираем категорию «Статьи» и вводим адрес главной страницы. Нажимаем кнопку «Начать разметку»

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

Если каких-то элементов у вас нет, оставляете их без внимания. Разметив все элементы, нажимаете на кнопку «Создать HTML».

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

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

Шаг 2.

Теперь полученные коды микроразметки нужно внедрить в наш исходный код. И всё было очень просто, если бы сайт был написан на чистом HTML. Но, у нас же PHP, а здесь всё гораздо сложней.

Предупреждение: сделайте резервное копирование тех файлов, с которыми будете работать.

Так как мы размечали главную страницу, то нам нужен файл, отвечающий за эту страницу. И это файл – index.php.

Итак, открываем это файл в административной панели WordPress (у кого другие системы, действуйте по аналогии). А вообще, я всегда использую для редактирования, редактор NotePad++. Ну это кому как удобно.

А теперь, главное, быть внимательным. Для начала нужно сообщить роботу, о заголовке (шапке) блога WordPress. Как правило в шапке имеется название и описание сайта. Для этого ищем блок div с идентификатором id="content" или классом class="postcont" и в этот блок добавляете вот эту строчку:

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

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

А так же к заголовку сайта, он обычно обозначен тегом h1 добавить вот этот код микроразметки:

itemprop="headline"

а к описанию сайта добавьте этот код:

itemprop="description"

Далее нужно указать роботу откуда начинается анонс статьи и обозначить все основные элементы.

Для этого внимательно смотрим на исходный код, предложенный мастером, и ищем в файле index.php блок div с классом (class) или идентификатором (id) определяющим внешний вид материала. Здесь главная задача найти именно начало статьи.

Обратите внимание, как выглядят эти классы в HTML и PHP коде. Есть некоторое различие, правда ведь. Так вот, вам нужно вставить код именно в это блок div, обращайте внимание на такие мелочи. Самый простой способ ориентироваться по классам, они будут присутствовать и в HTML и в PHP коде.

В блок начала статьи вставляем такой вот код:

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

Далее ищем блок, в котором выводится дата создания материала. Опять же ориентируйтесь на класс. Смотрите на предложенный мастером вариант вставки кода и ищите класс оформления.

В это блок вставляем вот этот код:

itemprop="datePublished"

И не забудьте изменить формат даты. Иначе, Яндекс будет выдавать предупреждение, что не понимает других форматов кроме Y-m-d.

Следующим этапом нужно обозначить раздел статьи. Действия те же. Но в моём случае для обозначения категории (раздела) нет, ни каких классов. И если у вас такая же ситуация, следует действовать следующим образом.

В PHP коде находите фрагмент, отвечающий за вывод раздела, как правило, это:

<?php the_category(', ') ?>

и заключаете этот фрагмент в теги SPAN. А в этот тег вставляете код микроразметки. Должно получиться так:

<span itemprop="articleSection"><?php the_category(', ') ?></span>

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

<span itemprop="author" itemscope itemtype="http://schema.org/Person" >
<a href="Ссылка на автора" target="_blank">
<span itemprop="name" ><?php the_author() ?> </span></a></span>

Далее размечаем заголовок статьи. Так как это главная страница, то все заголовки статей скорей всего будут обозначены тегом H2. А значит, ориентируемся по ним. Найдя этот тег, в PHP коде, вставляем в него это код:

itemprop="name"

Так же советую включить в микроразметку и ссылку, скрытую под заголовком материала. Для этого в тег ссылки (<a>) вставьте это код:

itemprop="url"

Идём дальше. У кого есть миниатюра к материалу, как у меня, то следует включить это изображение в разметку. Я покажу как я сделал в моём шаблоне, возможно, у вас будет всё проще. Вывод миниатюры, — это чистый код PHP. Его не получится заключить в теги СПАН, здесь нужно внести изменения в код, так как код микроразметки должен быть внутри тега <img>, отвечающего за вывод изображения.

В качестве микроразметки для изображения используйте вот этот код:

itemprop="image"

А вот как его вставить в работу PHP кода:

<?php if ( function_exists("has_post_thumbnail") 
&& has_post_thumbnail() ) {the_post_thumbnail(array(260,200), 
array("class" => "alignleft post_thumbnail","itemprop" => "image"));} ?>

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

И в заключение нужно включить в микроразметку текст статьи. Но здесь опять же есть свои особенности. Если Гугл понимает всё, то для Яндекса нужно ещё кое-чего добавить.

Итак, смотрим на мастера разметки и ищем ориентир. Я имею ввиду класс оформления. Нашли, и вставляете в это блок вот этот код:

itemprop="articleBody description"

description нужен для Яндекса, поэтому делайте именно так. Иначе будет ошибка в валидаторе микроразметки Яндекс.

Ну вот главная страница размечена, по этой же схеме делаете микроразметку для статей и страниц. За статьи отвечает файл single.php за страницы page.php. Пример ручной разметки страниц предлагаю посмотреть здесь.

Ну а теперь пришло время посмотреть на результат. Проверку будем проводить и в Гугле и в Яндексе.

Для начала откроем проверку микроразметки в Google и посмотрим на результат.

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

Как видите, ошибок нет. Но если у вас в Яндексе выплывают не ошибки, а предупреждения, вроде такого:

Это означает, что в вашем шаблоне присутствует микроразметка другого формата, и Яндекс её не понимает. Вы можете удалить эту разметку, а можете и оставить. Это не будет ошибкой. Зато Гугу, наверняка по этой разметке уже работает с вашим блогом. Посмотреть это можно в кабинете веб-мастера Гугл в разделе «Вид в поиске».

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

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

Желаю всем удачи.

P.S. также посмотрите полный список типов микроразметки.

С уважением, Максим Зайцев.