Документ описывает микроразметку и её преимущества для сайтов, включая улучшение внешнего вида в поисковых системах и социальных сетях. Он также охватывает различные форматы передачи данных и синтаксисы, такие как JSON-LD и RDFa, а также ошибки в микроразметке, которые следует избегать. Включены рекомендации по проверке и внедрению микроразметки на основе анализа конкурентов.

1. Сайт Школы
Канал на YouTube

2. Структурированные
данные на поиске
Юлия Тихоход
Школа Вебмастеров, 10.11.2015

3. Что такое микроразметка
и в чём её польза

4. 5

5. Микроразметка – это когда вы в существующую
верстку сайта добавляете несколько дополнительных
атрибутов и роботы начинают лучше вас понимать

6. Кто понимает микроразметку
7
Социальные сети Поисковые системы Другие потребители

7. Что дает микроразметка
• Улучшает внешний вид сайта в результатах поиска
• Делает ссылки в социальных сетях более красивыми
• Дает возможность различным сервисам использовать
данные, размещенные на вашем сайт
8

8. Чего микроразметка не дает
Напрямую микроразметка на позицию в результатах поиска не
влияет
9

9. Что дает микроразметка
10

10. Что дает микроразметка
11

11. А оно правда надо?
Сниппеты, построенные с использованием микроразметки,
имеют CTR в среднем на 2% больше (до 5% на десктопе, до 7%
на мобильных устройствах), чем обычные сниппеты для тех же
сайтов.
Доля длинных кликов растет в среднем на 2,5%
12

12. Что дает микроразметка
13

13. Что дает микроразметка
14

14. 15

15. Передача данных в
машиночитаемом виде

16. Способы передачи данных
• Семантическая разметка
• XML
• XLS, CSV
• Заполнение специальных форм
17

17. XML
• Учитывайте обязательность элементов
• Не забывайте экранировать специальные символы и
оборачивать HTML-код CDATA
• Передавайте дату в машиночитаемом ISO 8601
• Не вписывайте произвольные значения в элементы с
ограниченным набором значений
18

18. Название партнерской программы Способы передачи данных
Автообъявления XML
Адреса и организации
Микроразметка, XLS, заполнение
спец.формы
Вакансии XML
Видео XML, микроразметка
Вопросы и ответы микроразметка

19. Название партнерской программы Способы передачи данных
Творческие работы Микроразметка
Недвижимость XML
Отзывы XML, микроразметка
Программы Микроразметка
Письма Микроразметка

20. Название партнерской программы Способы передачи данных
Рефераты Микроразметка
Рецепты Микроразметка
Товары и цены XML, микроразметка
Фильмы Микроразметка

21. Семантическая разметка для других
сервисов
• Google – специальные сниппеты, оформление писем в списке
входящих, обогащение Knowledge Graph.
• Bing – специальные сниппеты
• Pinterest – расширенные пины
• Facebook, vk, twitter, G+ - красивые ссылки в социальных
сетях
22

22. Типы микроразметки

23. 24

24. Словарь
Соглашение о том, как будут называться сущности, и как они
будут друг с другом соотносятся.
Словари бывают:
• Универсальные
• Специализированные
Вы можете создать свой словарь.
25

25. 26

26. Пример
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="name">Кровать Мелисса с мягкой спинкой</div>
<a itemprop="image" href="products_pictures/large_krovat-mellisa-smyagkoispink.jpg">
<img src="products_pictures/medium_krovat-mellisa-smyagkoispink.jpg" title="Кровать
Мелисса">
</a>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div>7 150 руб.</div>
<meta itemprop="price" content="7150.00">
<meta itemprop="priceCurrency" content="RUB">
</div>
</div> 27

27. Синтаксис
Соглашение о том, каким способом сущности будут внедряться
в существующий HTML-код
28

28. 29

29. Микроданные
• itemscope - говорит о том, что внутри данного HTML-тега
содержится некая сущность
• itemtype – говорит о том, какого типа эта сущность. Itemscope
и itemtype всегда идут в паре
• itemprop – указывает на свойства сущности. Все itemprop
должны быть размещены внутри HTML-тега, в котором
объявлена сущность, к которой они относятся
30

30. JSON-LD
• @context определяет словарь
• @type — тип описываемой сущности
• Ключи и значения чувствительны к регистру
• Имена ключей в одном и том же объекте не должны
повторяться
31

31. RDFa
• Если в коде используются префиксы, лучше указать их явно в
<html> атрибутом prefix
• Свойства задаются с помощью атрибута property
• Типы указываются с помощью атрибута typeof
32

32. Популярные сочетания словарей и
синтаксисов
• Open Graph + RDFa
• Schema.org + microdata
• Schema.org + JSON-LD
• Data-vocabulary.org + RDFa
33

33. Передача данных об
интернет-магазине

34. Размещение магазина в Яндекс.Маркете
1. Зарегистрируйтесь
2. Подготовьте информацию о товарах в форме YML, XLS или
CSV файла
3. Выберите подходящий способ оплаты (плата за клик,
комиссия за заказ, оплата по дням)
4. Настройте и оплатите размещение

35. Передача данных для ПС и соц.сетей
Внедрение Open Graph, Twitter Card App
Link1
▌ Просмотр существующих партнерских программ у ПС
▌ Выбор подходящих вашему сайту
2
▌ Выбор способа передачи данных
▌ Заполнение обязательных полей
▌ Заполнение необязательных полей
3
▌ Проверка данных
▌ Исправление ошибок
36

