Семантическая микроразметка "Яндекса": как сделать и проверить. Мастер разметки структурированных данных

Здравствуйте, уважаемые посетители моего блога!

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

Речь пойдёт о микроразметке сайтов и блогов. Я расскажу, что такое микроразметка, зачем она нужна и как её установить на свой веб-ресурс.

Итак, начну по порядку.

Что такое микроразметка?

Микроразметка — это разметка веб-страниц с использованием специальных тегов и атрибутов.

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

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

В настоящее время есть следующие разновидности микроразметки: микроформаты, RDFa и микроданные:

Ну а теперь вкратце о каждом виде разметки.

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

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

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

Микроданные

Это способ разметки, актуальный для веб-ресурсов, созданных на HTML5. Этот вид разметки также способен выделить специальные и наиболее важные данные.

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

При разметке html-страниц применяются тоже, как и в микроформатах, HTML-теги и . С помощью этих элементов и свойств важным данным, на которые мы хотим сделать акцент, присваиваются определенные краткие описания.

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

Ребята, я не стал подробно описывать каждый тип микроразметки, так как основные читатели моего веб-ресурса блогеры. И если у вас есть блог, вам будет достаточно создать на нем один вид микроразметки. Какой? Читайте дальше и все узнаете.

В настоящее время специалисты таких поисковых систем как и советуют каждому вебмастеру внедрить один из типов микроразметки — микроданные, а именно Schema.org.

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

Преимущества микроразметки

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

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

Он в основном содержит в себе описание данной страницы, фото, контактные данные, цену товара и его рейтинг и т.д.

Плюсы микроразметки

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

• лучше выглядит сниппет в результатах поисковой выдачи;

• повышение количества кликов пользователей по ссылке вашей статьи;

• увеличение релевантности страниц блога;

Использование микроразметки

Теперь рассмотрим более наглядно преимущества в использовании микроразметки микроданных. Я буду брать примеры из поисковой системы Google. Там можно более наглядно это увидеть.

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

Видеоролики в сниппете (изображение видео):

Мероприятия в сниппете (дата и название мероприятия, место проведения):

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

Подробную информацию о установке и дальнейшей настройке микроразметки Вы сможете узнать на официальном сайте гигантов Google и Яндекс. Кроме того, эта информация также представлена на сайте Schema.org.

Микроразметка Schema.org

Микроразметка Schema org — это множество атрибутов, которые применяются для описания наиболее важных данных на веб-странице, которые поисковый робот должен в первую очередь увидеть и обработать.

На сегодняшний день Schema является стандартом для микроданных.

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

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

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

Влияние микроразметки на ранжирование в выдаче

Да, применение микроразметки в большей степени способствует повышению заметности веб-ресурса в результатах поисковой выдачи при ранжировании. Об этом свидетельствует главная цель поисковых систем Google и Yandex: выдать пользователю наиболее релевантную запросу информацию, которую они хотят отыскать.

«Микроразметка поможет вашему сайту стать заметнее в результатах поиска Яндекса. Поисковая система Яндекс заинтересована в предоставлении возможности своим пользователям решать проблемы, используя поисковую строку…»

Относительно поисковой системы Google могу отметить следующее. Я не нашел официальной информации о том, как влияет микроразметка на позиции веб-ресурса в результатах выдачи. Ребята, если у вас есть источник, киньте ссылку в комментариях, чтобы я почитал об этом. Буду очень признателен!

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

Анализ и проверка микроразметки

Валидатор микроразметки

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

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

Валидатор микроразметки Яндекса:

http://webmaster.yandex.ru/microtest.xml

Валидатор микроразметки Google:

http://www.google.ru/webmasters/tools/richsnippets Как я внедрил микроразметку на своём блоге

Да, друзья, все, о чем я писал в сегодняшней статье, не пустые слова, а нужная и полезная информация!

Многие блогеры, которые стремятся быстрее раскрутить свои веб-ресурсы, уже встроили микроразметку. Я тоже понимаю всю важность данного действия, поэтому решил установить на свой блог микроразметку Schema.org. Вариантов для установки новой разметки у меня было два.

