Что такое микроразметка и чем грозит вебмастерам ее отсутствие?

Автор:
(Людмила Лунева)

Веб-дизайнер и разработчик сайтов на wordpress

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

Содержание:

  1. 1. Что такое микроразметка?
  2. 2. Зачем нужна семантическая разметка сайта?
  3. 3. Какую пользу приносит использование семантической разметки?
  4. 4. Виды микроразметки
  5. 5. В чем разница между Microdata schema.org и JSON-LD schema.org?
  6. 6. Какая микроразметка наиболее популярна в рунете?

↑ 1. Что такое микроразметка?

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

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

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

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

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

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

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

  1. Лучшую, более быструю индексацию новых статей и сайта в целом.
  2. Увеличение доверия к сайту со стороны ПС.
  3. Лучшие, более информативные сниппеты в выдаче – за счет показа дополнительной информации: рейтинга, цены, контактных данных (адреса, телефона) и т.п.
  4. Улучшение поведенческих факторов сайта (больше переходов из поисковой выдачи).

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

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

1. Open Graph
Стандарт Open Graph изобрели для Facebook с целью получить красивое отображение других сайтов в этой социальной сети, когда пользователь нажимает на кнопку «поделиться».
Разметку Open Graph используют Facebook, Pinterest, Вконтакте, Google, LinkedIn+, Twitter и прочие сервисы.
С помощью Open Graph можно разметить следующие свойства: заголовок статьи, описание, изображение и пр.
Яндекс поддерживает разметку Open Graph для передачи данных в сервис Яндекс.Видео, для аудио и некоторых других файлов, а также для формирования заголовков сниппетов.
2. Микроформаты это простые сущности. Они используются для описания информации. У каждой сущности есть свои свойства.
Представьте, что вы написали статью или объявили какое то мероприятие на сайте, например, конкурс комментариев.
Для статьи основными свойствами будут: название, имя автора, дата написания, изображение.
Для конкурса основными свойствами будут: дата проведения, место проведения, время начала.
Микроформаты это одна из самых старых систем микроразметки.
Особенность микроформатов - они не добавляют в HTML-код страницы ничего лишнего, а используют атрибут class элемента, к которому применяются.
Однако, именно эта их особенность стала причиной отказа от использования микроформатов - используя атрибут class, микроформаты создают множество новых CSS классов, которые зачастую конфликтуют с CSS классами шаблона.
Яндекс поддерживает следующие микроформаты:
hCard — контактная информация — адреса, телефоны;
hRecipe — кулинарные рецепты;
hReview – отзывы (они же – блоги);
hProduct — товары.

Многих из этих неудобств лишена разметка Schema. org.
3. Микроразметка schema org - семантическая разметка данных, которую поддерживают все ведущие ПС мира - Google, Bing, Yahoo еще с 2011 года, а Яндекс с недавних пор.
Schema использует более новый современный микроформат.
Google поддерживает практически все схемы schema.org, а Яндекс, пока, только эти:
Адреса, организации
Видео
Вопросы, ответы
Другие творческие работы
Отзывы об автомобилях
Отзывы об организациях
Программы
Рефераты
Рецепты
Словарные статьи
Тест-драйвы
Товары, цены
Картинки
Фильмы

4. JSON-LD – еще один вид разметки.
JSON-LD — это способ передачи связанных данных с помощью текстового формата JSON. Этот формат разработал Консорциум Всемирной паутины (W3C), он считается самым современным видом разметки.
Данные, размеченные с помощью JSON-LD, используются Яндекс.Почтой, но пока не отображаются в результатах поиска Яндекса.

↑ 5. В чем разница между Microdata schema.org и JSON-LD schema.org?

Microdata schema.org добавляется в HTML-код, а для использования JSON-LD достаточно вставить специальный скрипт в контейнер head.
Сейчас, оба этих вида разметки Microdata и JSON-LD считаются наиболее перспективными, хотя, все остальные разметки также пока еще широко используются, особенно в США и западных странах.
А ведь именно на западных сайтах вебмастера находят (в бесплатном доступе или покупают) большую часть тем для WordPress.
Эти темы, как правило, содержат устаревшие типы разметки, которые понимает Google, но не понимает Яндекс - западные разработчики ведь ориентируются именно на Google, который, в отличие от Яндекса, понимает все виды микроразметки.
Когда же владелец сайта устанавливает такую тему на свой сайт, то сайт слабо индексируется Яндексом, поскольку тот не понимает внедренной разметки.
Это сильно усложняет жизнь блогерам и вебмастерам - в рунете, все же, предпочтительнее ориентироваться на Яндекс.
Конечно, всю эту лабуду из шаблона можно было бы вычистить, но, на микроформаты почти всегда завязаны CSS стили, поэтому, при их удалении, сбивается вся верстка.
Кроме вышеперечисленных существуют другие форматы микроразметки - Data Vocabulary, Dublin Core и прочие.

↑ 6. Какая микроразметка наиболее популярна в рунете?

Немного статистики от Яндекса о микроразметке:

Больше 50% запросов к валидатору содержат разметку Schema.org. При этом примерно в 9% валидатор находит ошибки.
Запросы, содержащие микроформат hCard, составляют примерно 20% - ошибки обнаруживаются примерно в 10% случаев.
Около 4% запросов – это RDFa, около 10% примеров содержат ошибки.
OpenGraph составляет всего около 1,5% запросов, ошибок в этом формате практически нет. Всего 1% случаев имеет некорректную разметку.
А порядка 2% запросов – это проверка примеров, расположенных на главной странице валидатора :).

На данный момент, Schema.org это самая популярная семантическая разметка, к тому же поддерживаемая Яндексом.

Комментарии

  1. Очень многим и так давно ясно, что микроразметка важна для сайта. Вопрос стоит в том, как ее правильно сделать. На обычном сайте html сделать не проблема. А вот разметка в вордпресс это немного проблематично, Хотя может многие меня и закидают помидорами за сказанное, но все же это правда.
    Вот к примеру, мне потребовалась разметка комментариев и для нее мне советуют лезть в файл comment-template.php. Но проблема в том, что при обновлении вордпресс приходится опять лезть в этот файл и вносить правки. Есть хаки для файла fuction, но вот они не всем подходят, так как темы у всех разные.
    Лучше бы написали как сделать правильно разметку, чтобы было понятно для новичков. А то, "микроразметка важна", "микроразметка очень важна", а как правильно сделать не написали. И что тогда понту от того что она важна. Вот у вас тоже небольшие проблемы с микроразметкой, пишет "ПРЕДУПРЕЖДЕНИЕ: Не выполнено обязательное условие для передачи данных в Яндекс.Картинки: поле contentUrl или image или thumbnail отсутствует или пусто", вам скорее всего нужно обернуть картинки в ImageObject вот таким образом:
    Картинка
    И у меня тоже все не глатко, с разметкой комментариев проблема, да и не все картинки обернуты в ImageObject

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

      А ссылку в конце поста "Как сделать микроразметку schema org" не заметили :)?
      Что касается предупреждения Яндекса об отсутствии поля contentUrl или image или thumbnail - это противоречивое требование и в данный момент его добавить невозможно т.к. корректный параметр itemprop="url" уже добавлен, а добавить дублирующий параметр нельзя - это не валидно.
      Также, нельзя добавить поле contentUrl к любому другому тегу, так как это поле добавляется только к тегам, содержащим параметр href или src.

      • Заметил! Но разметка на этом не заканчивается. Нужно разметить картинки, разметить содержимое, комментарии и т.д. У вас описано минимум про разметку. Эта тема очень серьезная и если начинать делать, то стараться по полной разметить, но как я уже писал выше, темы у всех разные и подход нужен индивидуальный.

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

    • У меня тоже появлялось предупреждение в валидаторе касательно изображений, указанное в Вашем комментарии выше. Размечено было вот так вначале:
      <img itemprop="Url" src="/images/MyGallery/2013/house_near_the_water.jpg" alt="img02" />
      Результатом чего и стало это самое "ПРЕДУПРЕЖДЕНИЕ:...". Залез в рекомендации яндекса (https://yandex.ru/support/webmaster/supported-schemas/image.xml), после чего поправил разметку вот на такую:
      <img itemprop="contentUrl" src="/images/MyGallery/2013/house_near_the_water.jpg" alt="img02" />
      Валидатор яндекса после этого ругаться перестал и всё вывел как полагается:
      imageobject
      itemType = https://schema.org/ImageObject
      contenturl
      href = http://eterehov.ru/wp-content/themes/Painter3/images/MyGallery/2013/house_near_the_water.jpg
      text = img02

  2. Спасибо за ответ! Буду рад прочитать продолжение этой темы.

  3. Здравствуйте Людмила.
    Вы сами делаете микроразметку на сайтах в теме вордпресс?
    Можно у Вас заказать для моего сайта http://kfs-str.ru/ это и сколько будет это стоить?
    С уважением Александр.

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

  4. Здравствуйте Людмила!
    У Вас много не соответствий в статье.
    1) Яндекс прекрасно понимает Open Graph
    2) Open Graph не имеет не какого отношения к Schema.org
    3) schema.org это форматом
    ld+json это способ передачи данных который включен в Schema.org так же как и Microdata

    • 1) Яндекс прекрасно понимает Open Graph

      Вы правы - исправила.

      2) Open Graph не имеет не какого отношения к Schema.org

      Я этого и не утверждала.

      3) schema.org это форматом

      Что вы имеете ввиду?

      ld+json это способ передачи данных который включен в Schema.org так
      же как и Microdata

      Собственно, я так и написала.
      Цитата из поста:

      JSON-LD — это способ передачи связанных данных с помощью текстового
      формата JSON. Этот формат разработал Консорциум Всемирной паутины
      (W3C), он считается самым современным видом разметки.

      По сути: JSON-LD это способ передачи данных, но одновременно и разметка, поскольку предполагает добавление на сайт js, в который заносятся нужные для передачи данные и, который, собственно, эти данные и передает :).

  5. 3) schema.org это форматом
    Извиняюсь! описался.
    - словарь.
    постараюсь пояснить что имел ввиду
    Возьмём к примеру тип сущности Organization (организация)
    описываем его по schema.org
    Microdata -
    Название компании
    RDFa -
    Название компании
    JSON-LD -
    {
    "@context": "http://schema.org",
    "@type": "Organization",
    ....
    },
    {
    "name": "Название компании",
    }
    Все они используют schema.org.
    Если же читать выше у вас в статье то складывается впечатление что schema.org и JSON-LD это что то разное.
    Из статьи "В чем разница между микроразметкой schema.org и форматом JSON-LD? ↑ " в данном случае справедливей будет заголовок В чем разница между Microdata schema.org и JSON-LD schema.org?
    В остальном за статью спасибо! А так же с наступающим Вас праздником!

  6. В статье расписал основные нововведения от Гугла по локальной микроразметке - http://web-ux.ru/types-and-new-standards-of-semantic-markup/. Думаю, будет отличным дополнением к статье.

Ответ на комментарий

Войти, чтобы написать отзыв.

Внимание: все отзывы проходят модерацию.

Топ комментаторов
АватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватар
Самые комментируемые записи
Самые читаемые записи

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

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

Пользуйтесь кодом только из последних, пришедших вам на Email, писем. Закрыть »

Постов 204
Отзывов 5336