Микроразметка для Яндекса и Google

Здравствуйте уважаемые начинающие веб мастера. Сейчас мы очень подробно рассмотрим, как делается семантическая разметка (микроразметка) блога в формате microdata (словарь schema.org ).

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

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

Теперь же займёмся тем, что рекомендуют применять ПС Яндекс и Google, а так как для нас они всё равно, что Олимпийские боги для греков, то постараемся выполнить их рекомендации, и будет нам высокое местечко в поиске.

А рекомендуют они формат microdata, с использованием словаря schema.org.

Schema.org, по своей структуре, здорово напоминает HTML. В отличие от гипер разметки, в нём вместо понятия тег введено понятие "сущность".

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

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

Так же как и HTML, Schema.org схематичен. То есть, в нём есть основной тип, наподобие тега <html>, в который входят другие типы, являющиеся уже как бы дочерними.

Эти дочерние типы, тоже имеют своих дочек, и каждая из них имеет свои свойства.

Самую полную схему schema.org, можно посмотреть здесь.

И ещё, размечая что либо, не обязательно вначале указывать основную сущность DataType. Достаточно выбрать соответствующую вашему контенту, и если в ней есть необходимые Вам значения, то использовать только её.

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

А чтобы узнать значения какой-то конкретной сущности, нужно в адресе, во вкладке браузера, убрать docs/full, и вставить её название.

Откроется страница со всеми свойствами, которые этой сущности, называемой ещё типом, принадлежат.

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

Для начала хочу предупредить, что внедрение microdata, дело довольно таки канительное, так что запаситесь терпением и внимательностью.

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

Для этого открываем в браузере 3 вкладки:

1. Главную страницу блога

2. Одну из статических страниц.

3. Одну из Записей.

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

А точнее, на этом этапе, нас будет интересовать участок от открывающего тега <body>, до начала текста статьи.

Если у Вас Главная не статическая, а по умолчанию с выводом анонсов, то до начала этих анонсов.

Все <link>, <meta> и <script>, находящиеся выше, можно пропустить.

Сначала находим все теги заголовков, имеющиеся на страницах. Можно нажать комбинацию клавишей Ctri-U, и воспользовавшись поиском, поочерёдно ввести туда h1 и h2, и посмотреть, где в коде они находятся.

Скорее всего у Вас, как и у меня, на Главной в H1 будет id="site-title", то есть название сайта, которое выводится в шапке, а в H2 — заголовок статьи, или заголовки блоков с анонсами, возможно и описание сайта.

Теперь посмотрим на заголовки в статической страницы. В нём уже id="site-title", может быть заключено просто в блог div, а в H1 заголовок статьи. В Записях так же.

Между ними, на всех страницах, находятся id="site-description", id="navigation" и, кроме Главной, class="meta" — вывод автора и даты записи.

У многих шаблонов class="meta" отсутствует и на статических страницах.

Внимательно просмотрите, какие классы заданы заголовкам и блокам на всех трёх страницах.

Для чего всё это нужно? А для того, что внедрять разметку мы будем в файлах шаблона, написанных на php, и в них нам нужно будет находить элементы html кода, которые я указал выше.

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

Начнём с Главной. Открываем ещё одну вкладку Консоль — внешний вид — редактор. Начинаем разметку с файла header.php.

Открываем файл, находим открывающий body, и вставляем в него следующий код:

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

Выбор схемы семантической разметки

Тем самым определяем, что это творческое произведение.

Затем, чуть ниже находим тег <wrapper>, и вставляем в него код указывающий, что это произведение — блог.

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

И сразу после этого, в блоке <header> определяем, что начинается заглавная часть (шапка) страницы.

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

WP — сокращённо Web Page.

Семантическая разметка шапки блога

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

У меня по низу, так что если у Вас не так, то чуть погодя вернётесь, а пока продолжим.

У меня дальше идёт site-title (название сайта). Смотрим как оно записано в коде страницы, и находим такой же код в header.php.

