Схема орг – Как устроен мир семантической микроразметки / Яндекс corporate blog / Habr

Schema.org — Википедия

Материал из Википедии — свободной энциклопедии

Schema.org
Schemaorg.png
URL schema.org
Коммерческий Нет
Тип сайта Информационный ресурс
Регистрация отсутствует
Язык(-и) английский
Начало работы 2 июня 2011 года
Текущий статус Активен

Schema.org — это совместная инициатива по разработке единой схемы для семантической разметки в HTML5. Инициатива была запущена второго июня 2011 года создателями крупнейших поисковых систем — компаниями Google[1], Yahoo![2] и Microsoft[3] , а первого ноября 2011 года к ней присоединилась российская компания Яндекс[4][5][6]. Основной целью schema.org является помощь веб-разработчикам в создании качественных метаданных, что, в свою очередь, позволяет улучшать качество поиска. Метаданные на сайтах, использующие схемы, описанные на schema.org, могут быть напрямую проанализированы поисковыми роботами, помогая последним лучше «понимать» содержимое веб-ресурсов. Данная инициатива тесно связана с направлениями Semantic Web и Linked Data и часто приводится как пример большого интереса индустрии к семантическим технологиям.

В качестве основного формата разметки веб-страницы метаданными разработчики schema.org предлагают microdata (микроданные) — теги и атрибуты для разметки структурированной информации на веб-страницах, появившиеся в стандарте HTML5. Помимо этого формата, имеется возможность использовать онтологию schema.org, выраженную в формате RDFS при разметке RDF-данных.

Для проверки корректности формата данных, размеченных с помощью схем можно использовать инструменты Google Rich Snippets Validator и валидатор от Яндекса.

Начало работы

Любой вебмастер хорошо знаком с HTML-разметкой. Обычно HTML-теги указывают браузеру, как отображать информацию, заключенную в тег. Например, тег <h2>Аватар</h2> означает, что строку «Аватар» следует отображать в формате заголовка первого уровня. Однако HTML-тег не предоставляет никакой информации о смысловом значении этой строки: «Аватар» может относиться к чрезвычайно успешному 3D-фильму или к картинке в пользовательском профиле. Это усложняет поисковым системам задачу нахождения информации, адекватной запросу пользователя.

Schema.org предоставляет общедоступный словарь, с помощью которого вебмастера могут размечать страницы, так чтобы они были понятны самым распространенным поисковым системам: Яндексу, Google, Microsoft и Yahoo!.

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

      1. Как размечать контент с помощью микроданных
            a. Для чего нужны микроданные
            b. itemscope и itemtype
            c. itemprop
            d. Вложенные элементы
      2. Как использовать словарь schema.org
            a. Типы и свойства schema.org
            b. Ожидаемые типы, текст и URL

            c. Тестирование разметки
      3. Дополнительно: машиночитаемая версия информации
            a. Даты, время и длительность
            b. Перечисления и ссылки на канонические страницы
            c. Недостающая или неявная информация
            d. Расширение schema.org

1. Как размечать контент с помощью микроданных

1a. Для чего нужны микроданные

Содержание страниц вашего сайта понятно читающим их людям, однако поисковым системам сложно определить, о чем идет речь. Добавляя специальные теги к HTML-коду своих страниц, вы как бы говорите: «Эй, поисковая система, вот здесь описывается такой-то фильм (место, человек, видеоролик)». Тем самым вы помогаете поисковым системам и другим приложениям лучше понимать ваш контент и отображать его подходящим, полезным образом. Микроданные — набор тегов, появившийся в HTML5,— позволяют делать именно так.

1b. itemscope и itemtype

Начнем с конкретного примера. Представим, что у нас есть страница о фильме «Аватар» — со ссылкой на трейлер, информацией о режиссере и т. п. HTML-код может выглядеть примерно так:


<div>
 <h2>Аватар</h2>
 <span>Режиссер: Джеймс Кэмерон (род. 16 августа 1954 г.)</span>
 <span>Фантастика</span>
 <a href="/../movies/avatar-theatrical-trailer.html">Трейлер</a>
</div>


В первую очередь необходимо указать, какая часть страницы посвящена непосредственно фильму «Аватар». Для этого добавим атрибут itemscope к HTML-тегу, в который заключена эта информация:


