Schema org


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

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

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

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

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

Немного теории для страждующих

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

Словарь — это набор необходимых сущностей, классов и свойств, с помощью которых описывается сайт. Фактически, это язык, на котором мы будем общаться с роботом. Популярные словари — Open Graph, Schema.org и микроформаты. В конкретно этой статье мы познакомимся со Schema.org, а Open Graph таки заслуживает отдельной статьи.


Schema org
Статистика распространённости словарей микроразметки в Рунете по данным Яндекса

Синтаксис — это способ применения словаря, т.е. каким образом мы его будем использовать в разметке.

Мы условились, что в данной статье говорим про Schema.org, что не означает, что использовать нужно только её и больше ничего — хорошим решением считаю использование Schema + Open Graph.

Итак, словарь Schema.org появился в 2011 году по инициативе поисковых систем и поддерживается основными игроками этого сегмента —  Google, Яндекс, Bing и Yahoo!

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

У Схемы есть такая штука как Сущность (Thing), которая состоит из множества подтипов, описывающих контент на странице. Вот несколько типов для примера:


  • Person — тип для описания человека — реально существующего, жившего давно или вообще вымышленного. Just for lulz, разработчики добавили возможность пометить персону как Undead (во славу Нер-Зула, не иначе как). С его помощью можно описать имя, фамилию, возраст, дату рождения и смерти, пол, контактные данные, информацию о работе и кучу другой информации, которую робот поймёт.
  • Product — тип для описания продуктов (но не помидоров-огурцов), которые можно продать/купить. Также к ним относятся некоторые услуги. Покупка билетов, одежда, аренда или услуга парикмахера — это всё сюда.
  • Event — тип для проводимых мероприятий. Можно указать самые важные параметры — место, время, кто будет участвовать и сколько участников будет — ваши посетители не ошибутся.
  • Organization — разметка для организаций. Всё необходимое для этого — адреса, время работы, контактные данные — в наличии.

Для примера привел всего 4 типа, но по факту их больше. Со всеми можно ознакомиться на официальном сайте http://schema.org/docs/schemas.html

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

Приступим, сохранившись.

Создаём микроразметку для статьи


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

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

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

  • Заголовок
  • Время публикации
  • Иллюстрацию к статье
  • Саму статью
  • Автора статьи

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

Schema org

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


Schema org

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

  • author — это поле, которое требует указания автора статьи.
  • datePublished — дата публикации статьи. Здесь нужно остановиться подробнее — для человека понятной датой будет запись типа “20 октября 2017 в 19:40”, но поисковым роботам необходима запись времени в формате стандарта ISO 8601 — выглядит это вот так: 2017-10-20T14:40:38+00:00.
  • headline — заголовок статьи.
  • image — иллюстрация для статьи. И здесь тоже необходимо остановиться — тут нужно не только отметить, что именно это изображение и есть иллюстрация, но и ссылку на изображение, а также размеры в пикселах.
  • publisher — здесь указывается название сайта, который опубликовал данную статью, а также несколько параметров публикатора. Его рассмотрим подробнее ниже.

Есть ещё два необязательных параметра, которые можно не указывать:

  • dateModified — дата изменения страницы.
  • mainEntityOfPage — указываем ссылку на страницу.

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

Примерно таким же образом размечаем время:

Заметьте, у тега time добавляем атрибут datetime, в котором указываем время в формате ISO 8601. С помощью PHP это сделать просто:

Пользующиеся WordPress да используют такой код:

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

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

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

Теперь добавляем в микроразметку автора:

Здесь также замечу, что имя автора мы выделяем с помощью тега span (он для этого идеален) и в него добавляем атрибут itemprop=»author».

Теперь сделаем разметку текста — в тег article добавляем атрибут:

И мы наконец добрались до информации о Публикаторе статьи. Он достаточно многоэтажный и давайте для начала рассмотрим получившийся код:

Как видите, publisher — это то же самое, что и организация. Для неё мы указываем следующие параметры:


  • logo — логотип организации, который размечаем также как и изображение-иллюстрацию для статьи — размечаем изображение и его размеры.
  • Name, telephone и address — простые для понимания параметры. Указываем нужные параметры (в своём примере я взял их из головы).

Один важный момент — зачастую блоги делаются не для СМИ, а для человека и таких данных, как у организации, у него может и не быть. Можно встретить рекомендацию о замене Organization на Person, но в таком случае валидатор Google засчитает ошибку. Всё дело в том, что Google приемлет только Organization в качестве publisher’a. Есть только два выхода — игнорировать или подстраиваться под параметры Organization, что на мой взгляд не является верным решением.

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

В итоге у нас получился вот такой длинный код:

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


Schema org

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

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

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

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

Поэтому, продолжим дальше.

Создаём микроразметку заголовка сайта

Итак, микроразметка для заголовка сайта создаётся примерно также, как для страниц, но имеет меньшее количество настроек. Фактически она описывает информацию о сайте. Давайте посмотрим на минимальный код для микроразметки — он весьма небольшой:

Мы видим, что тип микроразметки называется WPHeader — это расшифровывается не как WordPress, а как Web Page — не давайте ввести себя в заблуждение.

Запускаем проверку на валидность — всё работает. Самое главное, что все параметры передаются с помощью метатегов и нет необходимости скрывать появляющиеся элементы.

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

Всё, что можно добавить в микроразметку заголовка, можно посмотреть здесь: http://schema.org/WPHeader.

Как видите, добавлять их очень просто. Микроразметка для заголовка сайта готова.

Наша работа почти готова — остался последний важный элемент.


Создаём микроразметку для меню сайта

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

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

Тут тоже всё просто — помечаем контейнер с пунктами меню (nav — это каноничный вариант) типом SiteNavigationElement, а во все тэги <a> прописываем атрибут url. Проверяем код в валидаторе — всё отлично, робот видит навигационное меню и список с ссылками на разделы сайта.

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

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

Микроразметка для Нижнего колонтитула сайта (подвал, footer)

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


По своей структуре микроразметка очень похожа на микроразметку заголовков:

В данном примере мы пометили только год (в основном, это текущий год), поскольку в большинстве блогов и сайтов новостей в нижнем колонтитуле можно встретить только его.

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

Как и всегда, все возможные значения можно посмотреть здесь: http://schema.org/WPFooter.

Кстати, если у вас есть что-то, связанное с адресами, то можно добавить вот такую разметку:

Она отлично подойдёт в footer (но это не обязательно).

Микроразметка сайдбара для сайта

Микроразметку для сайдбара (боковой колонки сайта) я поместил последней в том числе и потому, что на мой взгляд она не очень обязательна. Что у нас обычно бывает в сайдбаре? Популярные статьи, последние комментарии, виджеты социальных сетей, реклама и какой-нибудь опрос — вот первое, что приходит в голову. Собственно, мы можем разметить все эти типы элементов, но проще всего — обозначить их в виде логических блоков. Приведём такой пример:


Мы показали роботу — вот у нас тут виджеты социальных сетей и опрос.

А теперь немного о рекламе — для неё существует отдельный тип WPAdBlock. Но в целом, он очень похож на другие разметки, поэтому просто приведу простой код для примера:

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

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

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

anatolykulikov.ru

Хотите, чтобы в результатах поиска в Яндексе или Google описание вашего сайта выделялось среди остальных, было более информативным и привлекательным, чтобы пользователь перешел именно на ваш сайт? Начните использовать семантическую разметку!

Немного предыстории

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

Владельцы сайтов могут передать дополнительную информацию о содержимом своего сайта в поисковые системы. Например, в Яндекс – через Яндекс.Вебмастер и Яндекс.Справочник, в Google – через Инструменты для Вебмастеров и Google Адреса.

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

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

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

Есть другой подход – семантическая разметка сайта!

В 2011 году поисковые системы  Google, Bing и Yahoo, к которым впоследствии присоединился и Яндекс, предложили другой подход: поисковые системы сами будут считывать дополнительную информацию с сайта, если пользователи помогут им и определенным образом «опишут» (или «разметят») смысл этой информации на своем сайте.

Правила такого описания, или «семантической разметки», были собраны  в стандарт и размещены на сайте schema.org, чтобы все желающие могли использовать семантическую разметку на своих сайтах.

Как это работает?

Допустим, что в моем интернет-магазине продаются смартфоны. Я могу добавить на страницу с описанием модели Sony XPERIA Sola MT27i дополнительную семантическую разметку (красным выделены те атрибуты, которые отличают ее от обычной разметки):

С помощью этой разметки я указываю, что описываю товар по определенным правилам:

Указываю, где находится его название и описание, с помощью атрибутов:

Затем указываю рейтинг этого товара (и сколько всего отзывов):

А также – цену и наличие этого товара:

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

Например, после того как Google считает семантическую разметку с моего сайта, он покажет его в результатах поиска с дополнительной информацией (рейтинг, цена, наличие товара):

Schema org

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

Еще несколько примеров

1. Яндекс – Рецепты

Если мы наберем в поиске Яндекса фразу «плов рецепт», то один из обычных результатов поиска будет выглядеть так:

Schema org

Тут все как обычно – заголовок со ссылкой на сайт, краткое описание и снова ссылка на сайт.

А вот другой результат поиска выглядит несколько иначе:

Schema org

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