Причём в файле он может немного отличаться от того, что на странице. Может быть он записан как id="site-title", или h1, а может и точно так же.

Как бы то ни было, находим и вставляем в него атрибут

itemprop="name"

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

Затем идёт описание сайта, выводящееся в шапку — site-description. В него вставляем атрибут

itemprop="description"

Микроразметка описания сайта

Следующее — горизонтальное меню. Нам нужно указать тип к которому оно относиться.

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

Меню может называться по разному. Может быть access, может navi, или ещё как. Смотрим в коде страницы, и находим в header.php.

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

На этом в header.php всё. Дальше начнётся статья страницы, а она находится в файле page.php, или как у меня в файле loop-page.php.

Чтоб не ошибиться, снова смотрим код страницы, ищем id="content", H2, какой класс ему задан, и находим эти теги с такими же классами в файлах шаблона.

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

Чтоб не вышло путаницы, Статическую Главную лучше сделать вообще без заголовка. Хватит названия сайта в шапке.

Статьи на всех страницах размечаются одинаково, и лучше это сделать при помощи Мастера микроразметки Google Инструменты для веб-мастеров.

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

Вы введёте адрес страницы, и Мастер покажет, какой атрибут куда в статью вставить.

Покажет он это в коде страницы, а Вы как в предыдущих примерах, найдёте нужные блоки в файлах шаблона, и вставите разметку.

Если кому-то всё же нужно описание работы с Мастером разметки, то в интернете полно материала, но повторяю: всё настолько просто, что разберётся даже ребёнок.

А я лишь подскажу: что то, что касается страниц, располагается в файлах со словом page, а то что касается записей — в файлах со словом single. Но может оказаться и в functions.php.

А вот что он не покажет, так это как переделать дату публикации, в нужный формат ISO 8601. Если дата у Вас выводится с тире между цифрами, то скорее всего всё в порядке.

А вот если после цифр стоят точки, то формат придётся переделывать, иначе Яндекс его не поймёт, и Валидатор будет выдавать ошибку.

Да и Мастер разметки Вам покажет дату с тире.

В последних версиях WP, формат даты меняется просто: Консоль — настройки — Общие.

Для древних версий, чтобы изменить формат, идём в корень сайта wp-includes — general-template, и воспользовавшись поиском, находим функцию get_the_date.

В этой функции находится переменная $d=‘‘. Вот в эту переменную нужно вставить Y-m-d, что будет соответствовать формату ISO 8601. Сохраняем.

Функция вывода даты

Теперь можно обновить страницу блога с датой, и посмотреть: обновился ли формат.

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

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

Кто-то ковыряет один файл, и всё получается, кому то приходится лазить в два файла, а мне пришлось покопаться в трёх.

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

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

Идём в файл comments.php, находим там блок <div id="comments">, и вставляем в него код:

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

WebPageElement потому, что у этого типа, есть свойство счётчика interactionCount.

Опускаемся немного вниз, находим блок заголовка <h3 id="comments-title">, и вставляем в него атрибут с этим свойством.

itemprop="interactionCount"

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

В файле comments.php всё. Можно почистить кеш и посмотреть в валидаторе, как парсер обработает Вашу страницу. Если не сделали грубых ошибок, то там появиться число комментариев.

Теперь нам нужно найти блок с комментарием. Это оказалось сделать гораздо сложнее. Веб-инспектор показывал код, которого не было ни в одном файле шаблона.

Веб-инспектор

С большим трудом удалось найти в файле functions.php, код выводящий блок комментария.

Вывод комментария

Вставляем в него код разметки указывающий на то, что дальше пойдут комментарии. Обратите внимание, что здесь тип UserComments, вложен в атрибут itemprop="comment", который принадлежит типу WebPageElement

itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/UserComments"

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

И дальше, в этом же файле, вниз по коду, находим <div class="comment-author"> и вставляем в него:

itemprop="creator"

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

