Правильная семантическая разметка для всех
-
Upload
yuliya-tikhokhod -
Category
Internet
-
view
184 -
download
3
Transcript of Правильная семантическая разметка для всех
![Page 1: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/1.jpg)
![Page 2: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/2.jpg)
Правильная семантическая разметка для всех
Юлия Тихоход, ЯндексМенеджер проектов, Семантический вебВебмастерская, 21.05.2015
Логотип партнераЛоготип Яндекса (Сервиса)
![Page 3: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/3.jpg)
3
О чем это мы?
• Возможности семантической разметки
• Яндекс и расширение schema.org
• Новый инструмент для проверки микроразметки
![Page 4: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/4.jpg)
![Page 5: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/5.jpg)
5
![Page 6: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/6.jpg)
6
![Page 7: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/7.jpg)
7
![Page 8: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/8.jpg)
8
Семантическая микроразметка –
это разметка страницы с дополнительными тегами и атрибутами в тегах, которые указывают поисковым роботам на то, о чем написано на странице.
![Page 9: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/9.jpg)
![Page 10: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/10.jpg)
10
• О чем это мы?
Возможности семантической разметки
• Яндекс и расширение schema.org
• Новый инструмент для проверки микроразметки
![Page 11: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/11.jpg)
11
Семантическая микроразметка в Яндексе
• Вид сайта в результатах поиска (специальный сниппеты)
• Яндекс.Видео
• Яндекс.Справочник
• Яндекс.Авто
![Page 12: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/12.jpg)
Новые специальные сниппеты
![Page 13: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/13.jpg)
13
Товары и цены
![Page 14: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/14.jpg)
14
Вопросы и ответы
![Page 15: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/15.jpg)
15
Программы
![Page 16: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/16.jpg)
16
Заголовки из Open Graph
![Page 17: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/17.jpg)
17
Рецепты
![Page 18: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/18.jpg)
Другие возможности микроразметки
![Page 19: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/19.jpg)
19
Словарная статья
![Page 20: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/20.jpg)
20
Творческие работы
![Page 21: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/21.jpg)
21
Фильм
![Page 22: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/22.jpg)
22
Использование в Яндексе - Видео
![Page 23: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/23.jpg)
23
Использование в Яндексе - Авто
![Page 24: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/24.jpg)
24
Использование в Яндексе - Справочник
![Page 25: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/25.jpg)
│ Влияет ли наличие семантической разметки на сайте на ранжирование?
![Page 26: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/26.jpg)
│ Я вчера разметился и не вижу результатов в поиске. Что делать?
![Page 27: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/27.jpg)
│ Нужно ли размечать все свойства?
![Page 28: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/28.jpg)
Иногда возможностей schema.org не хватает
![Page 29: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/29.jpg)
29
• О чем это мы?
• Возможности семантической разметки
Яндекс и расширение schema.org
• Новый инструмент для проверки микроразметки
![Page 30: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/30.jpg)
Работа в составе рабочей группы Schema.org
• VideoGame
• Car
• PeopleAudience
• PropertyValueSpecification
![Page 31: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/31.jpg)
31
Версия schema.org c расширениями Яндекса
https://webmaster.yandex.ru/yaschema
http://bit.ly/ya_schema
![Page 32: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/32.jpg)
32
Версия schema.org c расширениями Яндекса
![Page 33: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/33.jpg)
33
Версия schema.org c расширениями Яндекса
![Page 34: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/34.jpg)
Размечаешь? Проверяй!
![Page 35: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/35.jpg)
35
• О чем это мы?
• Возможности семантической разметки
• Яндекс и расширение schema.org
Новый инструмент для проверки микроразметки
![Page 36: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/36.jpg)
36
API валидатора микроразметки
API
![Page 37: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/37.jpg)
37
API валидатора микроразметки
• автоматизировать проверку микроразметки на большом количестве страниц;
• разрабатывать плагины для различных CMS;
• извлекать структурированные данные из сайтов для использования в своих проектах.
![Page 38: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/38.jpg)
38
Большие сайты
• Много страниц
• Часто добавляются новые страницы с микроразметкой
• Нужно убедиться в правильности микроразметки на всех страницах без лишних трудозатрат
Например, ozon.ru, lenta.ru
![Page 39: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/39.jpg)
39
CMS
• У вас есть навыки программирования и энтузиазм
• CMS допускает написание и использование собственных плагинов
• Для собственного использования или для широкой публики
Например, плагины для WordPress или модули для 1С-Битрикс
![Page 40: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/40.jpg)
40
Данные, извлеченные из микроразметки
• Поиск по атрибутам
• Повторное использование информации
• Помните об авторском праве!
![Page 41: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/41.jpg)
41
Режимы работы
• Проверка по HTML или по URL
• В результате – все данные, извлеченные из микроразметки, или только ошибки
![Page 42: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/42.jpg)
42
Версия 1.0 API валидатора микроразметки
• Добавлен режим «Только ошибки»
• Улучшена работа с разметкой в синтаксисе RDFa
• Исправлены ошибки в работе
![Page 43: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/43.jpg)
│ Валидатор Яндекса выдает предупреждения, а у меня все по инструкции. Что делать?
43
![Page 44: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/44.jpg)
Подведем итоги
![Page 45: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/45.jpg)
45
Что нового?
• Новые возможности для улучшения внешнего вида сайта в результатах поиска
• Копия schema.org с расширениями Яндекса
• API Валидатора микроразметки версия 1.0
![Page 46: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/46.jpg)
│ Ваши вопросы
![Page 47: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/47.jpg)
Полезные ссылки
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 Валидатора микроразметки
http://bit.ly/ya_swslide15
Цикл постов о семантической разметке на Habrahabr
![Page 48: Правильная семантическая разметка для всех](https://reader035.fdocuments.net/reader035/viewer/2022062220/55b638a5bb61ebe10f8b461d/html5/thumbnails/48.jpg)
+7 495 739-70-00 (3104) Tihohodka
yuliya.tikhokhod
Юлия Тихоход
Менеджер проектов, Семантический веб