Download - Роботы имеют право знать

Роботы имеютправо знатьЗаметки о микроразметке

Андрей Абрамов, Graph.uk

Web Standards Days, Октябрь 2015

http://www.graph.uk/

Содержание• Зачем нам микроразметка

• Словари и синтаксисы

• Примеры использования

• Инструменты

• Будущее

• Семантическая верстка HTML5 Doctor

• CEO Анна Селезнёва «Основы сеонизма»

1

http://html5doctor.com/

http://webstandardsdays.ru/2013/10/26/pres/seonism.pdf

Интерфейсы для людей

Роботы ничего не понимают

Какие роботы?

8

Микроразметка

ТерминологияМикроразметка (семантическая разметка) — споcоб задать структуру

и смысл данным в HTML с помощью дополнительных тегов

и атрибутов.

Не путать:

• Микроформаты — инициатива microformats.org

• Микроданные — стандарт микроразметки HTML5 microdata

10

http://webstandardsdays.ru/2015/10/31/pres/web-semantics/microformats.org

Словарь &

Синтаксис

Словари• Open Graph

• Schema.org

• FOAF

• GoodRelations

• Dublin Core

• ...

12

Синтаксисы

13

Синтаксисы

Microformats<div class=" vcard ">

<span class=" fn ">Mark Watney</span>

<div class=" org ">NASA</div>

<div class=" adr ">

<span class=" country-name ">USA</span>

</div>

</div>

01.

02.

03.

04.

05.

06.

07.

18

RDFa<div vocab ="http://schema.org/" typeof ="Person">

<span property ="name">Mark Watney</span>,

<span property ="jobTitle">Astronaut</span>,

<a property ="email" href="mailto:[email protected]">

Talk to me!</a>

</div>

01.

02.

03.

04.

05.

06.

19

Microdata<div itemscope itemtype ="http://schema.org/Person">

<span itemprop ="name">Mark Watney</span>,

<span itemprop ="jobTitle">Astronaut</span>,

<a itemprop ="email" href="mailto:[email protected]">

Talk to me!</a>

</div>

01.

02.

03.

04.

05.

06.

20

JSON-LD<script type=" application/ld+json "> {

" @context ": "http://schema.org/",

" @type ": "Car",

" name ": "Tesla Model S",

" numberOfDoors ": "5",

" fuelType ": "Electricity"

} </script>

01.

02.

03.

04.

05.

06.

07.

21

2010

По данным Web Data Commons

Microformats

RDFaMicrodata

22

http://www.webdatacommons.org/structureddata/

2012


Microformats

RDFa

Microdata

23


2014


MicroformatsRDFa

Microdata

24


Тенденции• Microformats сходят на нет

• Open Graph теги записаны с помощью RDFa

• Microdata является наиболее распространенным форматом

• Google активно внедряет поддержку JSON-LD

25

RDFa vs

Microdata?

Microdata itemref<div itemscope itemtype="http://schema.org/Organization"

itemref =" orgname ">

<img src="logo.jpg" itemprop="image">

</div>

…

<div id=" orgname " itemprop="name">SpaceX</div>

01.

02.

03.

04.

05.

06.

28

Примеры использования• Социальные сети

• Поисковые сниппеты

• Разметка в письмах

• ...

29

Социальные сети

Open Graph<html prefix ="og: http://ogp.me/ns#">

<head>

<meta property=" og:title " content="Заголовок" />

<meta property=" og:type " content="Тип данных" />

<meta property=" og:description " content="Описание" />

<meta property=" og:image " content="http://…/image.jpg" />

<meta property=" og:url " content="http://bit.ly/…" />

01.

02.

03.

04.

05.

06.

07.

32

Размеры изображений…

<meta property=" og:image " content="http://…/image.jpg" />

<meta property="og:image:secure_url" content="https://…" />

<meta property="og:image:type" content="image/jpeg" />

<meta property=" og:image:width " content="600" />

<meta property=" og:image:height " content="600" />

…

01.

02.

03.

04.

05.

06.

07.

33

Описывайте объекты…

<meta property=" og:type " content="video" />

<meta property=" og:video:url " content="https://…" />

<meta property=" og:video:type " content="text/html" />

<meta property=" og:video:width " content="1280" />

<meta property=" og:video:height " content="720" />

…

01.

02.

03.

04.

05.

06.

07.

35

Open Graph• Facebook

• VK

• Google +

• LinkedIn

• Twitter

• Pinterest

36

Поисковыесниппеты

Словарь Schema.org• Bing

• Google

• Yahoo!

• Yandex

38

Это сниппет

Cниппет рецепта<div itemscope itemtype=" http://schema.org/Recipe ">

<p itemprop=" description ">My family's favorite…</p>

<img itemprop=" image " src="http://…/image.jpg" />

<div itemscope itemprop=" aggregateRating "

itemtype=" http://schema.org/AggregateRating ">

Rating: <span itemprop=" ratingValue ">5.0</span>

</div>

</div>

01.

02.

03.

04.

05.

06.

07.

08.

45

О чем рассказать поисковику?• Рецепт

• Товар

• Организация

• Событие

• Приложение

• Видео

• Статья

47

Разметкав письмах

Бронь отеля{

"@context": "http://schema.org",

"@type": " LodgingReservation ",

...

" checkinDate ": "2015-10-30T14:00:00+03:00",

" checkoutDate ": "2015-11-02T12:00:00+03:00"

}

01.

02.

03.

04.

05.

06.

07.

51

{

"@context": "http://schema.org",

"@type": " EventReservation ",

"reservationFor": {

"@type": "Event",

"name": " Web Standards Days ",

"startDate": "2015-10-30T09:00:00+03:00"

}

}

01.

02.

03.

04.

05.

06.

07.

08.

09.

53

О чем рассказать в письме?• Заказ из интернет магазина

• Статус доставки

• Регистрация на событие

• Статья

• Информация о полете

• Бронирование отеля, ресторана

• Описать действия над письмом

54

Инструменты• Google Structured Data Testing Tool

• Facebook Open Graph debugger

• Twitter Card Validator

• Валидатор микроразметки Yandex

• Сброс кэша VK

55

https://developers.google.com/structured-data/testing-tool/

https://developers.facebook.com/tools/debug/

https://cards-dev.twitter.com/validator

https://webmaster.yandex.ru/microtest.xml

https://vk.com/dev/pages.clearCache

Будущее

Спасибо!