Первый — это самостоятельно удалить старые микроформаты hcard и hatom, которые были вмонтированы в мой бесплатный шаблон Incredy, а затем установить микроданные Schema.org.

Второй путь — заказать удаление микроформатов и установку микроданных Schema за деньги.

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

Однако все мои усилия не привели к желаемому результату. Старые микроформаты hcard и hatom не хотели покидать мой блог, и постоянно выбрасывали разные «финты»:

Я начал опять рыться в Интернете, как свинья в огороде, надеясь отыскать заветный желудь. И мне повезло. Я попал на блог webreligion.ru, автором которого является Руслан Белый.

Хочу сказать, что я и раньше был на его блоге (читал его статьи и писал к ним комментарии), так как мы с ним были в одной группе участников блогомарафона «Дружба блогеров», который организовал Константин Белан.

Итак, на блоге Руслана была статья про микроразметку, в которой была представлена очень подробная информация на эту тему. Из его поста я узнал, что удаление старой микроразметки действие сугубо индивидуальное, а также требующее глубоких знаний html и css.

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

Хочу отметить, что Руслан (автор блога webreligion.ru) отлично разбирается в программировании. Очень быстро и со знанием дела удалил старую микроразметку и встроил новую Schema.org. В валидаторах проверки микроразметки Яндекс и Google ни одной ошибки!

Но всё дело в том, что Руслан уже не занимается данной услугой…Поэтому, если Вам нужна микроразметка, то пишите на почту суперпрограммисту, моему партнёру и просто отличному специалисту — Дмитрию Горунину: [email protected]

Так вот ребята. Для чего я все это вам рассказываю? Думаете, что я решил просто развеять вашу тоску или похвалиться своей новой разметкой? Нет! Я просто хочу, чтобы вы не повторяли моих и не лезли в дебри движка , если понятия не имеете о том, что нужно делать и как. Лучше обратитесь к профессионалам, например к Руслану, и не пожалеете об этом.

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

Ну, вот и все. Моя статья подходит к концу. Надеюсь, она вам поможет.

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

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-эксперт компании сайт

Google с Яндексом не дают веб-мастерам спокойно спать - то они вводят новые способы ранжирования сайтов в выдаче – из последних, учет адаптивности шаблона на сайте.
То перестают учитывать ссылочное при ранжировании или вводят какие-то очередные фильтры.
А теперь, дошла очередь до семантической разметки сайта.
Вообще, для Google с Яндексом микроразметка и микроформаты – это основная тенденция в этом году.
Собственно, ее стандарт появился еще в 2011 году, но, если ранее ПС предлагали добавить ее на сайт добровольно, то теперь добровольно-принудительно:), поскольку сайты, не имеющие ее, стали индексироваться хуже, им сложнее попасть в топ выдачи.

Это специальные параметры тегов, которые добавляются в код файлов или текст. Они описывают свойства документа. Если по-простому, этими тегами мы сообщаем поисковому роботу:

«Вот это у меня название статьи, а это изображение, а вот тут идут комментарии.
Это имена комментаторов, а это я, автор сайта, собственной персоной. Не перепутай ничего!».

Из документации Яндекс о микроразметке сайтов:

2. Зачем нужна семантическая разметка сайта?

Она помогает выстроить структурированную иерархию всех данных страницы для поисковых роботов, а также роботов социальных сетей, что улучшит представление сайта в результатах поиска.
Размеченная таким образом страница станет более понятной и прозрачной для роботов всех ПС.
Хотя, представители Яндекса утверждают, что наличие семантической разметки не влияет на позицию сайта, но опыт и наблюдения показывают, что размеченный сайт индексируется ПС намного быстрее и качественнее, а в выдаче показывается на 3-5 позиций выше не размеченных сайтов.
Такая разметка полезна для коммерческих сайтов (всяких-разных сервисов, интернет-магазинов, ресторанов). Также, она помогает продвижению корпоративных веб-ресурсов, самых различных сайтов и блогов.
Сравните сниппеты в выдаче Гугл и Яндекс с микроразметкой и без нее:
Микроразметка Google, рейтинг:




Первый сниппет показывает хлебные крошки, рейтинг, дату публикации.
Микроразметка Яндекс для организаций:




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




Первый сниппет показывает хлебные крошки, дату публикации.
Микроразметка Яндекс, рецепты:




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

3. Какую пользу приносит использование семантической разметки?

Лучшую, более быструю индексацию новых статей и сайта в целом.

Увеличение доверия к сайту со стороны ПС.

Лучшие, более информативные сниппеты в выдаче – за счет показа дополнительной информации: рейтинга, цены, контактных данных (адреса, телефона) и т.п.

Улучшение поведенческих факторов сайта (больше переходов из поисковой выдачи).

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

4. Виды микроразметки

В Google Search Console – есть пункт «Структурированные данные».

Рис 1 – ошибки в микроразметке

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

Рис 2 – ошибки микроразметки Hentry

В нашем случае мы видим, что имеются 106 ошибок, которые относятся к разметке формата hentry (microformats.org)

– микроразметка, встроенная в ядро WordPress. Так как она встраивается автоматически и не адаптирована под сторонние шаблоны - чаще всего работает неправильно, и это приводит к тому, что Google Search Console обнаруживает такие ошибки:

Рис 2.1 – ошибки Hentry: author, entry-title, updated

Но, при этом инструмент для проверки микроразметки от Google – абсолютно спокойно сообщает, что нет никаких ошибок и никаких предупреждений по этому поводу.()

Рис 3 – гугл не видит ошибок hentry

На нашем сайте мы будем использовать признанную всеми поисковыми системами единогласно микроразметку – schema.org .

Этот стандарт поддерживает как Яндекс , так и Google .

Поэтому, встроенную микроразметку hentry, которая в Google Search Console выдает нам 106 ошибок – необходимо просто удалить.

Так как hentry добавляется в ядро wordpress -,что позволяет удалить ее через фильтры, потому как в шаблонах этих классов не видно.

Исходный код для удаления hentry:

Add_filter("post_class", "fc_remove_hentry", 20); function fc_remove_hentry($classes) { if (($key = array_search("hentry", $classes)) !== false) { unset($classes[$key]); } return $classes; }

Код необходимо добавить в functions.php

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

Рис 4 – удаление разметки hentry со всего сайта

После сохранение файла и повторной валидации страницы через инструмент для проверки микроразметки от Google – hentry должна будет пропасть.

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

В Google Search Console вы увидите положительную динамику уменьшения количества ошибок. С течением времени они исчезнут вовсе, остается только ждать.

Рис 5 – положительная динамика уменьшения ошибок hentry

Как удалить ошибку:

ОШИБКА: поле http://ogp.me/ns#image отсутствует или пусто

Рис 6 – ошибка Open Graph ns#image

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

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

В нашем случае на сайте присутствует плагин - SEO Ultimate, который имеет специальный раздел, отвечающий за разметку Open Graph. А это значит, что ошибка связанная с http://ogp.me содержится именно в плагине SEO Ultimate.

Заходим по следующему пути SEO Ultimate -> Open Graph -> Default Values -> Default Image

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

Рис 7 – как исправить ошибку Open Graph ns#image

Добавляем URL адрес картинки, которую бы мы хотели видеть по умолчанию. Напомню что The Open Graph protocol отвечает за вывод красивых постов в социальных сетях, в фейсбуке, твиттере, вконтакте и так далее. То есть эта картинка, которую вы зададите по умолчанию, будет фигурировать в постах социальных сетей, репостах и так далее. Выбирайте брендовую и респектабельную фотографию.

После сохранения изменений – ошибка пропадает.

Рис 8 – ошибка Open Graph ns#article

Но по-прежнему остается ошибка, связанная с неизвестным префиксом article.

Мы с вами уже в курсе, что у нас на сайте установлен плагин SEO Ultimate. Продолжаем копать в этом же направлении.

Рис 9 – как исправить ошибку Open Graph ns#article

Устанавливаем Open Graph Type – Website.

Рис 10 – правильная разметка Open Graph

После всех изменений валидатор разметки Яндекс больше не выдает никаких ошибок:

Рис 11 – валидная разметка Open Graph

Добавляем микроразметку хлебных крошек

Хлебные крошки - это цепочка ссылок от главной страницы до страницы, где сейчас находится пользователь.

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

Рис 12 – хлебные крошки на сайте

Хлебные крошки на сайте присутствуют. Теперь нужно понять, каким образом они выводятся. В исходном коде хлебных крошек находим название плагина, с помощью которого они функционируют - Breadcrumb NavXT 4.0.2

Рис 13 – хлебные крошки выводятся через Breadcrumb NavXT

Открываем админ панель нашего сайта и заходим в редактирование плагина Breadcrumb NavXT.

Рис 14 – Настройки Breadcrumb NavXT

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

В нашем случае нас интересуют:

• Шаблон ссылки на страницу блога
• Шаблон на главную
• Рубрика блога Шаблон
• Шаблон ссылки на рубрику

Все шаблоны имеют стандартный вид типа:

%htitle%

%htitle%

Чтобы получить правильную микроразметку, нам нужно разметить этот исходный код с помощью стандарта http://schema.org/BreadcrumbList

Dresses

Real Dresses

Разберем по порядку, какие элементы содержит разметка, и как их следует применять:

itemscope itemtype=”http://schema.org/BreadcrumbList”

Этот элемент обозначает начало размечаемой области. Все что будет внутри этого элемента – это будет разметка хлебных крошек.

В примере элемент находится внутри нумерованного списка – тег

Это не обязательно, можно использовать , или другие подобные теги.

Нужно смотреть по обстоятельствам и помнить что от того какой тег вы используете такой CSS и подключится к хлебным крошкам. То есть внешний вид ваших хлебных крошек зависит от того в какие теги вы обрамите http://schema.org/BreadcrumbList .

В нашем случае мы добавим эту строку кода через исходный код виджета breadcrumb_navxt_widget.php

Так как через стандартный редактор кода админ панели WordPress это файл недоступен, мы будем использовать фтп доступ через filezilla.

Рис 15 – Настройки виджета Breadcrumb NavXT

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

Рис 16 – код который обрамляет Breadcrumb NavXT

Находим в файле breadcrumb_navxt_widget.php следующий код:

Echo ""; И меняем его: echo ""; //Display the regular output breadcrumb bcn_display(false, $instance["linked"], $instance["reverse"]); echo "";

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

Рис 17 –обозначение разметки BreadcrumbList

Он обозначает новую принадлежность к другому типу данных - schema.org/ListItem

А также он описывает свойство – itemListElement. Это свойство уже относится к размечаемым элементам в хлебных крошках. То есть это свойство нам нужно использовать в нашем исходном коде при выводе непосредственно хлебных крошек.

В нашем случае мы будем использовать это в плагине Breadcrumb NavXT.

В начало кода, отвечающего за хлебные кошки –

%htitle%

Мы добавим строку:

%htitle%

Нужно разметить элемент itemprop=”item”, из примера видим, что он отвечает за разметку URL адреса хлебных крошек.

Добавляем его перед href=”%link%” Получаем в итоге:

Далее размечаем свойство itemprop=”name”, то есть имя, которое соответствует нашему URL адресу, уже размещенному нами. Нам необходимо %htitle%, который в нашем случае отвечает за нужное имя – обрамить свойством itemprop=”name”.

Получаем

%htitle%

В конце нам нужно добавить обозначение позиции элемента в иерархической системе, используя свойство itemprop=”position”.

Для этого добавляем строку кода

Главное – делать все аккуратно и в пределах открытых или

И так, исходя из имеющегося исходного кода:

%htitle%

На основе примера получается следующий код:

%htitle%

Также приведем примеры уже готовых кодов разметки для Breadcrumb NavXT.

%htitle% %htitle%

%htitle%

%htitle%

С Микроразметкой:

%htitle%

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

Рис 18 – валидная микроразметка хлебных крошек

Видео

В последнее время стало популярным размещать данные на сайте в соответствии с определенной структурой. Эти манипуляции - отнюдь не дань моде, а очень удобная разработка, которая навали микроразметкой. Осталось разобраться, для чего она требуется и какие преимущества сайту приносит.

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

Упрощает жизнь роботам

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

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

Упрощает поиск человеку

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

Как выглядит описание при наличии микроразметки:

Как выглядит описание в отсутствие микроразметки:

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

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

Микроразметка может выполняться в соответствии с разными стандартами. Вот наиболее распространенные:

Еще три года назад все крупные поисковики взяли в качестве основного стандарта разметки по смысловому значению вариант Schema.org. Он включает в себя несколько классов, которые описывают разнообразные схемы и их особенности. Составление разметки осуществляется в два захода:

Указывается сама схема разметки;

Выделяются конкретные ее особенности.

Например, нужно создать схему об адресах некоторых организаций.

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

А теперь пропишем выбранную для разметки схему:

Itemscope указывает на то, что между тегами

есть какая-то схема (сущность). Какого типа данная схема, поясняет itemtype . У нас это адрес организации, поэтому присутствует слово Organization . Больше информации о схеме Вы найдете .

Теперь перейдем к описанию особенностей (свойств) схемы.

Атрибут itemprop помогает выделить улицу (т.е. streetAddress ), индекс (postalCode ), город (addressLocality ). Подобным образом составляются и другие схемы.

Для начинающего микроразметчика неплохо было бы проверить, все ли выполнено как следует. Сделать это удобно в Google или в Yandex - по указанным ссылкам Вы перейдете на валидатор микроразметки .

На данный момент ни Яндекс, ни Google не используют возможности Schema.org на полную мощь. Оба этих наиболее популярных поисковика работают лишь с некоторыми сущностями этого стандарта. Можно полагать, что в скором времени их перечень расширится, однако прямо сейчас микроразметки стоит составлять со следующими схемами:

Яндекс	Google
Адреса и организации	Мероприятия
Словарные статьи	Организации
Отзывы об организациях	Поддерживаемые типы приложений
Отзывы об автомобилях	Разметка для видео
Тест-драйвы	Расширенное описание веб-страниц: оценки в отзывах
Картинки	Расширенное описание веб-страниц: рецепты
Видео	Расширенное описание веб-страниц: элементы навигации
Рецепты	Расширенное описание веб-страниц: люди
Описание фильмов	Расширенное описание веб-страниц: музыка
Аккорды	Расширенное описание веб-страниц: отзывы
	Расширенное описание веб-страниц: приложения
	Расширенное описание веб-страниц: товары

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

Вот несколько примеров схем в микроразметке Яндекс :

Адреса и организации

Данная сущность присутствует практически на каждом ресурсе, которая сообщает координаты какой-либо компании. При помощи указанной схемы и пользования сервисом «Яндекс.Справочник» изображение описания в результатах поиска выглядит гораздо информативнее:

Словарные статьи

Сущность, имеющаяся во всевозможных справочниках, энциклопедиях, словарях и д.п. При использовании микроразметки Ваш ресурс подходит для платформы «Яндекс.Словари», которая значительно упорядочивает описание:

Отзывы об автомобилях

Сайты, где имеются отклики посетителей о транспортных средствах, стоит разметить в соответствии со схемой Review - тогда они попадут в приложение «Яндекс.Авто». Вот как будет выглядеть конкретный отзыв:

А таким его увидят пользователи в результатах поиска:

Другие схемы, рассматриваемые Яндексом, описаны .

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

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

Google микроразметка в этом плане продвинулась гораздо дальше. Вот где ее удобно применять.