Микроразметка видео на сайте

Здравствуй, друзья.

Так как тема микроразметки на данный момент стала сильно актуальна и интересует все больше веб-мастеров, то я продолжаю рассказывать про ее внедрение для различных элементов.

В предыдущей статье про микроразметку я очень подробно расписал принцип семантической разметки для основных типов данных на ресурсе. Показал, как по шагам разметить все основные элементы сайта от А до Я.

В этой же статье я покажу, как сделать микроразметку видео, если вы их используете в своих статьях. Данный материал будет полезен, как обычных информационным сайтам, где преобладает именно текстовый контент, но в дополнение размещается и видео в статьях. Но в первую очередь будет ой как полезен именно видео-сайтам, где только видео контент. Это всевозможные сайты онлайн просмотров.

Зачем нужна микроразметка видео

Раньше данный вопрос был очень актуален, так как микроразметка видеофайлов на сайте помогала выделить сниппет в поисковой выдачи, что значительно повышало его кликабельность. Очень часто такие видео-сниппеты в выдаче вы можете видеть от популярных видео-хостингов (youtube, vimeo и им подобные).

Сейчас вы можете видеть подобные превью видео в сниппетах только лишь на популярных видео хостингах. В 2014 году вместе с авторством отменил и данный тип сниппета. Точнее, не отменил, убрал из большой группы сайтов. Оставил только youtube, vimeo и другие популярные видео-сайты.

Поэтому, если вы хотите разметить свои видео, чтобы добиться такого видео-сниппета, то можете забыть. В первую очередь, когда делаем разметку видео, то ставим целью указать поисковым системам о его присутствии, а также рассказать о нем. Если видео будет тематическое при его разметке, то оно будет повышать релевантность страницы и повышать ее качество. Таким образом можем рассчитывать, что данная страница будет занимать более высшие позиции в поиске.

к содержанию ↑

Реализация

Проблема микроразметки видео в том, что к каждом видео необходимо сгенерировать определенный список данных, которые его описывают, а также вставить их в определенные теги, которые стоит добавить к каждому видео на каждой странице, где оно есть. И причем, это нужно сделать именно в текстовом (html) режиме, так как визуальный режим попросту обрезаем все теги и при обновлении страницы в редакторе вся разметка исчезнет.

Итак, что это это за данные:

1. Название видео;
2. Описание;
3. Продолжительность;
4. Ссылка на видеоролик;
5. Дата загрузки на сайт, где оно размещено
6. Путь к превью видео + его ширина и высота;
7. Также стоит указать, допустим ли просмотр видео детьми.

Что самое примечательно, так это отличие необходимых тегов микроразметки видео для обеих основных поисковых систем (Яндекс и Google). Для Google достаточно будет данных в первых 5ти пунктах. Яндекс же более привередлив и требует еще указать отдельную разметку миниатюры видео и указать, допустим ли просмотр этого видео-ролика детьми.

Различия в работе Яндекса и Google достаточно долго затрудняли процесс составления такого кода разметки, который бы был без ошибки для обеих поисковых систем, ведь ориентироваться на что-то одно, как минимум, неправильно.

В пример я буду показывать разметку видео, которое размещено на Youtube. То есть я загрузил свое видео на Youtube, затем разместил в своей статье на блоге и разметил.

Ниже даю код, который содержит в себе все теги необходимых данных для обеих ПС.

Именно такой код содержит минимальный набор описания видео, чтобы обе поисковые системы не выдавали ошибки при проверке микроразметки в валидаторе.

Вы можете воспользоваться каким-то сервисом для генерации автоматического кода, введя лишь ссылку на видео, но я из всех их числа не встречал такого, который бы выдавал код готового размеченного видео под обе поисковые системы. В основном ориентир идет только на Google.

Как же теперь заполнить необходимые пробелы в данном коде под свое видео? Пройдемся по каждому тегу.

Сначала хочу заметить, что весь код обернут в тег со свойством сущности, что это именно виде-объект. Внутри этого блока еще имеется один блок (открывается в строке 2 и закрывается в строке 15), внутрь которого заключены все необходимые теги. Это я сделал для того, чтобы данному блоку в стилях приписать свойство display:none, которое скроет довольно большой отступ, образующий пустое место из-за данных мета-тегов. Посетитель их не видит (кроме миниатюры), а отступ довольно большой имеется, так как каждый тег занимает свою строку.

В коде в необходимых местах я пометил, что нужно заполнить. Теперь рассмотрим, как нужно внести все данные.

• Описание - просто вставляем то описание видео-ролика, которое давали на самом Youtube;
• Ссылка на видео-ролик - заходим на страницу необходимого видео, копируем адрес страницы и вставляем;
• Имя - название видео с Youtube;
• Дата загрузки - указываем дату загрузки именно на тот сайт, откуда оно будет подгружаться, то есть на хостинге чьего ресурса оно размещено. В нашем случае - это youtube. Указываем в формате "год-месяц-число", например "2015-05-12";
• Продолжительность видео - указываем в следующем формате: T6M34S, где 6 - минуты, 34 - секунды;
• Путь к превью видео: все видео на youtube имеют один путь к своим миниатюрам:
  
  http://img.youtube.com/vi/уникальный адрес (идентификатор)/maxresdefault.jpg

  1	http://img.youtube.com/vi/уникальный адрес (идентификатор)/maxresdefault.jpg

  
  Отличен лишь их идентификатор, который такой же, как и у самого видео. В видео он прописывается после "v=" и имеет примерно следующий вид "Uga-qGt3PzM". Путь к превью в данном случае будет следующим:
  
  http://img.youtube.com/vi/Uga-qGt3PzM/maxresdefault.jpg

  1	http://img.youtube.com/vi/Uga-qGt3PzM/maxresdefault.jpg

  
  Это путь к максимальному размеру превью. Можно брать и другие размеры, но не вижу в этом смысла для разметки.
• Ширина и высота видео - указываем те значения, которые соответствуют самому видео на сайте. Если я поделился видео и мне Youtube сгенерировал его код iframe с размерами 640x360, то их я и укажу в этом параметре;
• Код iframe самого видео мы берем с youtube в блоке поделиться.

Предоставлю готовый вариант размеченного видео, чтобы вы все могли сравнить и сопоставить с вышеописанными параметрами тегов.

Это конечный вариант, который мы должны разместить в текстовом (html) режиме на странице своего сайта.

К блокам, которые оборачивают весь код разметки и ее теги, необходимо задать совсем простые стили, которые будут выравнивать видео по центру страницы и скрывать содержимое всех тегов микроразметки, чтобы не было видно пустых строк на сайте.

Далее стоит лишь проверить, что код нормально ведет себя в валидаторе обеих поисковых систем.

к содержанию ↑

Проверка микроразметки

Сперва заходим в валидатор Яндекса и проверяем ту страницу, где имеется хотя бы одно размеченное видео. После проверки мы не должны увидеть ни одной ошибки и получить минимальный набор требуемых данных.

Далее идем в инструмент проверки структурированных данных Google и также вводим адрес для проверки.

Опять же, не должно быть ни одной ошибки и должны увидеть следующую картину.

Если все правильно, то можно заканчивать. Если же нет, тогда идем еще раз по материалу сей статьи и анализируем, что сделали не так. Если же ошибки устранить у вас не получается, тогда обращайтесь в комментариях. Во всем постараемся разобраться.

На этом все, друзья. Тема микроразметки еще не исчерпала себя, поэтому ждите следующих материалов в данной теме. До скорой.

С уважением, Константин Хмелев!

P.S. Интересно, что к одной странице на моем сайте Google все таки сформировал видео-сниппет и довольно быстро сразу после индексации самого документа. Причем, о микроразметке видео я тогда и не знал. Превью видео в сниппете держится и до сих пор.