Передача дополнительных
сведений о сайте с помощью
семантической разметки

Юлия Тихоход, Яндекс
Менеджер проектов, Семанти...
Краткое содержание следующих
20 минут
Как приготовить хороший борщ сниппет?
Как подать сайт в социальных сетях?

Ответы на...
3

Как сварить борщ?
У хорошего сниппета тоже
есть рецепт

4
Ингредиенты:

5

• Сайт – по вкусу;
• Вебмастер – 1 шт. (можно взять верстальщика или разработчика);
• Прямые руки – 2 шт.
Красивые сниппеты можно получить для:
Яндекс Google
Адреса и организации
Товары и цены
Рецепты
Словари
Рефераты
Отзывы
Фил...
Какие еще данные можно передавать Яндексу:

Вклады и кредиты
Словари
Вакансии
Отзывы об автомобилях
Отзывы об организациях...
8

Где искать информацию о партнерских программах?
Объем информации

Реклама
9

Проверьте, подходит ли ваш сайт для участия в партнерской программе
Schema.org
Open Graph
Микроформат

XML

10

Выберите способ передачи данных
http://clck.ru/48Dyk

11

Семантическая разметка (schema.org, Open Graph, микроформаты)
XML
- расширяемый язык разметки
<offer id="12346" available="true">
<url>http://best.seller.ru/product_page.asp?pid=12348<...
Данные
•
•
•
•
•

13

Адреса
Товары и цены
Видео
Отзывы
Вакансии

Условия
• Нет
ненормативной
лексики
• Нет
порнографическ...
Типы данных
14

Внимательно изучите документацию
Добавьте разметку на свой сайт

15

<div itemscope itemtype="http://schema.org/Review">
<h2 itemprop="name"><a href="http:...
16

Плагины к популярным CMS и онлайн генераторы
17

Например, в WordPress это может выглядеть так
18

Не забудьте проверить - http://webmaster.yandex.ru/microtest.xml
19

Не забудьте проверить - http://webmaster.yandex.ru/microtest.xml
Часто задаваемые
вопросы

20
Часто задаваемые вопросы
• “Я сделал разметку, где мой сниппет?”

21
Часто задаваемые вопросы
• Какой формат микроразметки
использовать: микроданные,
микроформаты, RDFa?

22
Часто задаваемые вопросы
• Валидатор W3C воспринимает
микроданные как ошибку

23
Часто задаваемые вопросы
• Валидатор Яндекса выдает
предупреждения, а у меня все по
инструкции
ПРЕДУПРЕЖДЕНИЕ: чтобы ваши ...
Часто задаваемые вопросы
• Нужно ли размечать все свойства?

25
Часто задаваемые вопросы
• Влияет ли наличие семантической
разметки на сайте на ранжирование?

26
Часто задаваемые вопросы
• Когда вы начнете поддерживать
<название разметки>?

Следите за обновлениями на http://webmaster...
А еще семантическая
микроразметка поможет
красиво подать ваш сайт в
социальных сетях
28
29

Как подать сайт в социальных сетях?
• Ссылка на сайт в социальной сети может
выглядеть так

• А может, так

30
И еще один пример

31
32

The Open Graph protocol - http://ogp.me/
Пример разметки Open Graph
<meta property="og:title" content="Яндекс.Музыка">
<meta property="og:type" content="website">
...
og:title ведет на og:url

og:image

34

og:description
Не забудьте проверить свою
разметку!

35
Блок «Поделиться» для вашего сайта

http://api.yandex.ru/share/
36
Юлия Тихоход
Менеджер проектов
Семантический веб
tilid@yandex-team.ru

Твиттер: @Yulia_Tikhokhod

37
Upcoming SlideShare
Loading in …5
×

Передача дополнительных сведений о сайте с помощью семантической разметки

525 views

Published on

Передача дополнительных сведений о сайте с помощью семантической разметки
Общие рекомендации и ответы на часто задаваемые вопросы

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
525
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Передача дополнительных сведений о сайте с помощью семантической разметки

  1. 1. Передача дополнительных сведений о сайте с помощью семантической разметки Юлия Тихоход, Яндекс Менеджер проектов, Семантический веб Вебмастерская, 20.04.2013
  2. 2. Краткое содержание следующих 20 минут Как приготовить хороший борщ сниппет? Как подать сайт в социальных сетях? Ответы на прочие животрепещущие вопросы
  3. 3. 3 Как сварить борщ?
  4. 4. У хорошего сниппета тоже есть рецепт 4
  5. 5. Ингредиенты: 5 • Сайт – по вкусу; • Вебмастер – 1 шт. (можно взять верстальщика или разработчика); • Прямые руки – 2 шт.
  6. 6. Красивые сниппеты можно получить для: Яндекс Google Адреса и организации Товары и цены Рецепты Словари Рефераты Отзывы Фильмы Музыка Приложения Элементы навигации Люди 6 V V V V V V V V V V V V V V V V Документация Яндекса Документация Google http://help.yandex.ru/webmaster/ https://support.google.com/webmasters/
  7. 7. Какие еще данные можно передавать Яндексу: Вклады и кредиты Словари Вакансии Отзывы об автомобилях Отзывы об организациях Недвижимость Автообъявления Видео Оригинальные тексты 7
  8. 8. 8 Где искать информацию о партнерских программах?
  9. 9. Объем информации Реклама 9 Проверьте, подходит ли ваш сайт для участия в партнерской программе
  10. 10. Schema.org Open Graph Микроформат XML 10 Выберите способ передачи данных
  11. 11. http://clck.ru/48Dyk 11 Семантическая разметка (schema.org, Open Graph, микроформаты)
  12. 12. XML - расширяемый язык разметки <offer id="12346" available="true"> <url>http://best.seller.ru/product_page.asp?pid=12348</url> <price>699.54</price> <currencyId>USD</currencyId> <categoryId>6</categoryId> <picture>http://best.seller.ru/img/device12345.jpg</picture> <delivery>false</delivery> <local_delivery_cost>300</local_delivery_cost> <name>Золотые наручные часы </name> <vendor>Longines</vendor> <vendorCode>A1234567B</vendorCode> <description>Изящные золотые часы.</description> <country_of_origin>Швейцария</country_of_origin> </offer> 12
  13. 13. Данные • • • • • 13 Адреса Товары и цены Видео Отзывы Вакансии Условия • Нет ненормативной лексики • Нет порнографических материалов Способ передачи данных • • • • Schema.org Микроформаты XML Вебмастер
  14. 14. Типы данных 14 Внимательно изучите документацию
  15. 15. Добавьте разметку на свой сайт 15 <div itemscope itemtype="http://schema.org/Review"> <h2 itemprop="name"><a href="http://example.com/review?10231" itemprop="url">Отличный автомобиль. Рекомендую</a></h2> <img itemprop="image" src="http://example.com/img001.jpg"> <div>Отзыв написал <span itemprop="author" itemscope itemtype="http://schema.org/Person"> <p itemprop="name"> <a itemprop="officialWebPage" href="http://example.com/users/vasya">Вася Пупкин</a></p> </span> <meta itemprop="datePublished" content="2012-07-15">15 июля 2012. </div> <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> <meta itemprop="worstRating" content="0"/> <p>Оценка: <span itemprop="ratingValue">9</span> из <span itemprop="bestRating">10</span>.</p> </div> <div itemprop="pro">Комфортный, надежный, экономичный автомобиль. Мощный и маневренный, отлично слушается руля</div> <div itemprop="contra">Ненадежный глушитель</div> <div itemprop="reviewBody"> <p>Отличный, неприхотливый авто, с недорогим обслуживанием. Достаточно вместительный.</p>
  16. 16. 16 Плагины к популярным CMS и онлайн генераторы
  17. 17. 17 Например, в WordPress это может выглядеть так
  18. 18. 18 Не забудьте проверить - http://webmaster.yandex.ru/microtest.xml
  19. 19. 19 Не забудьте проверить - http://webmaster.yandex.ru/microtest.xml
  20. 20. Часто задаваемые вопросы 20
  21. 21. Часто задаваемые вопросы • “Я сделал разметку, где мой сниппет?” 21
  22. 22. Часто задаваемые вопросы • Какой формат микроразметки использовать: микроданные, микроформаты, RDFa? 22
  23. 23. Часто задаваемые вопросы • Валидатор W3C воспринимает микроданные как ошибку 23
  24. 24. Часто задаваемые вопросы • Валидатор Яндекса выдает предупреждения, а у меня все по инструкции ПРЕДУПРЕЖДЕНИЕ: чтобы ваши данные использовались в сервисе Яндекс.Видео необходимо дополнительно указать поля: og:video, og:video:type, og:image ПРЕДУПРЕЖДЕНИЕ: поле itemReviewed/model отсутствует или пусто 24
  25. 25. Часто задаваемые вопросы • Нужно ли размечать все свойства? 25
  26. 26. Часто задаваемые вопросы • Влияет ли наличие семантической разметки на сайте на ранжирование? 26
  27. 27. Часто задаваемые вопросы • Когда вы начнете поддерживать <название разметки>? Следите за обновлениями на http://webmaster.ya.ru/ 27
  28. 28. А еще семантическая микроразметка поможет красиво подать ваш сайт в социальных сетях 28
  29. 29. 29 Как подать сайт в социальных сетях?
  30. 30. • Ссылка на сайт в социальной сети может выглядеть так • А может, так 30
  31. 31. И еще один пример 31
  32. 32. 32 The Open Graph protocol - http://ogp.me/
  33. 33. Пример разметки Open Graph <meta property="og:title" content="Яндекс.Музыка"> <meta property="og:type" content="website"> <meta property="og:image" content="http://music.yandex.ru/i/jUU164Zv_c9bhjOkFkqK7DXn DI8.png"> <meta property="og:site_name" content="Яндекс.Музыка"> <meta property="og:locale" content="ru_RU"> <meta property="og:description" content="Яндекс.Музыка миллионы легальных треков, бесплатно и без регистрации. Постоянные обновления каталога, все жанры и направления."> 33
  34. 34. og:title ведет на og:url og:image 34 og:description
  35. 35. Не забудьте проверить свою разметку! 35
  36. 36. Блок «Поделиться» для вашего сайта http://api.yandex.ru/share/ 36
  37. 37. Юлия Тихоход Менеджер проектов Семантический веб tilid@yandex-team.ru Твиттер: @Yulia_Tikhokhod 37

×