Разметка видеороликов в статьях по Schema.org

Сделать разметку видеороликам по schema.org довольно просто. Достаточно внимательно прочитать документацию.

Для начала, давайте посмотрим документацию Google. Вот что в ней написано:

Добавьте разметку schema.org непосредственно в HTML-код страницы с видео. При сканировании страницы Google использует эти данные для индексирования видео. Хотя обязательными являются только некоторые свойства, рекомендуется также указать дополнительную информацию, которая поможет Google правильно обработать ваше видео и улучшить его отображение в результатах поиска.

<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
  <h2>Video: <span itemprop="name">Title</span></h2>
  <meta itemprop="duration" content="T1M33S" />
  <meta itemprop="thumbnailUrl" content="thumbnail.jpg" />
  <meta itemprop="contentUrl" content="http://www.example.com/video123.flv" />
  <meta itemprop="embedUrl" content="http://www.example.com/videoplayer.swf?video=123" />
  <meta itemprop="uploadDate" content="2011-07-05T08:00:00+08:00" />
  <meta itemprop="expires" content="2012-01-30T19:00:00+08:00" />
  <object ...>
    <param ...>
    <embed type="application/x-shockwave-flash" ...>
  </object>
  <span itemprop="description">Описание видео</span>
</div>

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

Разметка видеороликов по Schema.org

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

<div itemscope itemtype="http://schema.org/VideoObject" > <!--Указание типа объекта-->

    <a itemprop="url" href="http://mysite.com/view/306/" > <!--Ссылка на видеоролик-->
    
    <h1 itemprop="name"> Schema.org for Videos</h1></a><!--Название видео-->
    
    <p itemprop="description">The schema.org markup is our 
    recommended method for providing Google with the metadata
    needed to index your videos. Using it requires only a 
    few non-visible changes to your video web page. You can 
    find the full schema.org spec here: 
    http://www.schema.org/VideoObject </p > <!--Описание видео-->

    <meta itemprop="duration" content="PT6M58S"><!-- Продолжительность видео в формате ISO 8601-->

    <meta itemprop="isFamilyFriendly" content="True"><!-- допустим ли просмотр видео-ролика детьми-->

    <p>Дата загрузки: <span itemprop="uploadDate"> 
    2013-06-05 </span></p><!--дата загрузки видео-ролика на сайт в формате ISO 8601-->

   <span itemprop="thumbnail" itemscope 
   itemtype="http://schema.org/ImageObject" > <!--описание изображения предпросмотра-->
   <img itemprop="contentUrl" 
   src="http://mysite.com/images/preview/img1.jpg" >
   <meta itemprop="width" content="250">
   <meta itemprop="height" content="120">
    </span>
</div>

Остается только добавить нужные теги к нашему видеоролику. Как это сделать, можно узнать из видео ниже

Друзья! Самый простой способ разметки видео с Ютуба — это воспользоваться моим плагином IVS. Плагин формирует шорткод сразу с разметкой.

Всем удачи!

Всегда ваш, Артем Абрамович.

20 комментариев
  • Василий

    28.12.2014

    Артем, спасибо. Очень полезная информация, которая помогает понять принципы создания микроразметки видео.

    • artikus

      28.12.2014

      Пожалуйста, Василий. Рад оказаться полезным

  • Дмитрий

    08.09.2015

    День добрый!Подскажите пожалуйста как решить эту проблему.
    Яндекс ругается (microdata)
    скрин:
    _http://i69.fastpic.ru/big/2015/0906/42/ed7062e0b8628f79698ee92852f10342.png
    скрин:
    _http://i69.fastpic.ru/big/2015/0906/a2/d2f7afd716469bfd7a2ef8a220a7e1a2.png
    Заранее спасибо за помощь!

    • Артем

      09.09.2015

      Добрый день! Эта ошибка говорит о том, что нет основного обозначения. Например, если вы размечаете видео, то должно быть так в начале разметки
      itemscope itemtype="http://schema.org/VideoObject"

      • Дмитрий

        09.09.2015

        Большое спасибо за помощь!

        • Артем

          09.09.2015

          Не за что. Рад оказаться полезным

  • Иван

    25.10.2015

    Здравствуйте, не подскажите как решить проблему с тем, что гугл ругается на разметку thumbnail, говорит, что нет ее. Хотя есть.

    что здесь не так?

    • Артем

      25.10.2015

      Добрый день! Что-то не вижу у вас ошибок, вроде все верно сделано

      • Иван

        25.10.2015

        Все нормально, Артем, спасибо — все сделал нормально. Просто Костя Хмелев забыл дописать одну строчку. Я видел вы с ним тоже переписывались на его блоге.

        • Артем

          25.10.2015

          Отлично. Если что, пишите-спрашивайте, всегда рад помочь

  • Иван

    25.10.2015

    Спасибо за отзывчивость

  • Вадим

    08.04.2016

    А вот если у меня не фрейм с ютуба, а свое видео с сервера <source src="/video/…mp4 так его также можно вставлять в поле там где ссылка на видео?

    • Артем

      08.04.2016

      Вместо фрейма и вставлять, как раз будет то что требуется

      • Вадим

        11.04.2016

        Спасибо вам большое за помощь и статью=)

  • Алексей

    29.05.2016

    Сегодня весь вечер занимался разметкой видео. В итоге возник вопрос. Зачем размечать видео с ютуба!? Ведь у него и так есть разметка! По любому там все видео индексируется.
    Если создать свой видео сервис тогда да микроразметка нужна. Или я все таки не прав и видео с туба нужно размечать?

    • Артем

      29.05.2016

      Абсолютно правы. Просто не все сие понимают.

      • Анатолий

        14.09.2016

        Спасибо за видео.
        Но я правильно понял, что видео с Youtube размечать не нужно?

        • Артем

          14.09.2016

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

  • Мастер

    06.05.2017

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

  • Дизайнер

    16.06.2017

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

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

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