Передача дополнительных сведений о сайте с помощью...
DESCRIPTION
Передача дополнительных сведений о сайте с помощью семантической разметки Общие рекомендации и ответы на часто задаваемые вопросыTRANSCRIPT
![Page 1: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/1.jpg)
Юлия Тихоход, ЯндексМенеджер проектов, Семантический вебВебмастерская, 20.04.2013
Передача дополнительных сведений о сайте с помощью семантической разметки
![Page 2: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/2.jpg)
Краткое содержание следующих 20 минут
Как приготовить хороший борщ сниппет?
Как подать сайт в социальных сетях?
Ответы на прочие животрепещущие вопросы
![Page 3: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/3.jpg)
3
Место для фотографии или иллюстрации. Следите за разрешением картинки: в данном случае оно должно быть 1024х678 (и это не опечатка).
Как сварить борщ?
![Page 4: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/4.jpg)
4
У хорошего сниппета тоже есть рецепт
![Page 5: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/5.jpg)
5
Место для фотографии или иллюстрации. Следите за разрешением картинки: в данном случае оно должно быть 1024х678 (и это не опечатка).
Ингредиенты: • Сайт – по вкусу;• Вебмастер – 1 шт. (можно взять верстальщика или разработчика);• Прямые руки – 2 шт.
![Page 6: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/6.jpg)
6
Красивые сниппеты можно получить для:Яндекс Google
Адреса и организации V VТовары и цены V VРецепты V VСловари VРефераты VОтзывы V VФильмы VМузыка V VПриложения VЭлементы навигации VЛюди V
Документация Яндекса http://help.yandex.ru/webmaster/
Документация Google https://support.google.com/webmasters/
![Page 7: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/7.jpg)
7
Какие еще данные можно передавать Яндексу:
Вклады и кредитыСловариВакансииОтзывы об автомобиляхОтзывы об организацияхНедвижимостьАвтообъявленияВидеоОригинальные тексты
![Page 8: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/8.jpg)
8Где искать информацию о партнерских программах?
![Page 9: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/9.jpg)
9
Место для фотографии или иллюстрации. Следите за разрешением картинки: в данном случае оно должно быть 1024х678 (и это не опечатка).
Проверьте, подходит ли ваш сайт для участия в партнерской программе
Тематика сайта
тИЦ
Формат сайта
Реклама
Объем информации
![Page 10: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/10.jpg)
10Выберите способ передачи данных
Schema.org
Open Graph
Микроформат
XML
![Page 11: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/11.jpg)
11
http://clck.ru/48Dyk
Место для фотографии или иллюстрации. Следите за разрешением картинки: в данном случае оно должно быть 1024х678 (и это не опечатка).
Семантическая разметка (schema.org, Open Graph, микроформаты)
![Page 12: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/12.jpg)
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>
![Page 13: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/13.jpg)
13
Данные
• Адреса• Товары и цены• Видео• Отзывы• Вакансии
Условия
• Нет ненормативной лексики
• Нет порнографических материалов
Способ передачи данных
• Schema.org• Микроформаты• XML• Вебмастер
![Page 14: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/14.jpg)
14
Место для фотографии или иллюстрации. Следите за разрешением картинки: в данном случае оно должно быть 1024х678 (и это не опечатка).
Внимательно изучите документацию
Формат
Обязательные поля
Типы данных
![Page 15: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/15.jpg)
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>
![Page 16: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/16.jpg)
16Плагины к популярным CMS и онлайн генераторы
![Page 17: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/17.jpg)
17Например, в WordPress это может выглядеть так
Место для фотографии или иллюстрации. Следите за разрешением картинки: в данном случае оно должно быть 1024х678 (и это не опечатка).
![Page 18: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/18.jpg)
18
Место для фотографии или иллюстрации. Следите за разрешением картинки: в данном случае оно должно быть 1024х678 (и это не опечатка).
Не забудьте проверить - http://webmaster.yandex.ru/microtest.xml
![Page 19: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/19.jpg)
19
Место для фотографии или иллюстрации. Следите за разрешением картинки: в данном случае оно должно быть 1024х678 (и это не опечатка).
Не забудьте проверить - http://webmaster.yandex.ru/microtest.xml
![Page 20: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/20.jpg)
20
Часто задаваемые вопросы
![Page 21: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/21.jpg)
21
Часто задаваемые вопросы
• “Я сделал разметку, где мой сниппет?”
![Page 22: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/22.jpg)
22
Часто задаваемые вопросы
• Какой формат микроразметки использовать: микроданные, микроформаты, RDFa?
![Page 23: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/23.jpg)
23
Часто задаваемые вопросы
• Валидатор W3C воспринимает микроданные как ошибку
![Page 24: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/24.jpg)
24
Часто задаваемые вопросы
• Валидатор Яндекса выдает предупреждения, а у меня все по инструкции
ПРЕДУПРЕЖДЕНИЕ: чтобы ваши данные использовались в сервисе Яндекс.Видео необходимо дополнительно указать поля: og:video, og:video:type, og:image
ПРЕДУПРЕЖДЕНИЕ: поле itemReviewed/model отсутствует или пусто
![Page 25: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/25.jpg)
25
Часто задаваемые вопросы
• Нужно ли размечать все свойства?
![Page 26: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/26.jpg)
26
Часто задаваемые вопросы
• Влияет ли наличие семантической разметки на сайте на ранжирование?
![Page 27: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/27.jpg)
27
Часто задаваемые вопросы
• Когда вы начнете поддерживать <название разметки>?
Следите за обновлениями на http://webmaster.ya.ru/
![Page 28: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/28.jpg)
28
А еще семантическая микроразметка поможет красиво подать ваш сайт в социальных сетях
![Page 29: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/29.jpg)
29Как подать сайт в социальных сетях?
![Page 30: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/30.jpg)
30
• Ссылка на сайт в социальной сети может выглядеть так
• А может, так
![Page 31: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/31.jpg)
31
И еще один пример
![Page 32: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/32.jpg)
32
Место для фотографии или иллюстрации. Следите за разрешением картинки: в данном случае оно должно быть 1024х678 (и это не опечатка).
The Open Graph protocol - http://ogp.me/
![Page 33: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/33.jpg)
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_c9bhjOkFkqK7DXnDI8.png"><meta property="og:site_name" content="Яндекс.Музыка"><meta property="og:locale" content="ru_RU"><meta property="og:description" content="Яндекс.Музыка - миллионы легальных треков, бесплатно и без регистрации. Постоянные обновления каталога, все жанры и направления.">
![Page 34: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/34.jpg)
34
Место для фотографии или иллюстрации. Следите за разрешением картинки: в данном случае оно должно быть 1024х678 (и это не опечатка).
og:image
og:title ведет на og:url
og:description
![Page 35: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/35.jpg)
35
Не забудьте проверить свою разметку!
![Page 36: Передача дополнительных сведений о сайте с помощью семантической разметки](https://reader033.vdocuments.mx/reader033/viewer/2022042700/557ef30fd8b42a34628b51c6/html5/thumbnails/36.jpg)
36
Блок «Поделиться» для вашего сайта
http://api.yandex.ru/share/