Все дело в том, что владелец этого сайта добавил на страницы с рецептами дополнительную семантическую разметку по правилам для рецептов (http://schema.org/Recipe).

2. Google – События

Наберем в строке поиска Google текст «концерты в москве». Обычный результат поиска такой:

Schema org

А вот что показывает Google для сайта, у которого есть дополнительная семантическая разметка по правилам для событий (http://schema.org/Event):

Schema org

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

1ps.ru

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

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

Schema org

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

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

Словарь — это своеобразный «язык», набор классов и их свойств, с помощью которых указывается суть содержимого на странице. Например, словарь определяет, с помощью какого термина указывать название — «name», «title» или «n».

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

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

Schema org

В этой статье мы разберем наиболее распространенные словари:

  • Open Graph;
  • Schema.org;
  • Микроформаты;
  • И еще несколько других словарей: FOAF, Dublin Core, Data Vocabulary и Good Relations.

Open Graph — словарь, который разработал Facebook для того, чтобы любой сайт смог стать частью этой социальной сети и красиво в ней отображаться. С помощью OG показываются расширенные ссылки сайтов.

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

Микроформаты разработаны энтузиастами из W3C, которые хотели сделать свой стандарт с использованием базовых элементов HTML. Часто бывают сложности с различием микроформатов и микроразметки — сразу отметим, что это не одно и то же. Микроформаты — это один из словарей микроразметки, так же, как и Schema.org, Open Graph или FOAF. Единственное отличие в том, что микроформаты представляют собой объединенный стандарт синтаксиса и словаря. Тогда как микроразметка, как мы сказали выше, — собирательный термин для способа обогащения страницы семантическими данными.

image

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

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

Open Graph

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

Также разметка Open Graph активно используется приложениями для Facebook — она позволяет пользователям отражать действия из приложений на своих страничках.

Благодаря OG можно смотреть видео, читать краткое описание статьи и быстрее понимать суть информации, которой делятся друзья, просматривая бесконечные ленты новостей. Помимо Facebook разметку Open Graph распознают также Вконтакте, Google+, Twitter, LinkedIn, Pinterest и другие.

Сам словарь достаточно лёгок в применении — для начала использования нужно 4 свойства:

  • og:title — название объекта.
  • og:type — тип объекта, например, «video.movie»(кино). В зависимости от типа можно указать еще другие свойства.
  • og:image — URL изображения, описывающего его.
  • og:url — канонический URL объекта, который будет использован в качестве постоянного ID.

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

<html prefix="og: http://ogp.me/ns#   profile: http://ogp.me/ns/profile#"> <head> <meta property="og:title" content="Юрий Гагарин" /> <meta property="og:type" content="profile" /> <meta property="og:url" content="http://example.com/Гагарин" /> <meta property="og:image" content="http://example.com/" /> <meta property="profile:first_name" content="Юрий" /> <meta property="profile:last_name" content="Гагарин" /> <meta property="profile:gender" content="male" /> ... </head> ... </html> 

Здесь робот распознает, что страница посвящена мужчине по имени Юрий Гагарин, на ней есть ссылка на его фото. Здесь такое свойство как url указывается как канонический URL страницы.

В теге og:type помимо типа «profile» могут быть указаны различные типы сущностей (у которых есть еще свои свойства):

  • Music (подтипы music.song, music.album, music.playlist, music.radio_station) — у песен можно указать длительность, альбом, исполнителя, у альбомов — песни, исполнителей, даты релиза.
  • Video (video.movie, video.episode, video.tv_show, video.other) — у фильмов могут быть указаны актеры и их роли, режиссеры, сценаристы, продолжительность.
  • No vertical (article. book, profile, website) — здесь указаны те типы, которые не подходят к вышеперечисленным категориям. У статьи можно указать теги, автора, даты публикации. У профайлов — пол, фамилию, имя.

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

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

Schema.org

image

Schema.org — это словарь, который появился по инициативе поисковых систем в 2011 году. Его поддерживают Яндекс, Google, Bing и Yahoo!

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

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

Наиболее обобщенный тип сущности — это Thing, у которого есть подтипы. Рассмотрим несколько из них:

  • Action — описывает действие, которое может выполнятся кем-то определенным (человеком или организацией). У этого действия может дополнительно быть указано место, объект и инструменты, с помощью которых оно было совершено. Как у любого действия, у него может быть результат, участники и период времени, в течение которого оно совершалось. С помощью этого класса, описывающего действия, развиваются Яндекс.Острова, а также реализован проект Gmail Actions.
  • CreativeWork — описывает особенности творческих работ. Видео, картинки, рецепты, диеты — все может быть описано с помощью этого типа. У всех творческих работ можно указать автора, жанр, краткое описание, а также отзывы, аудиторию, упоминания и многое другое.
  • Event — как у любого мероприятия, здесь можно описать место проведения, дату, участников, выступающих и т.д.
  • Product — это все, что продается и покупается. Некоторые платные сервисные услуги (как, например, стрижка) тоже могут быть описаны типом Product. У продукта может быть указан рейтинг, бренд, цвет, аудитория, цена, модель и т.д.
  • Person — как указано в документации Schema.org, это может быть человек — живой, вымышленный или уже умерший, — а также «undead» (видимо, создателям нужно было описать еще зомби и не нашлось более подходящего типа). У людей могут быть указаны контактные данные, информация о работе, семье, отношениях и многое другое.

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

Из нашего опыта. Почти год внедрялись 7 новых полей в тип schema.org/PeopleAudience, так как сомнениям политкорректных европейцев и американцев не было предела: «Как можно указывать максимальный возраст целевой аудитории? То, что мужчине за 30, еще не значит, что ему не интересны книжки для маленьких девочек!» Ок, предлагаемые поля maxAge и minAge превращаются в suggestedMaxAge и suggestedMinAge. С полом оказалось тоже все сложно. Убедить в том, что пол может быть однозначно указан не удалось — неполиткорректно. Так что gender превратился в suggestedGender.

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

Также предусматривается возможность расширять словарь по инициативе пользователей и вебмастеров.

Существует публичная рассылка на английском языке public-vocabs@w3.org, созданная для обсуждения общих вопросов, предложений и сообщений об ошибках, куда также можно написать письмо с вопросом о разметке, если у вас не получается что-то внедрить. Есть механизм расширения, а также с мая 2011 года можно использовать списки на внешних ресурсах для указания различных свойств.

Так что если вы хотите принять участие в развитии семантической разметки, в частности словаря Schema.org, у вас такая возможность есть 😉

Пример разметки Schema.org для типа Person:

<div itemscope itemtype="http://schema.org/Person">  <span itemprop="name">Юрий Гагарин</span>  <img src="gagarin.jpg" itemprop="image"/>  <span itemprop="jobTitle">Летчик-космонавт</span>  <span itemprop="colleague">Валентина Терешкова</span>  <link itemprop="nationality"href="http://ru.wikipedia.org/wiki/Россия">Россия  <time itemprop="birthDate" datetime="1934-03-09">9 марта 1934</time>  <span itemprop="memberOf">Военно-воздушные силы СССР</span>  <span itemprop="knows">Сергей Королев</span>  <time itemprop="deathDate" datetime="1968-03-27">27 марта 1968</time>  <span itemprop="award">Герой Советского союза</span>  <a href="http://ru.wikipedia.org/wiki/Гагарин,_Юрий_Алексеевич" itemprop="sameAs">Страница на Википедии</a>  <a href="http://example.com/Гагарин" itemprop="url">Сайт Юрия Гагарина</a>  </div> 

В такой разметке поисковая система распознает, что человек по имени Юрий Гагарин является летчиком-космонавтом и является коллегой Валентины Терешковой. Также указано много других данных: его награда, национальность, дата смерти, знакомства и другие — некоторые из этих свойств можно указать только с помощью словаря Schema.org. Здесь есть две ссылки, размеченные с помощью свойств «sameAs» и «url», где в первом случае указывается страница с достоверной информацией о человеке, а во втором — ссылка на личный сайт.

Хочется еще раз отметить, что Schema.org — это инициатива поисковиков. И развитие словаря будет зависеть от создания продуктов поисковыми системами для сайтов. Поэтому не стоит воспринимать этот словарь как попытку привести к единой онтологии все существующее на свете. Все существующее в интернете — возможно. Но если это будет нужно поисковым системам.

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

Познакомиться с полным описанием словаря можно на официальном сайте. Существует неофициальный и пока неполный перевод стандарта на русский язык на сайте.

Microformats.org

image

Microformats.org (Микроформаты) — это открытый стандарт, созданный в 2007 году сообществом энтузиастов. Это сообщество очень хотело создать стандарт для семантической разметки сайтов, используя ранее существующие технологии. Шесть лет назад это было определенным плюсом стандарта, так как его было проще внедрять, но сейчас добавлять разметку микроформатов не проще, а в некоторых случаях и сложнее других словарей. По сравнению с OG и Schema.org, его используют все меньше и меньше.

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

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

В настоящее время поисковыми системами поддерживаются такие микроформаты:

  • hCard — формат разметки контактной информации (адресов, телефонов и т. д.);
  • hRecipe — формат для описания кулинарных рецептов;
  • hReview — формат разметки отзывов;
  • hProduct — формат разметки товаров.

Их использование дает возможность показывать специальные сниппеты в выдаче.

Один из самых популярных микроформатов — hCard. Микроформат hCard универсален для описания людей и организаций, содержит базовую информацию и о том и о другом.

Используя hcard можно указать такие свойства, как:

  • n — имя;
  • bday — дата рождения;
  • geo — географическое расположение;
  • tz — часовой пояс;
  • uid — ссылка на идентичную сущность;
  • photo — изображение;
  • adr — адрес;
  • org — название организации.

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

 <div class="vcard">  <img class="photo" src="http://example.com/gagarin.jpg" />  <strong class="fn">Юрий Гагарин</strong>  <span class="title">Летчик-космонавт</span> at <span class="org">Военно-воздушные силы СССР</span>  <a class="url" href=http://example.com/Гагарин>Страница Ю.Гагарина</a>  <div class="bday">   <span class="value-title" title="1934-03-09">9 марта 1934</span>  </div>  <span class="note">Первый человек в космосе</span>  </div> 

Здесь поисковой системе понятно, что речь идет об организации либо о человеке по имени Юрий Гагарин — это летчик-космонавт, работавший в Военно-воздушных силах СССР. Также известна его дата рождения и есть заметка «Первый человек в космосе». Свойство url здесь указывает на домашнюю страницу описываемого объекта.

В 2013 была объявлена новая инициатива — microformats 2, в которой есть нововведения в названиях классов и упрощения для использования свойств.

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

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

Другие словари

FOAF

Словарь FOAF (акроним от Friend of a Friend — «друг друга») специализируется на связях между людьми, их взаимодействиях и объединениях.

В нем присутствуют такие классы, как Agent, Organization, Group, Person. У них могут быть различные свойства, описывающие людей или группы в жизни. Есть обычные — age, gender, surname, birthday, а также есть свойства:

  • привязанные к социальным сетям: skypeID, yahooChatID. jabberID.
  • специфичные: например, knows — для описания знакомства людей между собой или myersBriggs, отражающее результаты профориентационного теста Майерс-Бриггс (да, мы тоже только узнали что это такое).

Пример разметки:

<rdf:RDF  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"  xmlns:foaf="http://xmlns.com/foaf/0.1/"  xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#">  <foaf:Person>  <foaf:name>Jimmy Wales</foaf:name>  <foaf:mbox rdf:resource="mailto:jwales@bomis.com" />  <foaf:homepage rdf:resource="http://www.jimmywales.com/" />  <foaf:nick>Jimbo</foaf:nick>  <foaf:depiction rdf:resource="http://www.jimmywales.com/aus_img_small.jpg" />  <foaf:interest>  <rdf:Description rdf:about="http://www.wikimedia.org" rdfs:label="Wikipedia" />  </foaf:interest>  <foaf:knows>  <foaf:Person>  <foaf:name>Angela Beesley</foaf:name> <!-- Wikimedia Board of Trustees -->  </foaf:Person>  </foaf:knows>  </foaf:Person> </rdf:RDF>  

В поиске по блогам от Яндекса используется этот словарь. В него было добавлено свое расширение, помогающее точно описать блоги пользователей (в Рунете в основном используется именно это расширение).

Data Vocabulary

Словарь Data Vocabulary разрабатывался компанией Google. На данный момент он уже не развивается, так как вся разработка плавно перетекла в Schema.org

image

Ранее поддерживались такие типы, как Person, Organization, Breadcrumb, Review, Product, Address — можно сказать, что они стали прототипами классов Schema.org.

Dublin Core

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

Dublin Core появился в 1995 году с базовым набором из 15 элементов, таких как Title, Creator, Subject, Description, Publisher, Rights и др. Сейчас уже множество различных классов и свойств.

В России с 2011 года для него даже действует государственный стандарт ГОСТ Р 7.0.10-2010 (ИСО 15836:2003) «Национальный стандарт Российской Федерации. Система стандартов по информации, библиотечному и издательскому делу. Набор элементов метаданных «Дублинское ядро»»

Пример разметки Dublin Core

<HTML> <HEAD> <TITLE>Song of the Open Road</TITLE> <META NAME="DC.Title" CONTENT="Song of the Open Road"> <META NAME="DC.Creator" CONTENT="Nash, Ogden"> <META NAME="DC.Type" CONTENT="text"> <META NAME="DC.Date" CONTENT="1939"> <META NAME="DC.Format" CONTENT="text/html"> <META NAME="DC.Identifier" CONTENT="http://www.poetry.com/nash/open.html"> </HEAD> <BODY><PRE> I think that I shall never see A billboard lovely as a tree. Indeed, unless the billboards fall I'll never see a tree at all. </PRE></BODY> </HTML> 

Good Relations

Словарь Good Relations используется с 2008 года как стандарт для описания продуктов электронной торговли. Создатели рассчитывали, что использование такой разметки будет давать структурированное представление товаров и услуг в поисковых системах.

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

  • Компании — контактные данные, месторасположение, лого;
  • Магазина — адрес, часы работы, телефон;
  • Отдельного продукта — категория товара, краткое описание, код, способы оплаты доставки, а также функции для услуг (ремонт, установка, аренда и др.)

Good relations описывает следующие сферы интернет-торговли: Books (Книги), Cars (Авто), Classified ads (Объявления), Concert tickets (Билеты на концерты), Consumer electronics (Бытовая техника), Guided tours and outdoor events (Экскурсии и мероприятия) и другие.

В Рунете этот словарь практически не используется, но встречается на некоторых крупных зарубежных сайтах (Volkswagen UK, Strobelight-Shop, lux-case.se). Из поисковиков разметку GR распознает Google.

Пример разметки с использованием Good Relations:

<div typeof="gr:Offering" about="#offer">  <div property="gr:name">HTML for Idiots - Used Copy, $ 9.99</div>  <link rel="gr:hasBusinessFunction" resource="http://purl.org/goodrelations/v1#Sell" />  <div rel="gr:hasPriceSpecification">  <div typeof="gr:UnitPriceSpecification">Price:  <span property="gr:hasCurrency" content="USD">$</span>  <span property="gr:hasCurrencyValue" datatype="xsd:float">9.99</span>  <div property="gr:validThrough" datatype="xsd:dateTime"  content="2012-11-30T23:59:59Z"></div>  </div>  </div> 

Стандарт Good Relations с ноября 2012 года интегрирован в Schema.org, у словаря также есть свой валидатор

habr.com

<div>  <strong><span>Change a Flat Tire</span></strong>  <div>About <span>$20</span></div>  <div>About <span>30 minutes</span></div>  <div>Necessary Items:</div>  <div>Spare tire</div>  <div>Lug wrench</div>  <div>Jack</div>  <div>Wheel wedges</div>  <div>Flares</div>  <div id="steps">  <div>Preparation</div>  <div>  <div>  Turn on your hazard lights and set the flares.  </div>  <div>  You're going to need space and want to be visible.</div>  <div>  <div>  Position your wheel wedges in front of the front tires if a rear tire is flat, or behind the rear tires if a front tire is flat.  </div>  <div>  You don't want the car to move while you're working on it.  </div>  </div>  </div>  </div>  <div id="steps">  <div>Raise the car</div>  <div>  <div>  <span><img alt="image showing positioning of jack" src="position-jack.jpg" /></span>  Position the jack underneath the car, next to the flat tire.  </div>  </div>  <div>  <div>  <span><img alt="image showing car while still on the ground" src="car-on-ground.jpg" /></span>  Raise the jack until the flat tire is just barely off of the ground.  <span><img alt="image showing car raised by jack" src="car-raised.jpg" /></span>  </div>  <div>  It doesn't need to be too high.  </div>  </div>  <div>  <div>  Remove the hubcap and loosen the lug nuts.  </div>  </div>  <div>  <div>  Remove the flat tire and put the spare tire on the exposed lug bolts.  </div>  </div>  <div>  <div>  Tighten the lug nuts by hand.  </div>  <div>  Don't use the wrench just yet.  </div>  </div>  </div>  <div id="steps">  <div>Finishing up</div>  <div>  <div>  Lower the jack and tighten the lug nuts with the wrench.  </div>  </div>  <div>  <div>  Replace the hubcap.  </div>  </div>  <div>  <div>  Put the equipment and the flat tire away.  </div>  </div>  </div> </div> 
<div itemscope itemtype="http://schema.org/HowTo">  <strong><span itemprop="name">Change a Flat Tire</span></strong>  <div>About <span itemprop="estimatedCost" itemscope itemtype="http://schema.org/MonetaryAmount">  <meta itemprop="currency" content="USD"/>  <meta itemprop="value" content="20"/>  </span>$20</div>  <div>About <span itemprop="totalTime" content="PT30M">30 minutes</span></div>  <div>Necessary Items:</div>  <div itemprop="tool">Spare tire</div>  <div itemprop="tool" itemscope itemtype="http://schema.org/HowToTool">  <span itemprop="name">Lug wrench</span>  <img alt="image of a lug wrench" itemprop="image" src="lug-wrench.jpg"/>  </div>  <div itemprop="tool">Jack</div>  <div itemprop="tool" itemscope itemtype="http://schema.org/HowToTool">  <span itemprop="name">Wheel wedges</span>  <img alt="image showing wheel wedges" itemprop="image" src="wheel-wedges.jpg"/>  </div>  <div itemprop="supply" itemscope itemtype="http://schema.org/HowToSupply">  <span itemprop="name">Flares</span>  <img alt="image of flares" itemprop="image" src="flares.jpg"/>  </div>  <div itemprop="step" itemscope itemtype="http://schema.org/HowToSection">  <div itemprop="name">Preparation</div>  <meta itemprop="position" content="1"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">  <meta itemprop="position" content="1"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">  <meta itemprop="position" content="1"/>  <div itemprop="text">Turn on your hazard lights and set the flares.</div>  </div>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToTip">  <meta itemprop="position" content="2"/>  <div itemprop="text">You're going to need space and want to be visible.</div>  </div>  </div>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">  <meta itemprop="position" content="2"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">  <meta itemprop="position" content="1"/>  <div itemprop="text">Position your wheel wedges in front of the front tires if a rear tire is flat, or behind the rear tires if a front tire is flat.</div>  </div>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToTip">  <meta itemprop="position" content="2"/>  <div itemprop="text">You don't want the car to move while you're working on it.</div>  </div>  </div>  </div>  <div itemprop="step" itemscope itemtype="http://schema.org/HowToSection">  <div itemprop="name">Raise the car</div>  <meta itemprop="position" content="2"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">  <meta itemprop="position" content="1"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">  <meta itemprop="position" content="1"/>  <img alt="image showing positioning of jack" itemprop="duringMedia" src="position-jack.jpg" />  <div itemprop="text">Position the jack underneath the car, next to the flat tire.</div>  </div>  </div>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">  <meta itemprop="position" content="2"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">  <meta itemprop="position" content="1"/>  <div itemprop="beforeMedia" itemscope itemtype="http://schema.org/ImageObject">  <img alt="image showing car while still on the ground" itemprop="contentUrl" src="car-on-ground.jpg" />  </div>  <div itemprop="text">Raise the jack until the flat tire is just barely off of the ground.</div>  <div itemprop="afterMedia" itemscope itemtype="http://schema.org/ImageObject">  <img alt="image showing car raised by jack" itemprop="contentUrl" src="car-raised.jpg" />  </div>  </div>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToTip">  <meta itemprop="position" content="2"/>  <div itemprop="text">It doesn't need to be too high.</div>  </div>  </div>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">  <meta itemprop="position" content="3"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">  <meta itemprop="position" content="1"/>  <div itemprop="text">Remove the hubcap and loosen the lug nuts.</div>  </div>  </div>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">  <meta itemprop="position" content="4"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">  <meta itemprop="position" content="1"/>  <div itemprop="text">Remove the flat tire and put the spare tire on the exposed lug bolts.</div>  </div>  </div>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">  <meta itemprop="position" content="5"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">  <meta itemprop="position" content="1"/>  <div itemprop="text">Tighten the lug nuts by hand.</div>  </div>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToTip">  <meta itemprop="position" content="2"/>  <div itemprop="text">Don't use the wrench just yet.</div>  </div>  </div>  </div>  <div itemprop="step" itemscope itemtype="http://schema.org/HowToSection">  <div itemprop="name">Finishing up</div>  <meta itemprop="position" content="3"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">  <meta itemprop="position" content="1"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">  <meta itemprop="position" content="1">  <div itemprop="text">Lower the jack and tighten the lug nuts with the wrench.</div>  </div>  </div>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">  <meta itemprop="position" content="2"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">  <meta itemprop="position" content="1"/>  <div itemprop="text">Replace the hubcap.</div>  </div>  </div>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToStep">  <meta itemprop="position" content="3"/>  <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">  <meta itemprop="position" content="1"/>  <div itemprop="text">Put the equipment and the flat tire away.</div>  </div>  </div>  </div> </div> 
<div vocab="http://schema.org/" typeof="HowTo">  <strong><span property="name">Change a Flat Tire</span></strong>  <div>About <span property="estimatedCost" typeof="MonetaryAmount">  <meta property="currency" content="USD"/>  <meta property="value" content="20"/>  </span>$20</div>  <div>About <span property="totalTime" content="PT30M">30 minutes</span></div>  <div>Necessary Items:</div>  <div property="tool">Spare tire</div>  <div property="tool" typeof="HowToTool">  <span property="name">Lug wrench</span>  <img alt="image of a lug wrench" property="image" src="lug-wrench.jpg"/>  </div>  <div property="tool">Jack</div>  <div property="tool" typeof="HowToTool">  <span property="name">Wheel wedges</span>  <img alt="image showing wheel wedges" property="image" src="wheel-wedges.jpg"/>  </div>  <div property="supply" typeof="HowToSupply">  <span property="name">Flares</span>  <img alt="image of flares" property="image" src="flares.jpg"/>  </div>  <div property="step" typeof="HowToSection">  <div property="name">Preparation</div>  <meta property="position" content="1"/>  <div property="itemListElement" typeof="HowToStep">  <meta property="position" content="1"/>  <div property="itemListElement" typeof="HowToDirection">  <meta property="position" content="1"/>  <div property="text">Turn on your hazard lights and set the flares.</div>  </div>  <div property="itemListElement" typeof="HowToTip">  <meta property="position" content="2"/>  <div property="text">You're going to need space and want to be visible.</div>  </div>  </div>  <div property="itemListElement" typeof="HowToStep">  <meta property="position" content="2"/>  <div property="itemListElement" typeof="HowToDirection">  <meta property="position" content="1"/>  <div property="text">Position your wheel wedges in front of the front tires if a rear tire is flat, or behind the rear tires if a front tire is flat.</div>  </div>  <div property="itemListElement" typeof="HowToTip">  <meta property="position" content="2"/>  <div property="text">You don't want the car to move while you're working on it.</div>  </div>  </div>  </div>  <div property="step" typeof="HowToSection">  <div property="name">Raise the car</div>  <meta property="position" content="2"/>  <div property="itemListElement" typeof="HowToStep">  <meta property="position" content="1"/>  <div property="itemListElement" typeof="HowToDirection">  <meta property="position" content="1"/>  <img alt="image showing positioning of jack" property="duringMedia" src="position-jack.jpg" />  <div property="text">Position the jack underneath the car, next to the flat tire.</div>  </div>  </div>  <div property="itemListElement" typeof="HowToStep">  <meta property="position" content="2"/>  <div property="itemListElement" typeof="HowToDirection">  <meta property="position" content="1"/>  <div property="beforeMedia" typeof="ImageObject">  <img alt="image showing car while still on the ground" property="contentUrl" src="car-on-ground.jpg" />  </div>  <div property="text">Raise the jack until the flat tire is just barely off of the ground.</div>  <div property="afterMedia" typeof="ImageObject">  <img alt="image showing car raised by jack" property="contentUrl" src="car-raised.jpg" />  </div>  </div>  <div property="itemListElement" typeof="HowToTip">  <meta property="position" content="2"/>  <div property="text">It doesn't need to be too high.</div>  </div>  </div>  <div property="itemListElement" typeof="HowToStep">  <meta property="position" content="3"/>  <div property="itemListElement" typeof="HowToDirection">  <meta property="position" content="1"/>  <div property="text">Remove the hubcap and loosen the lug nuts.</div>  </div>  </div>  <div property="itemListElement" typeof="HowToStep">  <meta property="position" content="4"/>  <div property="itemListElement" typeof="HowToDirection">  <meta property="position" content="1"/>  <div property="text">Remove the flat tire and put the spare tire on the exposed lug bolts.</div>  </div>  </div>  <div property="itemListElement" typeof="HowToStep">  <meta property="position" content="5"/>  <div property="itemListElement" typeof="HowToDirection">  <meta property="position" content="1"/>  <div property="text">Tighten the lug nuts by hand.</div>  </div>  <div property="itemListElement" typeof="HowToTip">  <meta property="position" content="2"/>  <div property="text">Don't use the wrench just yet.</div>  </div>  </div>  </div>  <div property="step" typeof="HowToSection">  <div property="name">Finishing up</div>  <meta property="position" content="3"/>  <div property="itemListElement" typeof="HowToStep">  <meta property="position" content="1"/>  <div property="itemListElement" typeof="HowToDirection">  <meta property="position" content="1">  <div property="text">Lower the jack and tighten the lug nuts with the wrench.</div>  </div>  </div>  <div property="itemListElement" typeof="HowToStep">  <meta property="position" content="2"/>  <div property="itemListElement" typeof="HowToDirection">  <meta property="position" content="1"/>  <div property="text">Replace the hubcap.</div>  </div>  </div>  <div property="itemListElement" typeof="HowToStep">  <meta property="position" content="3"/>  <div property="itemListElement" typeof="HowToDirection">  <meta property="position" content="1"/>  <div property="text">Put the equipment and the flat tire away.</div>  </div>  </div>  </div> </div> 
<script type="application/ld+json"> {  "@context": "http://schema.org",  "@type": "HowTo",  "name": "Change a Flat Tire",  "estimatedCost": {  "@type": "MonetaryAmount",  "currency": "USD",  "value": "20"  },  "totalTime": "PT30M",  "tool": [  {  "@type": "HowToTool",  "name": "Spare tire"  },  {  "@type": "HowToTool",  "name": "Lug wrench",  "image": "lug-wrench.jpg"  },  {  "@type": "HowToTool",  "name": "Jack"  },  {  "@type": "HowToTool",  "name": "Wheel wedges",  "image": "wheel-wedges.jpg"  }  ],  "supply": {  "@type": "HowToSupply",  "name": "Flares",  "image": "flares.jpg"  },  "step": [  {  "@type": "HowToSection",  "name": "Preparation",  "position": "1",  "itemListElement": [  {  "@type": "HowToStep",  "position": "1",  "itemListElement": [  {  "@type": "HowToDirection",  "position": "1",  "text": "Turn on your hazard lights and set the flares."  },  {  "@type": "HowToTip",  "position": "2",  "text": "You're going to need space and want to be visible."  }  ]  },  {  "@type": "HowToStep",  "position": "2",  "itemListElement": [  {  "@type": "HowToDirection",  "position": "1",  "text": "Position your wheel wedges in front of the front tires if a rear tire is flat, or behind the rear tires if a front tire is flat"  },  {  "@type": "HowToTip",  "position": "2",  "text": "You don't want the car to move while you're working on it."  }  ]  }  ]  },  {  "@type": "HowToSection",  "name": "Raise the car",  "position": "2",  "itemListElement": [  {  "@type": "HowToStep",  "position": "1",  "itemListElement": [  {  "@type": "HowToDirection",  "position": "1",  "duringMedia": "position-jack.jpg",  "text": "Position the jack underneath the car, next to the flat tire."  }  ]  },  {  "@type": "HowToStep",  "position": "2",  "itemListElement": [  {  "@type": "HowToDirection",  "position": "1",  "beforeMedia": {  "@type": "ImageObject",  "contentUrl": "car-on-ground.jpg"  },  "afterMedia": {  "@type": "ImageObject",  "contentUrl": "car-raised.jpg"  },  "text": "Raise the jack until the flat tire is just barely off of the ground."  },  {  "@type": "HowToTip",  "position": "2",  "text": "It doesn't need to be too high."  }  ]  },  {  "@type": "HowToStep",  "position": "3",  "itemListElement": [  {  "@type": "HowToDirection",  "position": "1",  "text": "Remove the hubcap and loosen the lug nuts."  }  ]  },  {  "@type": "HowToStep",  "position": "4",  "itemListElement": [  {  "@type": "HowToDirection",  "position": "1",  "text": "Remove the flat tire and put the spare tire on the exposed lug bolts."  }  ]  },  {  "@type": "HowToStep",  "position": "5",  "itemListElement": [  {  "@type": "HowToDirection",  "position": "1",  "text": "Tighten the lug nuts by hand."  },  {  "@type": "HowToTip",  "position": "2",  "text": "Don't use the wrench just yet."  }  ]  }  ]  },  {  "@type": "HowToSection",  "name": "Finishing up",  "position": "3",  "itemListElement": [  {  "@type": "HowToStep",  "position": "1",  "itemListElement": [  {  "@type": "HowToDirection",  "position": "1",  "text": "Lower the jack and tighten the lug nuts with the wrench."  }  ]  },  {  "@type": "HowToStep",  "position": "2",  "itemListElement": [  {  "@type": "HowToDirection",  "position": "1",  "text": "Replace the hubcap."  }  ]  },  {  "@type": "HowToStep",  "position": "3",  "itemListElement": [  {  "@type": "HowToDirection",  "position": "1",  "text": "Put the equipment and the flat tire away."  }  ]  }  ]  }  ] } 

schema.org


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.