<div itemscope>
  <h2>Аватар</h2>
  <span>Режиссер: Джеймс Кэмерон (род. 16 августа 1954 г.) </span>
  <span>Фантастика</span>
  <a href="/../movies/avatar-theatrical-trailer.html">Трейлер</a>
</div>


Добавляя itemscope, мы тем самым обозначаем, что HTML-код, содержащийся в блоке <div>...</div>, описывает некоторую сущность.

Пока мы только объявили, что речь идет о какой-то сущности, но не сообщили, что это за сущность. Чтобы указать тип сущности, добавим атрибут itemtype сразу после itemscope.


<div itemscope itemtype="http://schema.org/Movie">
  <h2>Аватар</h2>
  <span>Режиссер: Джеймс Кэмерон (род. 16 августа 1954 г.)</span>
  <span>Фантастика</span>
  <a href="/../movies/avatar-theatrical-trailer.html">Трейлер</a>
</div>


Тем самым мы уточняем, что сущность, описание которой заключено в теге <div>, представляет собой фильм (тип Movie в иерархии типов schema.org). Названия типов имеют вид URL, в нашем случае http://schema.org/Movie.

1c. itemprop

Какую дополнительную информацию о фильме «Аватар» можно предоставить поисковым системам? О фильме можно сообщить множество интересных сведений: актерский состав, режиссер, рейтинг. Чтобы отметить свойства сущности, используется атрибут itemprop. Например, чтобы указать режиссера фильма, добавим атрибут itemprop="director" к HTML-тегу, содержащему имя режиссера. (Полный список свойств, которые можно задать для фильма, приведен на странице http://schema.org/Movie.)


<div itemscope itemtype="http://schema.org/Movie">
  <h2 
itemprop="name"
>Аватар</h2> <span>Режиссер: <span itemprop="director">Джеймс Кэмерон</span> (род. 16 августа 1954 г.)</span> <span itemprop="genre">Фантастика</span> <a href="/../movies/avatar-theatrical-trailer.html" itemprop="trailer">Трейлер</a> </div>

Обратите внимание, что мы добавили дополнительный тег <span>...</span>, чтобы привязать атрибут itemprop к соответствующему тексту на странице. Тег <span> не влияет на отображение страницы в браузере, поэтому его удобно использовать вместе с itemprop.

Теперь поисковые системы смогут понять не только то, что http://www.avatarmovie.com — это ссылка, но и то, что это ссылка на трейлер фантастического фильма «Аватар» режиссера Джеймса Кэмерона.

1d. Вложенные сущности

Иногда значение свойства может само являться сущностью, с собственным набором свойств. Например, режиссер фильма может быть описан как сущность с типом Person, у которой есть свойства name (имя) и birthDate (дата рождения). Чтобы указать, что значение свойства представляет собой сущность, необходимо добавить атрибут itemscope сразу после соответствующего itemprop.


<div itemscope itemtype="http://schema.org/Movie">
  <h2 itemprop="name">Аватар</h2>
  <div itemprop="director" itemscope itemtype="http://schema.org/Person">
  Режиссер: <span itemprop="name">Джеймс Кэмерон</span> (род. <span itemprop="birthDate">16 августа 1954 г.</span>)
  </div>
  <span itemprop="genre">Фантастика</span>
  <a href="/../movies/avatar-theatrical-trailer.html" itemprop="trailer">Трейлер</a>
</div>


2. Как использовать словарь schema.org

2a. Типы и свойства schema.org

Кроме типов Movie и Person, упомянутых в разделе 1, schema.org описывает множество разнообразных типов сущностей, для каждого из которых определен набор свойств.

Наиболее обобщенный тип сущности — это Thing (нечто), у которого есть четыре свойства: name (название), description (описание), url (ссылка) и image (картинка). Более специализированные, частные типы имеют общие свойства с более универсальными. Например, Place (место) — частный случай Thing, а LocalBusiness (местная фирма) — частный случай Place. Частные типы наследуют свойства родительского типа. (Более того, тип LocalBusiness является и частным случаем Place, и частным случаем Organization, поэтому наследует свойства обоих родительских типов.)

Вот список некоторых популярных типов сущностей:

  • Творческие произведения: CreativeWork (творческое произведение), Book (книга), Movie (фильм), MusicRecording (музыкальная запись), Recipe (рецепт), TVSeries (телесериал)...
  • Встроенные нетекстовые объекты: AudioObject (аудио), ImageObject (изображение), VideoObject (видео)
  • Event (событие)
  • Organization (организация)
  • Person (человек)
  • Place (место), LocalBusiness (местная фирма), Restaurant (ресторан)...
  • Product (продукт), Offer (предложение), AggregateOffer (сводное предложение)
  • Review (отзыв), AggregateRating (сводный рейтинг)

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

2b. Ожидаемые типы, текст и URL

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

  • Чем больше, чем лучше — за исключением скрытого текста. Чем больше контента вы разметите, тем лучше. Однако, как правило, следует размечать только контент, видимый посетителям сайта, но не содержимое скрытых тегов <div> и других скрытых элементов страницы.
  • Ожидаемые типы или текст. Просматривая типы schema.org, вы заметите, что у многих свойств есть так называемые ожидаемые типы. Это значит, что значение свойства может быть вложенной сущностью (см. раздел 1d). Однако добавлять вложенную сущность не обязательно: приемлемо использовать просто текст или URL.

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

  • Использование свойства url. Одни страницы посвящены описанию только одной сущности. Например, персональная страница конкретного человека, которую можно разметить, используя тип сущности Person. Другие — целому ряду сущностей. Например, на сайте вашей компании есть список сотрудников, со ссылками на профиль каждого из них. Для таких агрегирующих страниц нужно разметить отдельно каждую сущность (в этом случае получится последовательность сущностей с типом Person) и добавить свойство url в ссылку на соответствующую страницу для каждой сущности, например:

    
        <div itemscope itemtype="http://schema.org/Person">
          <a href="/alice.html" itemprop="url">Элис Джонс</a>
        </div>
        <div itemscope itemtype="http://schema.org/Person">
          <a href="/bob.html" itemprop="url">Боб Смит</a>
        </div>
    
    

2c. Тестирование разметки

Подобно тому, как браузер необходим для проверки изменений в верстке веб-страницы, а компилятор — для тестирования кода, разметку schema.org также следует тестировать. В интернете существует несколько инструментов, с помощью которых можно проверить корректность разметки и выявить ошибки: Валидатор микроразметки от Яндекса, Rich Snippets Testing Tool от Google, Structured Data Linter.

3. Дополнительно: машиночитаемая версия информации

Многие страницы можно разметить, используя только атрибуты itemscope, itemtype и itemprop (описанные в разделе 1) вместе с типами и свойствами schema.org (описанными в разделе 2).

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

  • Даты, время и длительность: используйте тег <time> с атрибутом datetime
  • Перечисления и ссылки на канонические страницы: используйте тег <link> с атрибутом href
  • Недостающая или неявная информация: используйте тег <meta> с атрибутом content

3a. Даты, время и длительность: используйте тег <time> с атрибутом datetime

Не всегда роботам удается правильно понять дату и время. Например, «04/01/11» — это 11 января 2004 г., 4 января 2011 г. или 1 апреля 2011 г.? Чтобы однозначно задать дату, используйте тег <time> вместе с атрибутом datetime. Значение атрибута datetime — дата в формате YYYY-MM-DD. Следующий HTML-код точно определяет дату как 1 апреля 2011 г.:


<time datetime="2011-04-01">04/01/11</time>

Время суток задается в формате hh:mm либо hh:mm:ss, с префиксом T. Время может быть указано вместе с датой:


<time datetime="2011-05-08T19:30">8 мая, 19:30</time>

Рассмотрим пример в контексте: HTML-код с информацией о концерте, который состоится 8 мая 2011 г. Разметка типа Event включает название события, описание и дату.


<div itemscope itemtype="http://schema.org/Event">
  <div  itemprop="name">Spinal Tap</div>
  <span itemprop="description">Одна из самых громких музыкальных групп всех времен
  воссоединится для незабываемого двухдневного шоу.</span>
  Концерт состоится
  <time itemprop="startDate" datetime="2011-05-08T19:30">8 мая в  19:30</time>
</div>

Длительность описывается аналогичным образом, с помощью тега <time> и атрибута datetime. Значение атрибута предваряется префиксом P (от англ. period). Например, указать в рецепте, что время приготовления составляет полтора часа, можно следующим образом:


<time itemprop="cookTime" datetime="PT1h40M">1 ½ часа</time>

H обозначает количество часов, а M — количество минут.

Форматы даты, времени и длительности соответствуют стандарту ISO 8601.

3b. Перечисления и ссылки на канонические страницы: используйте тег <link> с атрибутом href

Перечисления

Некоторые свойства имеют ограниченный набор возможных значений. Программисты называют их перечислениями. Например, интернет-магазин может использовать тип сущности Offer для подробного описания товарного предложения. Свойство availability (наличие) обычно имеет одно из нескольких возможных значений: In stock (в наличии), Out of stock (отсутствует), Pre-order (на заказ) и т. д. Значения перечисляемых свойств можно указывать в виде URL, аналогично типам сущностей schema.org.

Вот товарное предложение, размеченное как сущность типа Offer, с соответствующими свойствами:


<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">$19.95</span>
  <span itemprop="availability">Уже в продаже!</span>
</div>

А вот то же самое предложение, размеченное с использованием <link> и href, что позволяет однозначно указать одно из допустимых значений свойства availability:


<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">$19.95</span>
  <link itemprop="availability" href="http://ruschema.org/InStock"/>Уже в продаже!</span>
</div>

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

Ссылки на канонические страницы

Обычно ссылки создаются с помощью тега <a>. Например, следующая гиперссылка на страницу в Википедии для книги «Над пропастью во ржи»:


<div itemscope itemtype="http://schema.org/Book">
  <span itemprop="name">Над пропастью во ржи</span>  
  Автор <span itemprop="author">Джером Сэлинджер</span>
  <a itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye">Страница в Википедии</a>
</div>

Как видите, атрибут itemprop="url" можно использовать для ссылки на страницу другого сайта (в этом случае, Википедии), которая описывает ту же самую сущность. Ссылки на сторонние сайты помогают поисковым системам лучше понимать, о чем речь на вашей странице.

Если вы не желаете добавлять ссылку, видимую посетителям, используйте тег <link>, как показано ниже:


<div itemscope itemtype="http://schema.org/Book">
  <span itemprop="name">Над пропастью во ржи</span> 
  <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
  Автор <span itemprop="author">Джером Сэлинджер</span>
</div>

3c. Недостающая или неявная информация: используйте тег <meta> с атрибутом content

Иногда важная информация не может быть размечена из-за способа ее отображения на странице. Например, информация представлена на рисунке (изображение рейтинга 4 звезды из 5) или во Flash-объекте (например, длительность видеоролика) либо она подразумевается, но не указана на странице в явном виде (например, валюта цены).

В таких случаях можно использовать тег <meta> с атрибутом content. В следующем примере картинка иллюстрирует рейтинг 4 звезды из 5:


<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">$19.95</span>
  <img src="/four-stars.jpg" />
  25 оценок
</div>

А вот тот же пример с размеченной информацией о рейтинге.


<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">$19.95</span>
  <div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating">
    <img src="/four-stars.jpg" />
    <meta itemprop="ratingValue" content="4" />
    <meta itemprop="bestRating" content="5" />
    <span itemprop="ratingCount">25</span> оценок
  </div>
</div>

Этим приемом не следует злоупотреблять. Используйте тег <meta> с атрибутом content только для той информации, которую невозможно разметить иным способом.

3d. Расширение schema.org

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

© Google, Inc., Yahoo, Inc., Microsoft Corporation. 2011.
Яндекс

Документация

Алфавитный указатель классов: a b c d e f g h i j k l m n o p q r s t u v w x y z | Все Алфавитный указатель свойства: a b c d e f g h i j k l m n o p q r s t u v w x y z | Все 2011 - 2020 | ruschema.org - микроразметка schema.org © Все права принадлежат проекту schema.org и его создателям Google, Yahoo!, Bing и Yandex

Полная иерархия типов

CreativeWork: about, accessibilityAPI, accessibilityControl, accessibilityFeature, accessibilityHazard, accountablePerson, aggregateRating, alternativeHeadline, associatedMedia, audience, audio, author, award, awards, citation, comment, contentLocation, contentRating, contributor, copyrightHolder, copyrightYear, creator, dateCreated, dateModified, datePublished, discussionUrl, editor, educationalAlignment, educationalUse, encoding, encodings, genre, headline, inLanguage, interactionCount, interactivityType, isBasedOnUrl, isFamilyFriendly, keywords, learningResourceType, mentions, offers, provider, publisher, publishingPrinciples, review, reviews, sourceOrganization, text, thumbnailUrl, timeRequired, typicalAgeRange, version, video
Article: articleBody, articleSection, wordCount
NewsArticle: dateline, printColumn, printEdition, printPage, printSection
TechArticle: dependencies, proficiencyLevel
APIReference: assembly, assemblyVersion, programmingModel, targetPlatform
Blog: blogPost, blogPosts
Book: bookEdition, bookFormat, illustrator, isbn, numberOfPages
Clip: clipNumber, partOfEpisode, partOfSeason, partOfSeries, position, publication
TVClip: partOfSeason, partOfSeries, partOfTVSeries
Code: codeRepository, programmingLanguage, runtime, sampleType, targetProduct
Dataset: catalog, distribution, spatial, temporal
Diet: dietFeatures, endorsers, expertConsiderations, overview, physiologicalBenefits, proprietaryName, risks
Episode: actor, actors, director, directors, episodeNumber, musicBy, partOfSeason, partOfSeries, position, producer, productionCompany, publication, trailer
RadioEpisode: actor, actors, director, directors, musicBy, partOfSeason, partOfSeries, producer, productionCompany, trailer
TVEpisode: actor, actors, director, directors, musicBy, partOfSeason, partOfSeries, partOfTVSeries, producer, productionCompany, trailer
ExercisePlan: activityDuration, activityFrequency, additionalVariable, exerciseType, intensity, repetitions, restPeriods, workload
ItemList: itemListElement, itemListOrder
MediaObject: associatedArticle, bitrate, contentSize, contentUrl, duration, embedUrl, encodesCreativeWork, encodingFormat, expires, height, interactionCount, offers, playerType, productionCompany, publication, regionsAllowed, requiresSubscription, uploadDate, width
ImageObject: caption, exifData, representativeOfPage, thumbnail
VideoObject: caption, productionCompany, thumbnail, transcript, videoFrameSize, videoQuality
Movie: actor, actors, director, directors, duration, musicBy, producer, productionCompany, trailer
Recipe: cookingMethod, cookTime, ingredients, nutrition, prepTime, recipeCategory, recipeCuisine, recipeInstructions, recipeYield, totalTime
Review: itemReviewed, reviewBody, reviewRating
Season: endDate, episode, episodes, numberOfEpisodes, partOfSeries, position, producer, productionCompany, seasonNumber, startDate, trailer
RadioSeason: episode, episodes, numberOfEpisodes, partOfSeries, trailer
TVSeason: endDate, episode, episodes, numberOfEpisodes, partOfSeries, partOfTVSeries, seasonNumber, startDate, trailer
Series: actor, actors, director, directors, endDate, episode, episodes, musicBy, numberOfEpisodes, numberOfSeasons, producer, productionCompany, season, seasons, startDate, trailer
RadioSeries: actor, actors, director, directors, episode, episodes, musicBy, numberOfEpisodes, producer, productionCompany, season, seasons, trailer
TVSeries: actor, actors, director, directors, endDate, episode, episodes, musicBy, numberOfEpisodes, producer, productionCompany, season, seasons, startDate, trailer
SoftwareApplication: applicationCategory, applicationSubCategory, applicationSuite, countriesNotSupported, countriesSupported, device, downloadUrl, featureList, fileFormat, fileSize, installUrl, memoryRequirements, operatingSystem, permissions, processorRequirements, releaseNotes, requirements, screenshot, softwareVersion, storageRequirements
WebPage: breadcrumb, isPartOf, lastReviewed, mainContentOfPage, primaryImageOfPage, relatedLink, reviewedBy, significantLink, significantLinks, specialty

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

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