Следующий по коду будет <div class="comment-meta commentmetadata"> (дата), но его немного подождём размечать, и опустимся сразу до <div class="comment-body"><?php comment_text(); ?></div>

Это текст комментария. Размечается так:

itemprop="commentText"

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

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

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

Значит возвратимся вверх к <div class="comment-meta commentmetadata">, и переделаем следующие строки:

Вывод даты комментария

То есть разделяем вывод даты и времени.

Вывод даты и времени комментария

После этого заключаем вывод даты в тег span, и вводим в него разметку

itemprop="commentTime">

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

Обновляем файл. В functions.php на этом всё.

Но это ещё не всё с датой. Яндекс понимает только один формат даты: ISO 8601, синтаксис — Y-m-d. И если он у Вас не задан, как было у меня, то придётся лезть в исходники.

Через FTP, или менеджер хостинга, заходим в корень блога — wp-includes — comment-template.

Находим в этом файле функцию function get_comment_date, и в ней переменную $d=‘‘

Функция вывода даты

Вставляем в неё аббревиатуру Y-m-d, сохраняем, и вот на этом всё. Теперь можно идти в Валидатор Яндекс и посмотреть на то, что у нас получилось.

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

У меня получилось нормально. Надеюсь так же получится и у Вас.

Осталось сделать разметку сайдбара, и подвала.

Для разметки боковой колонки, открываем файл sidebar.php, и в первом блоке div, у кого-то это может быть id=»sidebar», а у кого-то, как у меня, id связанные с виджетами, из которых эта колонка состоит, добавляем код разметки.

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

Микроразметка боковой колонки блога

Для разметки подвала, открываем файл footer.php, и так же в первом div, в основном это id=»footer», вводим код разметки для подвала.

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

Семантическая разметка подвала

Но не думайте что на этом семантическая разметка сайта закончена. Наверняка у Вас на страницах есть ещё полно html.

Это картинки, ссылки, возможно заголовки h2 и h3. Все их можно разметить прямо в редакторе, переведя его в режим Текст.

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

И ещё я Вам посоветую заходить на сайты с расширенными сниппетами, со звёздами, просматривать их код страниц, внимательно изучать их микроразметку, и внедрять на своём сайте.

Желаю высоких позиций в поиске.

Неужели не осталось вопросов? Спросить

Перекур

Новым тренером сборной Англии по футболу станет Олег Романцев. С ним подписан контракт на 1 миллион долларов. Сейчас Романцев ищет деньги.

Трое неизвестных забрали у прохожего паспорт и порвали. Теперь неизвестных четверо.

Микроразметка WordPress < < < ◊ > > > Ошибки schema.org

Запись опубликована в рубрике SEO. Добавьте в закладки постоянную ссылку.

3 комментария на «Микроразметка для Яндекса и Google»

  1. Геннадий говорит:

    переименуйте Article в WebSite

  2. stariс говорит:

    Я уже год не заглядывал в микроразметку своих сайтов. Только что посмотрел и ошибок подобных вашим не увидел. Ни в Google, ни в Яндексе. Скорее всего обновление тут не при чём. Парсер указывает на конкретные ошибки, которые нужно исправить. Другое дело если указаые атрибуты в коде картинки у Вас есть, но парсер почему-то их не видит. Возможно тогда ошибку нужно искать выше. Короче с ходу не скажешь, нужно копать по коду страницы (правая клавиша) и выискивать несоответствие со схемами. Работа кропотливая, но полезная. В поиске по коду страницы используйте сочетание клави Ctrl+F (поиск).

  3. Алексей говорит:

    с недавним обновлением микроразметки от 9 декабря у всех на блогах появились новые ошибки Подскажите как можно все поправить?

    image [ImageObject]:

    height: отсутствует (обязательное)

    url: отсутствует (обязательное)

    width: отсутствует (обязательное)

    Для image указан недопустимый URL.

    publisher: отсутствует (обязательное)

    dateModified: отсутствует (рекомендуется)

    mainEntityOfPage: отсутствует (рекомендуется)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *