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

Начнем со словарей

Как уже упоминалось выше, наиболее распространенными словарями микроразметки являются Open Graph и Schema.org .

По статистическим данным Яндекса известно, что словарь Open Graph используют 15% всех сайтов рунета. Этот показатель является преобладающим среди всевозможных словарей для микроразметки. Сегодня разметку Open Graph понимает не только facebook, как это планировалось сначала, но и многие другие популярные социальные сети, такие как Google+, Twitter, Вконтакте и т.д. На своем официальном сайте создатели Open Graph заявляют, что создание данного словаря - это возможность представления данных веб-страницы как социальных граф. Стоит отметить, что язык строился на основании уже существующих технологий.

В свою очередь, язык микроразметки Schema.org создавался совместно с крупнейшими поисковыми компаниями Google, Yandex, Bing, Yahoo!. Основная цель, которую преследовали разработчики - дать пользователю возможность увидеть в сниппете выдачи дополнительные данные о компании не заходя на сайт, и, таким образом, сделать поиск более быстрым и удобным. Со Schema.org сниппет содержит более полное описание страницы, может включать рейтинг, выводить стоимость «от и до», включать разметку хлебных крошек и т.д.

Если рассмотреть принцип работы словаря микроразметки Schema.org более детально, то можно увидеть, что веб-страница представляет собой схему из разных типов данных. Каждый такой тип соединен с набором свойств. Типы иерархически организуются в схемы. На официальном сайте Schema.org можно найти утверждённые и действующие типы и их свойства. Для примера рассмотрим alternateName , description , image .

В свойстве alternateName, в основном, излагается текстовая информация, в которой указываются псевдонимы (алиасы) описываемого объекта. В свойстве description представляется описание того объекта, о котором идет речь, а в image может отображаться изображение или ссылка на изображение товара (услуги) о котором(ой) идет речь.

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

• itemscope - описывает каждый блок отдельно, позволяет описать информацию на уровне сущности;
• itemtype - указывает тип сущности;
• itemprop - позволяет указать дополнительные свойства. Например, сущность — кинопремьера. В таком случае можно указать название, дату, место проведения.

Помимо Open Graph и Schema.org . существуют и другие, менее популярные словари:

• FOAF (Friend of a Friend) - словарь основан на идее связей между людьми, вещами, их отношением друг к другу;
• Data-Vocabulary.org - словарь разрабатывался командой Google до Schema.org. На сегодня разработка данного словаря остановлена, а разработчики Data-Vocabulary.org перешли в Schema.org;
• Dublin Core - словарь, созданный для библиотечных нужд в далеком 1995 г., имеет набор базовых параметров;
• Good Relations - словарь, созданный для описания товаров из сферы торговли в интернете, позволяет описывать товар, его цену, место, где его можно приобрести.

Микроразметка для разных типов сайта

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

Интернет-магазин

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

Товарные страницы

В Schema.org для разметки товарных страниц используются схемы Product и Offer или AggregateOffer в Schema.org/Product . Информация продуктовых страниц может быть представлена в виде структурированных сниппетов с описанием товара и ценой в выдаче Яндекса.

Для этого необходимо в коде указать поля name, offers, price, pricecurrency и т.д. Например:

Контакты

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

Отзывы

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

Код выглядит следующим образом:

Картинки

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

Код выглядит следующим образом:

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

Информационные порталы и СМИ

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

Новостные страницы в большинстве своем используют мультимедийный контент. Поэтому, наиболее часто используемый язык микроразметки Schema.org/Article размечается следующими атрибутами:

• itemscope itemtype=http://schema.org/WPHeader - указывает на общий контент;
• itemscope itemtype=http://schema.org/Article - указывает на тело статьи;
• itemprop=»name» - обозначает заголовок;
• itemprop=»author» - авторство;
• itemprop=»datePublished» (Обязательно время в формате «Y-m-d») - дата публикации;
• itemprop=»articleBody» - текст статьи;
• itemprop=»articleSection» - рубрика;
• itemprop=»image» - изображение.

Видеохостинг

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

Соответственно, код будет представлен следующим образом:

Также, не стоит забывать, что не всегда пользователи ищут фильм конкретно по названию. В поисковую строку они могут вводить имя актёра или режиссёра, к примеру. Поэтому, для того, чтобы сайт показывался в выдаче по данным запросам, необходимо использовать разметку Schema.org/Movie , которая позволит получить структурированный сниппет в Яндексе. Для этого необходимо указать подробные данные о фильме: название, жанр, описание, актеров и т.д.

Коммерческий сайт

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

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

Адекватность семантической разметки на страницах сайта можно проверить при помощи Валидатора микроразметки от Яндекса или Google . Они поддерживают все известные форматы микроразметки, в том числе OpenGraph и Schema.org.

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

Что такое семантическая разметка?

Подходящего определения на просторах Интернета мне найти не удалось, поэтому я его решил составить его из 4 наиболее подходящих определений.

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

Получилось немного замудрено… Однако из данного определения мы понимаем, что семантическая разметка - это некие правила, подчиняющиеся определенным стандартам или словарям. Которые, в свою очередь, призваны помочь поисковым системам (и не только) понимать содержимое страниц сайтов.

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

Виды разметки данных

Data Vocabulary - стандарт разметки данных, которая разрабатывала компания Google до июня 2011 года.

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

Dublin Core, или Дублинское ядро - стандарт, разработанный в 1995 году. Семантика Дублинского ядра была создана международной междисциплинарной группой профессионалов библиотечного и музейного дела, компьютерных наук. Представляет собой набор из метатегов, 15 основных и 3-х дополнительных свойств.

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

FOAF, или Friend of a Friend - «друг друга» - стандарт, созданный Либби Миллером и Дэном Брикли в 2000 году. Используется в основном для домашних страниц и социальных сетей. Решает задачу построения связей между людьми и объединению их.

Microformats, или же микроформаты - стандарт, созданный в 2005 году сообществом заинтересованных энтузиастов из WC3.

Данный стандарт был очень популярным до появления Schema.org и на многих сайтах используется до сих пор. На момент написания статьи Яндекс поддерживает следующие Microformats: hCard - формат разметки контактов (адресов, телефонов и т.д.); hRecipe - формат описания кулинарных рецептов; hReview - формат разметки отзывов.

Вроде со стандартом определились, с синтаксисом тоже.

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

Теперь давайте разберем, какие данные на сайте стоит разметить и какие поддерживаются поисковыми системами на данный момент (так как поддерживаемых сущностей с каждым днем становится всё больше).

Более подробно разберем три наиболее встречаемых примера:

Разметка карточки товаров schema.org

Товарные карточки - размечаем по сущности Product. Реализация данного вида поможет получить нам следующий сниппет в Яндексе:

Не путать с товарным сниппетом в выдаче Яндекса, полученным при использовании.yml файла из Яндекс.Маркета или сервиса «Товары и цены» вебмастера Яндекса.

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

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

Теперь перейдем к реализации разметки кулинарных сайтов.

40 мин.

Название рецепта

Порций 6

6шт.
Яйцаbr>

400гр.
Сахарный песок

……………………И т.д ингредиенты……………………………

100гр.
Какао

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

2100

Victory

.....

В Гугле наш красивый сниппет:

Мы разместим скриншот снипетта в Яндексе, когда информация обновится (ориентировочно через две недели).

UPD от 05.06.2017: Как и обещали, добавляем скрин из Яндекса:

Полезные ресурсы о schema.org

1. Валидаторы микроразметки:
   • Валидатор от Яндекса https://webmaster.yandex.ru/tools/microtest/
   • Валидатор от Google https://search.google.com/structured-data/testing-tool/
2. Поддерживаемые стандарты и форматы Яндекса: https://yandex.ru/support/webmaster/site-content/data-transmit.xml
3. Ускорить появление размеченной информации в Google вам поможет инструмент « ».
4. Посмотреть, как выглядит определенная страница в выдаче, вам поможет оператор site:адрес проверяемой страницы. Работает как в Google, так и в Яндексе.
5. Также от компании Гугл есть прекрасный инструмент «Мастер разметки структурированных данных» - https://www.google.com/webmasters/markup-helper/?hl=ru
6. Для стандарта Open Graph от компании Facebook:

Всем привет!.org.

Говорить мы будем в основном о поисковой системе Гугл, но и Яндекс не обойдем стороной. Разберем все нововведения schema.org и выясним отношение к ним ведущих поисковиков.

Вы в курсе, что Гугл обновил свое понимание schema.org? Я долго подбирал заголовок для данного материала и вот что подумал.

Что, если бы у меня была возможность задавать несколько заголовков для статьи. Так вот, если бы у меня была такая возможность, то я бы составил следующие заголовки:

Начнем с этого: «Schema.org не дает веб-мастерам спокойно спать».

Можно так: «Новая микроразметка — кто компенсирует затраты на фрилансеров».

Или так: «Обновление микроразметки — Яндекс и Гугл снова не договорились».

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

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

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

Лирика

Мне вообще удивляет заявленная позиция поисковиков в вопросе микроразметки.

Яндекс помощь : Цель семантической разметки – сделать интернет более понятным, структурированным и облегчить поисковым системам и специальным программам извлечение и обработку информации для удобного её представления в результатах поиска.

Т.е, МЫ, за свои деньги, должны облегчить поисковым системам жизнь. Умно! Ничего не скажешь.

Еще мне понравилось определение Википедии, хотя, конечно, она здесь не причем, но все же:

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

О как! Оказывается мироразметка — это помощь веб-разработчикам, к коим я и себя отношу. Ну что же, спасибо за помощь, теперь не зарастет народная тропа. Но мне искренне жаль тех людей, которые во второй раз будут обращаться ко мне по вопросам внедрения микроразметки.

А что же Гугл? Гугл в своем репертуаре! Он заявляет, мол мы же для Вас лучше делаем, внедряйте микроразметку и наш робот будет лучше понимать Ваши сайты. Заметьте, что пока все нежно и ласково.

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

Понимание и доверие — это язык любви, который к политике не имеет никакого отношения.

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

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

Я нашел в сети интересное высказывание ведущего специалиста отдела качества поиска Google Джона Мюллера (John Mueller)

Процитирую отдельные отрывки:

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

Как Вам? Вот еще:

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

Вот собственно само интервью, правда на английском.

Запись интервью Джона Мюллера

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

Переходим к технической части нововведений Schema.org. Поехали!

Обновленная библиотека "schema.org/Article" для Google

Библиотека элементов schema.org/Article применяться для разметки статей, идеально подходит, как для моего блога, так и для многих других, поэтому я и взял ее на вооружение.

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

В блоке «Article», для проверяемой страницы, я обнаружил аж 203 ошибки:

Теперь давайте разберемся, что это за ошибки.

Во-первых, появится ошибки в разметке изображений:

В моем случаи именно изображения стали виной такого количества ошибок. Почему? Объясню немного позже.

Во-вторых, валидатор укажет на недостающие поля:

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

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

Так вот, в свою очередь, все мини библиотеки должны быть размешены в теле главной библиотеки — schema.org/Article.

Для наглядного примера покажу, как у меня выглядит весь блок микроразметки в файле single.php:

"/>

автор:

Это еще не все! У нас еще остались ошибки в разметки изображений.

Поле "image" и библиотека "schema.org/ImageObject"

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

Ну да ладно не будем о грустном, с помощью php мы сделаем это в два счета.

В прежней структуре разметки достаточно было в тело тега "img" добавить атрибут itemprop="image":

Теперь же структура гораздо сложнее, вот пример:

Создается отдельное поле "image" в котором указывается библиотека "schema.org/ImageObject". Кроме того, в рамках поля "image", необходимо прописать дополнительные мета-поля "width" и "height" и указать в них размеры изображения.

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

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

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

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

Function mayak_image_marking($content) { global $post; $pattern = "

Вместо нее вставляем другую:

Function mayak_filter_image($content) { $ar_mk = "!!si"; $br_mk = ""; $content = preg_replace($ar_mk, $br_mk, $content); return $content; } add_filter("the_content", "mayak_filter_image");

Данная функция разметит все изображение в теле статьи, но если вы хотите разметить только первое изображение, то надо будет изменить строчку №4:

$content = preg_replace($ar_mk, $br_mk, $content, 1);

Идем смотреть результат:

Все отлично! Больше ошибок нет.

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

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

Если вспомнить историю появление микроданных, когда 2 июня 2011 года Google, Yahoo! и Microsoft объявили о внедрении Schema.org и опубликовали соответствующую библиотеку, то Яндекс присоединился к ним только 1 ноября, т.е, на пол года позже.

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

Успехов всем! До встречи!

С уважением, Виталий Кириллов