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

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

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

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

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

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

Раньше данный вопрос был очень актуален, так как микроразметка видеофайлов на сайте помогала выделить сниппет в поисковой выдачи, что значительно повышало его кликабельность. Очень часто такие видео-сниппеты в выдаче вы можете видеть от популярных видео-хостингов (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 имеют один путь к своим миниатюрам:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

40 лет Победы51937Украина, Днепропетровская обл., г. Днепродзержинск,+38 093 338 11 41
Комментариев: 38
  • Спасибо за материал.
    Стоит ли закрывать ссылки на schema.org,ютуб от индексации?

    • Ничего закрывать не нужно. Какой толк от разметки, если ее не будет видно?

      • Имелось ввиду, чтобы вес не убегал.

        • Это всего лишь теги разметки, в которых прописан словарь разметки. Ссылками это не считается. Если бы так было, тогда мне пришлось бы закрыть от индексации пол шаблона, так как много элементов размечено)

  • Использовал Ваши стили, но, к сожалению, большие отступы остаются.

    • Отступов быть не должно. Судя по всему, вы что-то сделали не так.

  • Приветствую! Ну вообще, есть варианты для автоматического подтягивания данных из ютуба. Например , есть плагин платный от Yaost Так и назвается Video SEO for WordPress, только там ценник конский. И несколько видео на одной странице он не поддерживает.
    Я написал плагин для более удобного ввода данных https://wordpress.org/plugins/insert-video-with-schemaorg-ivws/. В редакторе шорткод добавляется с формой, а то ВП всю разметку сносит в если так просто теги вносить.

    • Валидатор и гугла и яндекса ошибок не выдают?

      • При разметке плагином? Нет не выдают.

        • Нужно будет попробовать. Если косяков не будет, то непременно сделаю отдельный пост про плагин. Еще один вопрос. А как насчет конфликтации рейтинга страницы с разметкой видео, выводимой плагином? Столкнулся с проблемой, когда в статье, где имеется оценка и разметка хотя бы одного видео, рейтинг перестает выводиться в выдаче гугла. Не сразу, но по ходу индексации разметки видео рейтинг перестает отображаться. Как говориться, что-то одно на выбор. С плагином так же?

  • Хм, честно говоря не проверял. Но в первый раз слышу чтобы такие конфликты были. В плагине сделано так, что разметка видео будет вложенной в Article или BlogPost (в зависимости от того как размечается). Может быть в этом проблема... Надо проверять

  • Когда-то начинала делать разметку, но в теме обнаружился файл schema-markup.php и поняла, что еще моя разметка не понадобится

    • У вас в теме куча ошибок разметки, которые стоило бы поправить)

      • Ну, обалдеть, а я то обрадовалась, что тут-то у меня проблем нет. Автор тему создавал, а мне теперь искать ошибки... Спасибо, что указали )

  • Спасибо за статью! Единственный сайт в рунете, который дал такую подробуную информацию по микроразметке в WordPress.

  • Сделал все по Вашему примеру. Яндекс не ругается. Гугл выдает вот такую ошибку thumbnailUrl:отсутствует (обязательное). Что нужно дописать в разметке?

    • Когда я этот код использовал, то не было ни единой ошибки. Если все сделали правильно и код на данный момент актуален, тогда все должно быть ок. Вероятно, все еже что-то упустили. Обязательно должны быть заполнены все данные, как в примере моего кода.

      • Все данные заполнены. Полностью был скопирован Ваш код и вставлены свои данные. Но почему то Google ругается. В Вашем коде данного тега нет. Возможно он уже не актуален. Посмотрите сами. Может стоить добавить?

        • Стоит добавить данный тег в мой код, и тогда ошибки не будет.

    • У гугла требования сменились. Теперь требует указывать ссылку на миниатюру видео. Используйте плагин https://wordpress.org/plugins/insert-video-with-schemaorg-ivws/
      С этим плагином все будет нормально

      • Ставить из-за одного тега целый плагин - считаю не целесообразным. Мне только бы узнать как этот тег прописать в разметке и все.

        • Что ж все так плагинов бояться, кошмар какой-то...
          Примерно так это можно прописать

          Добавляете в любом месте до iframe
          А плагин всеже удобнее, если на сайте больше одного видео

          • Плагин действительно в этом плане удобней, если делает разметку автоматически и разметка в нем обновляется.

          • Конечно, автоматически. Только надо данные видео добавить и все.

        • Оп-па! Код пропал, тогда так

  • Подскажите как для вордпресса разметить видео

  • Благодарю за полезную статью, а то свихнешься подгонять все параметры. яндекс валидатор одобрил оба видео, но миниатюры в коде обозначились у каждого по своему.

    Гугл же ругаться не стал, но решил соединить оба описания в кучу на каждом из видео. Может это из-за некорректного указания сущности страницы: BlogPosting?

    • Не могу ничего точно сказать, не видя саму страницу с разметкой. Сущность BlogPosting тут вряд ли причем. Скорей всего, что допущены ошибки в ваших действиях, но подтвердить и посоветовать что-то не могу, не проанализировав вашу страницу.

      • вот эта страница: http://grafology.me/videoblog/ Гугл ее и сливает в кучу в описании разметки, яндекс же воспринимает корректно. Сможете подсказать что там не так, Константин? Если необходимо, могу выслать код в л/с или на почту.

        • Быстро посмотрел код страницы и сразу наткнулся на ошибку.

          У вас зачем-то прописан открывающий тег спан внутри тег сущности области контента.

          Уберите

  • Здравствуйте, после добавления видео с микроразметкой, возникла проблема: вылазит в рандомных местах код такого формата и гугл ругается на это в своей проверки структур. данных, помогите пожалуйста, не пойму никак почему оно добавляется.

    • Нашел, все из-за этой строчки, если ее убрать, то ничего не создает, но так же не верна будет микроразметка видео да?

      Как поступить в этом случае?

      • Здравствуйте. Верна или неверна, этого я не могу сказать. Проверьте страницу в валидаторах. К тому же я не понял о какой строчке вы говорите.

        • Речь идет о строчке где размечается thumbnail в тегах span - /span, если её удалить то гугл скажет все хорошо, а яндекс говорит, что её категорически не хватает. Я так понял дело в том, что у меня стоит автоматическая микроразметка изображений и миниатюр, и когда вставляю в теге img, то оно выдает какую-то чепуху смешивая разметки и добавляя новые строчки.

  • Доброго времени суток!
    Константин подскажите, в выдаче Яндекса при поиске видеоматериалов видео некоторых сайтов показано со звездочками. Как такого добиться? У меня как статья так и само видео размечено с рейтингом, но звезды не появляются.

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

  • уважаемый автор, а что за плагин содержания у вас стоит?

    • На блоге стоит не плагин, и определенный код от wp-kama, его можно найти в сети. На всех остальных своих сайтах я всегда использую плагин содержания TOC

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *