Полное руководство по работе со структурированными данными. Микроразметка: что нужно знать SEO-специалисту о словарях и синтаксисе Микроразметка адреса компании

26.05.2017 Время прочтения: 30 минут

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

С чего все началось?

Единая схема форматов семантической разметки сайтов, которую мы сейчас все знаем и применяем, появилась в 2011 году при поддержке таких гигантов, как «Google», «Yahoo!» и «Microsoft» (позже присоединился четвертый игрок – «Яндекс»). До этого разметка данных существовала в разных форматах и не было единой структуры. К примеру, у «Yahoo!» был сервис под названием «SearchMonkey», который уже в 2008 г. позволял размечать данные на странице и формировать уникальные сниппеты в поисковой выдаче своего поисковика.

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

Что такое структурированные данные?

Структурированные данные – это информация, которая представлена в единой и корректной форме с соблюдением определенного комплекса правил.

Расписывать принципы работы с каждым словарем мы не будем, разберем подробнее лишь три из них: Json-ld, Opne Graph и schema.org.

Начнем с популярного словаря по микроразметке schema.org. Результат коллаборации Google, Yahoo!, Microsoft и Яндекса активно развивается и регулярно обновляется и по сей день. На момент создания статьи в словаре имеются описания для 589 типов документов, 860 свойств объектов и 114 специфичных значений. Полный список всех свойств перечислен в виде разветвленной иерархии на этой странице.

Основной высший тип сущности в словаре schema.org - Thing , который, в свою очередь, делится на несколько других подтипов. Некоторые из них:

• CreativeWork – общий набор правил для описания творческой деятельности: статьи, книги, фильмы, фотографии, программное обеспечение, и т.д.;
• Event – набор правил для событий, которые произошли или произойдут в определенный период времени: встречи, концерты, выставки и т.д.;
• Intangible - сервисный класс, который включает в себя несколько нематериальных вещей, таких как размеры, рейтинги, описания рабочих вакансий, услуг и т.д.;
• Organization – набор правил для разметки организаций, полный список разных видов бизнеса перечислен на странице localBusiness . Также можно посмотреть этот список в справке Яндекса https://yandex.ru/support/webmaster/supported-schemas/address-organization.html ;
• Person – сущность используется для описания живых, умерших, вымышленных личностей или персонажей;
• Place – набор правил для чего-то, что имеет фиксированное физическое положение (здание, парк, памятник и т.д.);
• Product – это все, что создается для продажи. Например, пара обуви, билет или автомобиль.

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

У большинства тегов в словаре есть варианты применения в виде примерного куска HTML-кода или JSON-LD скрипта. Ниже мы рассмотрим примеры разметок страницы со статьей (article), товаром (product) и организацией (organization).

Шаблон микроразметки статьи с помощью schema.org

Чаще всего размечаются такие микроданные как URL, datePublished, dateModified, headline, image, author, publisher и др. Рассмотрим на конкретном примере:

Примеры микроразметки статьи с помощью schema.org ИМЯ ФАМИЛИЯ "ШИРИНА ЛОГО В ПИКСЕЛЯХ" height= "ВЫСОТА ЛОГО В ПИКСЕЛЯХ" src= "ССЫЛКА НА ИЗОБРАЖЕНИЕ ЛОГОТИПА" alt= /> НАЗВАНИЕ СТАТЬИ ОПИСАНИЕ СТАТЬИ ИМЯ АВТОРА ЗАГОЛОВОК H1 "ШИРИНА ПРЕВЬЮ В ПИКСЕЛЯХ" height= "ВЫСОТА ПРЕВЬЮ В ПИКСЕЛЯХ" src= "ССЫЛКА НА ИЗОБРАЖЕНИЕ ПРЕВЬЮ" alt= "АЛЬТЕРНАТИВНОЕ ОПИСАНИЕ ПРЕВЬЮ" /> ОСНОВНОЙ ТЕКСТ СТАТЬИ ДОЛЖЕН БЫТЬ ЗДЕСЬ

Подобной схемы придерживаются большинство размеченных статей. Стоит обратить внимание, что в данном примере часть тегов указываются в разделе (мета-описание и ссылка на автора в g+), а остальная часть прописывается в теле HTML-документа. Некоторые теги использовать не обязательно, к примеру, статья отлично будет себя чувствовать и без разметки тегами articleBody или publisher , но тогда вряд ли пройдет проверку на валидность в инструментах Яндекса или Google .

Изображение 3. Пример страницы в выдаче с микроразметкой статьи в Google. Рядом со статьей отображается дата публикации.

Изображение 4. Пример страницы в выдаче по тому же запросу, что и на изображении 3, только в Яндексе. Дата отображается справа, сверху указывается дата публикации или создания, а ниже дата изменения.

Шаблон микроразметки товарной карточки с помощью schema.org

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

СОДЕРЖАНИЕ H1 "ССЫЛКА НА ИЗОБРАЖЕНИЕ" title= "СОДЕРЖАНИЕ H1" > СТОИМОСТЬ В РУБЛЯХ УКАЗЫВАЕМ ДОСТУПНОСТЬ ТОВАРА ОПИСАНИЕ ТОВАРА

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

Изображение 5. Пример из выдачи Google с указанием цены в формате «ОТ» и «ДО».

Шаблон микроразметки организации с помощью schema.org

Последний шаблон, который мы рассмотрим, – это разметка организации (organization). Обычно эту разметку применяют для структурирования информации на странице контактов.

НАЗВАНИЕ ОРГАНИЗАЦИИ УЛИЦА , ГОРОД , ОБЛАСТЬ . "ССЫЛКА НА ЛОГОТИП" /> Телефон: НОМЕР ТЕЛЕФОНА

У schema.org весьма объемный словарь. Из-за этого во время работы с ним могут возникать трудности, но далеко не все теги в разметке обязательны и от большинства можно отказаться. В приведенных примерах я указал самые основные теги, которые могут использоваться во время работы с разметкой schema.org, однако их может быть намного больше.

У Google есть специальный инструмент для разметки страниц по словарю schema.org. С его помощью создавать разметку страниц намного проще.

Изображение 6. Пример из Яндекса. Дополнительная информация об организации отображается под описанием страницы и может быть внедрена как вручную, с помощью разметки, так и с помощью сервиса Яндекс.Справочник.

Плюсы и минусы микроразметки schema.org

• Большой словарь, который постоянно обновляется;
• Поддерживается всеми популярными поисковыми системами;
• Код не скрыт скриптами и целиком находится в контенте страницы;
• Улучшает отображение сниппетов в поисковой выдаче;
• Можно найти разметку практически для каждого сайта;
• Существуют плагины для автоматизации формирования микроразметки;
• Активно развивается и дополняется.

• Большое количество схем микроразметки может отпугнуть неподготовленного пользователя;
• Нужны начальные знания верстки и изменения кода страниц;
• Усложняет HTML-код, что замедляет разработку сайта;
• Вся официальная справочная документация на английском языке;
• Не для всех свойств есть примеры использования на официальном сайте.

Инструменты для работы с микроразметкой schema.org

В работе с микроразметкой schema.org пригодятся такие сервисы, как:

• Инструмент для проверки структурированных данных от Google;
• Помощник по микроразметке страниц по словарю schema.org от Google. По итогу получаем HTML-код страницы с уже внедренной микроразметкой;
• Проверка семантической разметки от Яндекса;
• Официальный сайт разметки;
• Неофициальный перевод сайта schema.org на русский язык;
• «All In One Schema.org Rich Snippets », «Wprichsnippets.com », «Schema App Structured Data » - плагины для WordPress, которые формируют семантическую разметку schema.org автоматически;
• Notepad++ - или любой другой текстовый редактор.

Данный протокол разработал «Facebook» для улучшения отображения сниппетов ссылок с внешних сайтов в социальных сетях. Это, наверное, один из самых простых и небольших словарей микроразметки. Начать внедрение разметки можно с четырех основных свойств:

• og:title - заголовок страницы.
• og:type - тип объекта, например, «music.album»(альбом). В зависимости от типа поддерживаются и другие свойства. Все возможные характеристики тега type перечислены на официальном сайте .
• og:image - URL изображения.
• og:url - канонический URL объекта.

Все теги разметки «Open Graph» прописываются в контейнере .

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

• og:audio – URL на аудиофайл, если при открытии страницы воспроизводится музыка.
• og:determiner - слово, которое появляется перед названием этого объекта в предложении. Тип enum (a, an, the, "", auto). Если выбрано auto, потребитель данных должен выбирать между "a" или "an". По умолчанию - " " (пусто). Тег наиболее актуален для англоязычного сегмента в связи с использованием различных артиклей вида «a», «the», «an» и т.д.
• og:description – описание страницы, разрешенное количество символов от 160 до 295 знаков.
• og:locale – язык и страна. Формат отображения language_TERRITORY, по умолчанию стоит en_US. Для русскоязычного сегмента прописывается тег ru_RU.
• og:locale:alternate – альтернативный язык или страна.
• og:site_name – название сайта.
• og:video – URL видео.

Шаблон разметки страницы Open Graph

Ниже представлен пример HTML-кода со всеми возможными свойствами, на практике часть из указанных тегов не указывается и хватает стандартных четырех свойств:

ЗАГОЛОВОК СТРАНИЦЫ ...

Плюсы и минусы микроразметки Open Graph

Последний вид разметки и структурирования данных, который мы рассмотрим, – JSON-LD. Расшифровывается это страшное название как «JavaScript Object Notation Linked Data». За разработку формата ответственен «Консорциум Всемирной Паутины» или, другими словами, «W3C». Данный формат выполняет все ту же функцию, что и schema.org, но немного другим способом: он структурирует данные помощью JavaScript, что в несколько раз облегчает работу.

Один из плюсов этого формата в том, что для описания данных используется словарь schema.org. Таким образом, с помощью скриптов JSON-LD мы можем описать любой вид сущностей и улучшить отображение своего сайта в поисковой выдаче, затратив на это минимальное количество времени. Причем сделать это можно без внедрения HTML-тегов в тело страницы, нужно лишь указать в контейнере , а затем расписать все необходимые условия разметки и закрыть скрипт .

Для наглядности сравним разметку schema.org и JSON-LD:

Кроссовки

Кроссовки { "@context" : "https://schema.org/" , "@type" : "Product" , "price" : "100.00" } Кроссовки

Шаблон разметки статьи с помощью JSON-LD

Пример разметки с помощью JSON-LD я взял на основе микроразметки статьи в schema.org из этого же материала выше. Использованы все те же свойства.

НЗАГОЛОВОК СТАТЬИ //Указывается тип скрипта, в нашем случае это ld+json { "@context" : "https://schema.org" ,//Прописывается библиотека, которой будет размечена страница "@type" : "Article" ,//Указывается тип сущности "mainEntityOfPage" : { //Прописывается ID статьи, обычно просто указывается ссылка на статью "@type" : "WebPage" , "@id" : "ССЫЛКА НА СТАТЬЮ" }, "url" : "ССЫЛКА НА СТАТЬЮ" ,//Прописывается каноничная ссылка на статью "datePublished" : "ДАТА ПУБЛИКАЦИИ" ,//Указывается дата публикации "dateModified" : "ДАТА ИЗМЕНЕНИЯ" , //Указывается дата изменения "headline" : "ЗАГОЛОВОК H1" , //Прописывается заголовок "image" : { "@type" : "ImageObject" , "url" : "ССЫЛКА НА ПРЕВЬЮ" , //Вставляется ссылка на изображение для превью статьи "height" : ВЫСОТА ПРЕВЬЮ В ПИКСЕЛЯХ , //Прописывается высота и ширина изображения в пикселях "width" : ШИРИНА ПРЕВЬЮ В ПИКСЕЛЯХ }, "articleBody" : "" , "author" : { "@type" : "Person" , "name" : "ИМЯ АВТОРА" ,//Указывается имя автора "url" : "ССЫЛКА НА ПРОФИЛЬ АВТОРА (G+, ПЕРСОНАЛЬНАЯ СТРАНИЦА НА САЙТЕ)" //Прописывается ссылка на профиль автора в Google Plus или на персональную страницу на сайте }, "publisher" : { "@type" : "Organization " , "name" : "НАЗВАНИЕ ОРГАНИЗАЦИИ" ,//Указывается название организации "logo" : { "@type" : "ImageObject" , "url" : "ССЫЛКА НА ЛОГОТИП" ,//Указывается ссылка на логотип компании "height" : ВЫСОТА ЛОГОТИПА , //Прописывается высота и ширина логотипа "width" : ШИРИНА ЛОГОТИПА } } } ЗАГОЛОВОК СТАТЬИ

Возникает закономерный вопрос: что же лучше schema.org или JSON-LD? Тут нельзя дать однозначный ответ. Работать с микроразметкой в формате JSON-LD проще и приятнее, чем все с тем же словарем schema.org в HTML-формате, но и у него есть свои минусы. Например, поисковик Google советуют использовать эту технологию для разметки своих страниц. А вот с Яндекс ом есть проблемы: данный вид разметки пока не отображается в результатах поиска из-за скриптов, хотя страницы с разметкой JSON-LD и проходят проверку на валидность.

Поисковая система Яндекс не показывает в поисковой выдаче информацию, размеченную с помощью мета-языка JSON-LD.

Изображение 8. Письмо из техподдержки Яндекса по поводу планов насчет JSON-LD. За скриншот спасибо пользователю Oleh Holovkin .

В данном случае нужно правильно расставить приоритеты. Если нужны расширенные сниппеты в Яндексе и Google, то используем старую добрую разметку schema.org; если мы ориентируемся на Запад и наша основная поисковая система только Google, то разметку JSON-LD нужно брать и внедрять без промедлений.

Плюсы и минусы микроразметки JSON-LD

• Формат несколько проще по сравнению с schema.org;
• Рекомендуется Google;
• Для движка WordPress есть качественные плагины для работы;
• Благодаря JavaScript разметка «невидима» для рядового пользователя в отличие от HTML;
• Скрипт помещается только в контейнер без внедрения дополнительных строчек кода в тело сайта;
• Проходит валидацию в официальных инструментах проверки Яндекса и Google.

Как еще можно разметить сайт?

Те способы разметки, что перечислены выше, относятся к непосредственному вмешательству в исходный код страницы, однако есть и другие методы структурирования данных. Это Data Highlighter (Маркер) от Google и «Товары и цены» от Яндекса. С помощью этих инструментов можно напрямую из панели веб-мастеров расширить сниппеты страниц в поисковой выдаче.

Изображение 9. «Маркер» в Search Console и сервис «Товары и цены» от Яндекса.

Маркер Google

Для того, чтобы начать разметку, нужно:

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

• Мероприятия
• Местные организации
• Обзоры книг
• Приложения
• Продукты
• Рестораны
• Статьи
• Телесериалы
• Фильмы

Изображение 10. Панель выбора типа информации для разметки в Search Console.

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

Изображение 12. Кнопка для удаления неверно определённой страницы для разметки в Search Console.

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

Изображение 13. Пример списка уже размеченных страниц с помощью Маркера Google.

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

Плюсы и минусы микроразметки с помощью Маркера от Google

• Разметка без вмешательства в исходный код страниц;
• Инструмент находится непосредственно в Google Search Console;
• Страницы размечаются полуавтоматически;
• Можно группировать страницы по типам;

• Разметка будет отображаться только в поисковой выдаче Google;
• Инструмент не всегда корректно размечает информацию;
• При разметке крупного сайта много ручной работы.

Сервис «Товары и цены» Яндекса

Сам по себе этот инструмент не совсем относится к привычному понимаю микроразметки страниц, так как обычно в Яндексе он применяется для загрузки информации о товаре в Яндекс.Маркет в YML-формате. Как ни странно, Яша смог найти применение данному виду информации о товаре, и сейчас в органической выдаче часто встречаются сайты, размеченные с помощью этого сервиса. Главная особенность «Товаров и цен» – это отображение в поисковой выдаче Яндекса цены на товар/услугу справа от ссылки на сайт.

Изображение 14. Пример отображения цены услуги в выдаче Яндекса с подключенным сервисом «Товары и цены».

Применять сервис «Товары и цены» могут не только интернет-магазины, но и организации, которые предоставляют услуги. В данном случае придется создавать YML-документ вручную.

Итак, для того, чтобы подключить сервис «Товары и цены» в Яндексе, нужно:

Добавить свой сайт в веб-мастер Яндекса и перейти в сервис «Товары и цены»;

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

Изображение 15. Яндекс предлагает ознакомиться с форматом YML и руководством по подключению.

Плюсы и минусы инструмента «Товары и цены» Яндекса

• Сильно отличает сайт от других конкурентов в поиске, увеличивает CTR;
• Пользователь до перехода на сайт получает информацию о стоимости услуги/товара;
• Помимо цены в YML-документе указываются другие параметры, которые также учитываются при формировании сниппета;
• В большинстве популярных движков сайтов генерация файла происходит в автоматическом или полуавтоматическом режиме.

• Результаты с ценами будут видны только в выдаче Яндекса;
• Выгрузка YML-документа предусмотрена не во всех CMS;
• При частой смене цен на сайте требуется регулярная генерация документа;
• Трудозатратно, если нужно разметить большое количество страниц вручную.

Инструменты для работы с сервисом «Товары и цены» Яндекса

В отличие от Маркера Google для работы с YML-файлом потребуется следующие инструменты для работы:

• Список движков сайтов с возможностью выгрузки YML-документов;
• Генератор YML-документа для формирования файла вручную;

Итог

Внедрение разметки структурированных данных – это важный шаг, который впоследствии может повысить CTR сайта в поиске и улучшить отображение контента в поисковой выдаче. Существует несколько способов разметить свой сайт, но на сегодняшний момент самым проверенным считается внедрение разметки schema.org, так как остальные методы имеют либо ограниченный функционал, либо размечаются в пределах одной поисковой системы.

У каждого способа разметки данных есть свои достоинства и недостатки, перед началом внедрения следует трезво оценить свои возможности и выбрать наилучший вариант. Отдельные методы разметки можно комбинировать друг с другом, к примеру, Open Graph с schema.org и «Товарами и ценами» от Яндекса. И помните: наличие микроразметки на сайте не гарантирует изменение поискового сниппета в выдаче, в первую очередь это облегчает сканирование сайта поисковиками.

Статью подготовил: Абдуллин Константин, Технолог SEO-эксперт компании сайт

Приветствую, дорогие читатели и гости блога! Полагаю, вы слышали о таком понятии как микроразметка сайта, если нет, то садитесь поудобнее, и приступайте к изучению этой обширной темы. На данный момент самым популярным форматом микроразметки в Рунете является Schema org.

Сразу предупрежу, что в этом посте я не буду учить вас как сделать микроразметку, так как это довольно обширная тема. Я лишь расскажу вам об основных ее типах. О том как сделать микроразметку на блоге WordPress я написал .

Микроразметка schema org

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

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

Существует несколько типов микроразметки, но не все они поддерживаются поисковой системой Яндекс.

Микроразметка schema org это стандарт, который объявили Google, Bing и Yahoo в 2011 году. Немного позднее и Яндекс принял ее в свои ряды. Вот собственно видео в котором Яндекс наглядно показывает зачем нужна микроразметка.

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

Все доступные классы можно посмотреть на официальном сайте schema.org . Сайт англоязычный, но есть неполная версия русскоязычного перевода по адресу . Кстати, если вы отлично владеете английским языком, то можете помочь проекту с переводом.

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

В настоящее время Яндекс поддерживает микроразметку schema.org и микроформаты.

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

На момент написания статьи Яндекс поддерживает следующие микроформаты:

• hRecipe – описание кулинарных рецептов;
• hCard – разметка контактной информации;
• hReview – разметка отзывов;
• hProduct – разметка товаров;

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

Гугл в отличии от Яндекс поддерживает все виды микроразметки. Это и плюс, и одновременно большой минус. Дело в том, что большинство шаблонов WordPress, которые находятся в бесплатном доступе взяты с западных источников, и соответственно разработаны по правилам google. Они ведь ориентируются на него, а не на Яндекс. В таких шаблонах уже внедрена микроразметка, например, vCard и Open Graph.

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

Конечно, ребята с Яндекс могли бы настроить своих роботов, чтобы те понимали все основные способы микроразметки как Google, но Яндекс не дурак. Эти ребята любят, когда львиную долю их работы делают web мастера. Отказом понимать устаревшие типы микроразметки, они убивают сразу двух зайцев – заставляют создавать сайты по самым современным стандартам и экономят свои ресурсы.

Пример микроразметки сайта

Правильно размеченный сайт значительно выделяется в сниппете поисковой выдачи. К таким выделениям можно отнести:

• рейтинг чего-либо – статьи, фильма или товара;
• текстовое выделение рубрики, так называемые «хлебные крошки»;
• изображение рецепта;
• медиа;
• адрес и контактная информация;
• дата публикации материала;
• количество сообщений в топике;

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

Вариант 1.

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

Вариант 2.

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

Вариант 3.

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

Если вы имеете хоть какое-то представление в HTML коде, то предлагаю взглянуть на два варианта отображения контактной информации. Первый вариант без микроразметки, второй с внедренной разметкой Schema.org

Вариант без разметки:

Офис Васи
Контакты:

Адрес: Ленина, 26,
143350,
Москва,

Телефон: +7 495 123–45–67,
Факс: +7 495 234–56–78,
Электронная почта: [email protected]

А вот вариант с внедренной микроразметкой

Офис Васи
Контакты:

Адрес:
Ленина, 26
143350
Москва ,

Телефон: +7 495 123–45–67 ,
Факс: +7 495 234–56–78 ,
Электронная почта: [email protected]

А вот во втором примере поисковый робот так же как и человек, четко понимает, что написанные цифры, это телефон, а рядом стоящие слова это адрес компании.

Плагин для микроразметки WordPress

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

Итак, плагин называется Schema Creator by Raven . Просто скачиваем и активируем его на своем блоге.

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

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

Как видите плагин Schema Creator by Raven достаточно прост и не требует каких-то особых настроек. Но все же минус у него есть, это постоянное редактирование новых записей. Если же вы внедрите микроразметку Schema org в шаблон блога, то все будет размечаться автоматически. Соответственно экономится время.

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

В предыдущей мы вкратце рассказали, что такое микроразметка, и для чего она может использоваться. В этой статье мы от теории перейдем к более наглядным моментам и покажем, как микроразметка внедряется в сайт, и что это дает в итоге. Для примера мы возьмем словарь семантической разметки http://schema.org как наиболее популярный и официально поддерживаемый всеми основными поисковиками. Кстати, существует русскоязычная версия словаря (http://ruschema.org), разрабатываемая энтузиастами. Не такая полная, как оригинал, но внимания достойна.

Как сделать микроразметку и куда прописать нужные атрибуты

Теперь непосредственно к делу. О том, куда прописываются данные, на которые будет обращать внимание поисковая машина. Для начала — три атрибута, которое должны быть использованы абсолютно всегда:

• указывает поисковому боту на то, что на странице присутствует объект, на который стоит обратить внимание;
• itemtype находится после itemscope и описывает, к какому типу относится упомянутый объект. Перечень возможных объектов можно увидеть в соответствующем разделе словаря (http://schema.org/docs/full.html);
• , который описывает свойства данного объекта.

Вновь обратимся к примерам самого Яндекса. Перед нами кусок кода, описывающий фильм «Аватар».

Как видим, атрибут появляется в теге , где и заключена информация о фильме. Сразу за ним появляется itemtype , отсылающий к объекту Movie (http://schema.org/Movie). Атрибуты прописываются, в данном случае, внутри тегов и .

Иногда значение itemprop само может означать отдельную сущность, в таком случае атрибут itemscope будет находиться внутри уже одного существующего. Это делается употреблением itemscope сразу после itemprop. Например:

Как видим, во внутреннем теге находятся данные о режиссере фильма, которые можно представить как тип объекта Person. Следовательно, такие данные о человеке, как имя или дата рождения будут относиться именно к Person, а не к «материнскому» объекту Movie, так как находятся внутри соответствующего блока .

В какие теги заключается микроразметка

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

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

Тег используется для ссылок, которые видны пользователям. Если внутри тега заключить url , ссылающийся на сторонний сайт, то поисковой машине будет легче понять, что именно за информация находится у вас на странице. Например, можно дать ссылку на статью в Википедии:
Другой способ указать поисковику на ссылку – это употребления тега с атрибутом href:
Различие его от тега заключается в том, что ссылку не увидят посети
тели сайта.

Кроме того, использование тега полезно для так называемых перечислений, то есть свойств, которые имеют ограниченное количество значений. Например, интернет-магазин с помощью микроразметки может указать на наличие товара на складе. Возможные значения в этом случае, согласно schema.org: in stock (в наличии), out of stock (нет в наличии), pre-order (на заказ). С помощью тега эту информацию можно оформить следующим образом:

Если бы мы не указывали на значение InStock, то предпоследняя строчка могла выглядеть так:

Уже в продаже!

Но, расширив функции микроразметки, в этом случае мы тег заменили на < link> , превратив его в невидимую ссылку.

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

Время или продолжительность описывается тегом < time> с атрибутом datetime. Например, на скриншоте ниже, время начала концерта описывается значением startDate:

Еще один пример использования микроразметки

В заключении приведем пример использования микроразметки на сайте, на котором вы сейчас находитесь, а также эффекта, который эта микроразметка дает. Речь идёт об атрибуте AggregateRating для объекта типа Article, то есть для статьи. Под каждой статьей размещен виджет рейтинга статьи, в коде которого присутствует «невидимый» тег со следующими атрибутами:

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

Это один из множества примеров использования микроразметки. Она может пригодиться для сайта любой тематики, и улучшить его представление в поисковиках, будь то товары, мероприятия, кулинарные рецепты, отзывы, словарные статьи и так далее, и так далее. Поэтому рекомендуем внимательно изучить schema.org и найти там атрибуты, которые позволят ссылке на ваш сайт выделиться на фоне конкурентов и привлечь больше посетителей.

Не пропустите: