ITCrowd 2 - Обзор существующих стандартов разметки и...
30
-
Upload
itcrowd-almaty -
Category
Internet
-
view
2.030 -
download
3
Transcript of 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. Передача информации сервисам
Сниппеты: товары
Сниппеты: организации
Сниппеты: рецепты
Сниппеты: творческие работы
Сниппеты: фильмы
Сервисы: Яндекс.Справочник
Сервисы: Яндекс.Видео
Другие примеры: социальные сети
14
Другие примеры: Google и Bing
Разметка - словари и синтаксис
Словарь
Своеобразный «язык», набор классов и их свойств, с помощью которых указывается суть содержимого на странице. Например, словарь определяет, с помощью какого термина указывать название — «name», «title» или «n».
Schema.org
<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Юрий Гагарин</span>
<img src="gagarin.jpg" itemprop="image"/> <span itemprop="jobTitle">Летчик-
космонавт</span></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 itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Юрий Гагарин</span>
<img src="gagarin.jpg" itemprop="image"/> <span itemprop="jobTitle">Летчик-
космонавт</span></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>
22
JSON-LD
<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
26
Что еще?
Полезные ссылки
Статьи на Хабре 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
Контакты
deliya.makhmutova
Дэлия Махмутова
Группа Семантического Веба в Яндексе
Cпасибо!