36. Общая схема на примере
37

37. Разметка Open Graph
• Заполнить обязательные поля: og:url, og:image, og:title,
og:type
• og:title – короткий заголовок страницы. Не содержит url
страницы и спама
• og:url – канонический url страницы, без параметров
38

38. Разметка Open Graph
• og:description - несколько предложений, характеризующих
содержимое страницы
• og:image – для главной страницы и для страниц, не
содержащих изображений – логотип, для остальных страниц
сайта – основное изображение на странице
• og:type – для большинства интернет-магазинов – website.
Полный список типов – http://ogp.me/#types
39

39. Разметка Twitter Card
• Twitter понимает Open Graph
• Сопоставление свойств Open Graph и Twitter Card -
https://dev.twitter.com/cards/markup
• Для некоторых видов контента есть специфичная для
твиттера разметка
40

40. Добавление App Link
• Имеет смысл, если у вас есть мобильное приложение
• Позволяет отправлять пользователей сразу в приложение
41

41. Передача данных Яндексу
42

42. Передача данных Яндексу
• Адрес
• Видео
• Творческие работы (статьи)
• Товары и цены
43

43. Передача данных Google
44

44. Передача данных Google
• Данные для Knowledge Graph
• Товары и цены
• Отзывы
• Видео
• Статьи
45

45. Приоритезация
• Товары и цены (сниппеты и, возможно, Яндекс.Маркет)
• Отзывы (для Google)
• Адреса (в т.ч. Для Knowledge Graph)
• Видео
• Статьи
46

46. Принципы выбора способа передачи
данных
• Простота внедрения
• Простота поддержки
• Универсальность (подходит для разных потребителей или
нет)
• Скорость обновления данных
47

47. А теперь способ выбора микроразметки
для ленивых
1. Берете несколько (3-5) страниц конкурентов с контентом, похожим
на ваш
2. Берете валидатор микроразметки (например, яндексовый)
3. Прогоняете типовые страницы через валидатор и смотрите, какая
разметка есть у конкурентов
4. Внедряете у себя такую же
5. Profit!
48

48. Проверка правильности
данных

49. Проверяйте микроразметку в разных
валидаторах
50
Валидатор Яндекса
http://bit.ly/ya_validator
Валидатор Google
http://bit.ly/google_validator
Валидатор Facebook
http://bit.ly/fb_debug

50. Валидатор Яндекса
51

51. Валидатор Яндекса
52

52. Валидатор Google
53

53. Валидатор Google
54

54. Валидатор Facebook
55

55. Топ-5 ошибок в микроразметке
• В RDFa (в т.ч. Open Graph) не указан префикс, не
являющийся префиксом по умолчанию
• В микроданных itemprop указаны за границами тега,
содержащего itemscope, или атрибут itemscope не указан
• Пропущены обязательные для получения результата поля
• Неверный формат даты (не ISO 8601)
• Использование неверного типа данных
56

56. Не всякая микроразметка одинаково
полезна
57

57. 58

58. Проверяйте микроразметку регулярно
59
Вы меняете верстку и микроразметка на вашем сайте ломается. Чтобы
вовремя узнать об этом, используйте API валидатора микроразметки.

59. Проверяйте XML-фиды
60

60. Проверяйте XML-фиды
61

61. Полезные ссылки
62
http://bit.ly/ya_syntax
http://bit.ly/ya_vocab
http://bit.ly/ya_swusage
http://bit.ly/ya_swstory
http://bit.ly/yasemweb - описание партнерских программ в Помощи
https://tech.yandex.ru/validator/ - API Валидатора микроразметки
Цикл постов о семантической
разметке на Habrahabr

62. Контакты
tilid@yandex-team.ru
tilid.me tihohodka
yuliya.tikhokhod
Юлия Тихоход
Руководитель группы семантического веба
63

63. Вопросы
64

64. Возможно ли использование цветных
символов (эмоджи) в заголовках и
описаниях сниппетов для интернет-
магазина?
│ В Google – да. В Яндексе – нет.

65. К чему приводит неправильная
микроразметка и как от этого страдает
внешний вид сайта и предоставляемой
информации?
│ Внешний вид сайта и информации не
страдает никак. На выдаче и в
социальных сетях могут быть
неправильные сниппеты.

66. Анализ микроразметки и результаты ее
обработки в Yandex и Google - несколько
различаются. Что в первую очередь следует
учитывать при формировании шаблонов
страниц?
│ Яндекс проверяет микроразметку более
строго. У Яндекса и Google различается набор
обязательных полей для разных типов.
Старайтесь указывать обязательные поля
для обеих поисковых систем.

67. При создании сайта, микроразметка - это что-
то само собой разумеющееся или необходимо
отдельно прописывать эту опцию в тз?
│ Лучше ничего не считать само собой
разумеющимся и все прописывать в ТЗ. В том
числе и необходимость микроразметки. Все, что
вы не укажете в ТЗ, может быть использовано
против вас

68. Возможно ли организовать в сниппете на
позиции от 10 и ниже структурированные
данные?
│ Да, возможность построения
специальногго сниппета не зависит
от позиции сайта в результатах
поиска.

69. Какой смысл использовать Микроданные,
если Яндекс ищет только по нескольким их
видам (рецепты, видео, ...)?
│ Не Яндексом единым Микроразметка
довольно универсальная штука, ее
понимает не только Яндекс. Количество
типов, которые понимают ПС тоже растет.

70. Сайт Школы
Канал на YouTube