ITCrowd 2 - Обзор существующих стандартов разметки и продуктов на ее основе

Обзор семантической
разметки: стандарты и
продукты
Дэлия Махмутова, группа Семантического Веба в
Яндексе

Семантическая разметка - что это?

Разметка - что это?
<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Юрий Гагарин</span>
<img src="gagarin.jpg" itemprop="image"/>
<span itemprop="jobTitle">Летчик-
космонавт</span>
</div>

Зачем нужна разметка?
5
1. Структурированное
отображение в поиске и
социальных сетях
2. Передача информации
сервисам

Сниппеты: товары

Сниппеты: организации

Сниппеты: рецепты

Сниппеты: творческие работы

Сниппеты: фильмы

Сервисы: Яндекс.Справочник

Сервисы: Яндекс.Видео

Другие примеры: социальные сети

Другие примеры: Google и Bing
14

Разметка - словари и синтаксис

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

Schema.org
</div>

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="Гагарин" />
</head>
...
</html>

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

Microdata
</div>

RDFa
<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="Гагарин" />
</head>
...
</html>

JSON-LD
22
<script type="application/ld+json">{
"@context": "http://json-ld.org/contexts/person.jsonld",
"@id": "http://dbpedia.org/resource/John_Lennon",
"name": "Джон Леннон",
"born": "1940-10-09",
"spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
}
</script>

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

Самые популярные стандарты
Open Graph в RDFaSchema.org в Microdata

Полезные ссылки
Статьи на Хабре
http://habrahabr.ru/users/deliya/topics/
Пост в блоге Яндекса
http://blog.yandex.ru/post/86368/
Хелп
http://help.yandex.ru/webmaster/schema-org/what-is-schema-
org.xml
Валидатор микроразметки
http://webmaster.yandex.ru/microtest.xml

Контакты
delkin@yandex-
team.ru
deliya.makhmutova
Дэлия Махмутова
Группа Семантического Веба в Яндексе

ITCrowd 2 - Обзор существующих стандартов разметки и продуктов на ее основе

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie ITCrowd 2 - Обзор существующих стандартов разметки и продуктов на ее основе

Ähnlich wie ITCrowd 2 - Обзор существующих стандартов разметки и продуктов на ее основе (20)

Mehr von ITCrowd Almaty

Mehr von ITCrowd Almaty (18)

ITCrowd 2 - Обзор существующих стандартов разметки и продуктов на ее основе