Здравствуй, друзья.
Так как тема микроразметки на данный момент стала сильно актуальна и интересует все больше веб-мастеров, то я продолжаю рассказывать про ее внедрение для различных элементов.
В предыдущей статье про микроразметку я очень подробно расписал принцип семантической разметки для основных типов данных на ресурсе. Показал, как по шагам разметить все основные элементы сайта от А до Я.
В этой же статье я покажу, как сделать микроразметку видео, если вы их используете в своих статьях. Данный материал будет полезен, как обычных информационным сайтам, где преобладает именно текстовый контент, но в дополнение размещается и видео в статьях. Но в первую очередь будет ой как полезен именно видео-сайтам, где только видео контент. Это всевозможные сайты онлайн просмотров.
Зачем нужна микроразметка видео
Раньше данный вопрос был очень актуален, так как микроразметка видеофайлов на сайте помогала выделить сниппет в поисковой выдачи, что значительно повышало его кликабельность. Очень часто такие видео-сниппеты в выдаче вы можете видеть от популярных видео-хостингов (youtube, vimeo и им подобные).
Сейчас вы можете видеть подобные превью видео в сниппетах только лишь на популярных видео хостингах. В 2014 году вместе с авторством отменил и данный тип сниппета. Точнее, не отменил, убрал из большой группы сайтов. Оставил только youtube, vimeo и другие популярные видео-сайты.
Поэтому, если вы хотите разметить свои видео, чтобы добиться такого видео-сниппета, то можете забыть. В первую очередь, когда делаем разметку видео, то ставим целью указать поисковым системам о его присутствии, а также рассказать о нем. Если видео будет тематическое при его разметке, то оно будет повышать релевантность страницы и повышать ее качество. Таким образом можем рассчитывать, что данная страница будет занимать более высшие позиции в поиске.
к содержанию ↑Реализация
Проблема микроразметки видео в том, что к каждом видео необходимо сгенерировать определенный список данных, которые его описывают, а также вставить их в определенные теги, которые стоит добавить к каждому видео на каждой странице, где оно есть. И причем, это нужно сделать именно в текстовом (html) режиме, так как визуальный режим попросту обрезаем все теги и при обновлении страницы в редакторе вся разметка исчезнет.
Итак, что это это за данные:
- Название видео;
- Описание;
- Продолжительность;
- Ссылка на видеоролик;
- Дата загрузки на сайт, где оно размещено
- Путь к превью видео + его ширина и высота;
- Также стоит указать, допустим ли просмотр видео детьми.
Что самое примечательно, так это отличие необходимых тегов микроразметки видео для обеих основных поисковых систем (Яндекс и Google). Для Google достаточно будет данных в первых 5ти пунктах. Яндекс же более привередлив и требует еще указать отдельную разметку миниатюры видео и указать, допустим ли просмотр этого видео-ролика детьми.
Различия в работе Яндекса и Google достаточно долго затрудняли процесс составления такого кода разметки, который бы был без ошибки для обеих поисковых систем, ведь ориентироваться на что-то одно, как минимум, неправильно.
В пример я буду показывать разметку видео, которое размещено на Youtube. То есть я загрузил свое видео на Youtube, затем разместил в своей статье на блоге и разметил.
Ниже даю код, который содержит в себе все теги необходимых данных для обеих ПС.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="video-schema" itemprop="video" itemscope itemtype="http://schema.org/VideoObject"> <div id="video-schema-meta"> <meta itemprop="description" content="Тут вставляет описание"/> <meta itemprop="duration" content="Продолжительность"/> <link itemprop="url" href="ссылка на видео-ролик"/> <link itemprop="thumbnailUrl" href="Путь к превью видео"/> <meta itemprop="name" content="Название видео"/> <meta itemprop="uploadDate" content="Дата загрузки"/> <meta itemprop="isFamilyFriendly" content="true"/> <span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject" > <img itemprop="contentUrl" src="Путь к превью видео" /> <meta itemprop="width" content="Ширина видео"/> <meta itemprop="height" content="Высота видео"/> </span> </div> Сюда вставляем код iframe видео с блока поделиться на Yotube. </div> |
Именно такой код содержит минимальный набор описания видео, чтобы обе поисковые системы не выдавали ошибки при проверке микроразметки в валидаторе.
Вы можете воспользоваться каким-то сервисом для генерации автоматического кода, введя лишь ссылку на видео, но я из всех их числа не встречал такого, который бы выдавал код готового размеченного видео под обе поисковые системы. В основном ориентир идет только на Google.
Как же теперь заполнить необходимые пробелы в данном коде под свое видео? Пройдемся по каждому тегу.
Сначала хочу заметить, что весь код обернут в тег со свойством сущности, что это именно виде-объект. Внутри этого блока еще имеется один блок (открывается в строке 2 и закрывается в строке 15), внутрь которого заключены все необходимые теги. Это я сделал для того, чтобы данному блоку в стилях приписать свойство display:none, которое скроет довольно большой отступ, образующий пустое место из-за данных мета-тегов. Посетитель их не видит (кроме миниатюры), а отступ довольно большой имеется, так как каждый тег занимает свою строку.
В коде в необходимых местах я пометил, что нужно заполнить. Теперь рассмотрим, как нужно внести все данные.
- Описание - просто вставляем то описание видео-ролика, которое давали на самом Youtube;
- Ссылка на видео-ролик - заходим на страницу необходимого видео, копируем адрес страницы и вставляем;
- Имя - название видео с Youtube;
- Дата загрузки - указываем дату загрузки именно на тот сайт, откуда оно будет подгружаться, то есть на хостинге чьего ресурса оно размещено. В нашем случае - это youtube. Указываем в формате "год-месяц-число", например "2015-05-12";
- Продолжительность видео - указываем в следующем формате: T6M34S, где 6 - минуты, 34 - секунды;
- Путь к превью видео: все видео на youtube имеют один путь к своим миниатюрам:
1http://img.youtube.com/vi/уникальный адрес (идентификатор)/maxresdefault.jpg
Отличен лишь их идентификатор, который такой же, как и у самого видео. В видео он прописывается после "v=" и имеет примерно следующий вид "Uga-qGt3PzM". Путь к превью в данном случае будет следующим:
1http://img.youtube.com/vi/Uga-qGt3PzM/maxresdefault.jpg
Это путь к максимальному размеру превью. Можно брать и другие размеры, но не вижу в этом смысла для разметки. - Ширина и высота видео - указываем те значения, которые соответствуют самому видео на сайте. Если я поделился видео и мне Youtube сгенерировал его код iframe с размерами 640x360, то их я и укажу в этом параметре;
- Код iframe самого видео мы берем с youtube в блоке поделиться.
Предоставлю готовый вариант размеченного видео, чтобы вы все могли сравнить и сопоставить с вышеописанными параметрами тегов.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div id="video-schema" itemprop="video" itemscope itemtype="http://schema.org/VideoObject"> <div id="video-schema-meta"> <meta itemprop="description" content="В данном видео-уроке вы узнаете, как вывести список подрубрик на странице рубрик перед списком всех анонсов материалов в родительской рубрике. Данный тип навигации очень интересен и облегчит перемещение пользователя сайте, помогая ему попасть в более нужный для его список контента, в котором он заинтересован."/> <meta itemprop="duration" content="T6M34S"/> <link itemprop="url" href="https://www.youtube.com/watch?v=Uga-qGt3PzM"/> <link itemprop="thumbnailUrl" href="http://img.youtube.com/vi/Uga-qGt3PzM/maxresdefault.jpg"/> <meta itemprop="name" content="Как вывести подрубрики на странице рубрик"/> <meta itemprop="uploadDate" content="2015-05-12"/> <meta itemprop="isFamilyFriendly" content="true"/> <span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject" > <img itemprop="contentUrl" src="http://img.youtube.com/vi/Uga-qGt3PzM/maxresdefault.jpg" /> <meta itemprop="width" content="640"/> <meta itemprop="height" content="360"/> </span> </div> <iframe src="https://www.youtube.com/embed/Uga-qGt3PzM?rel=0&vq=hd720" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe> </div> |
Это конечный вариант, который мы должны разместить в текстовом (html) режиме на странице своего сайта.
К блокам, которые оборачивают весь код разметки и ее теги, необходимо задать совсем простые стили, которые будут выравнивать видео по центру страницы и скрывать содержимое всех тегов микроразметки, чтобы не было видно пустых строк на сайте.
|
1 2 3 4 5 6 7 8 9 |
/***К общему блоку, который оборачивает всю разметку***/ #video-schema{ text-align: center /***Выравнивание видео по центру страницы***/ } /***К блоку, который оборачивает только теги разметки***/ #video-schema-meta{ display:none /***Не отображать содержимое тегов на странице***/ } |
Далее стоит лишь проверить, что код нормально ведет себя в валидаторе обеих поисковых систем.
к содержанию ↑Проверка микроразметки
Сперва заходим в валидатор Яндекса и проверяем ту страницу, где имеется хотя бы одно размеченное видео. После проверки мы не должны увидеть ни одной ошибки и получить минимальный набор требуемых данных.
Далее идем в инструмент проверки структурированных данных Google и также вводим адрес для проверки.
Опять же, не должно быть ни одной ошибки и должны увидеть следующую картину.
Если все правильно, то можно заканчивать. Если же нет, тогда идем еще раз по материалу сей статьи и анализируем, что сделали не так. Если же ошибки устранить у вас не получается, тогда обращайтесь в комментариях. Во всем постараемся разобраться.
На этом все, друзья. Тема микроразметки еще не исчерпала себя, поэтому ждите следующих материалов в данной теме. До скорой.
С уважением, Константин Хмелев!
P.S. Интересно, что к одной странице на моем сайте Google все таки сформировал видео-сниппет и довольно быстро сразу после индексации самого документа. Причем, о микроразметке видео я тогда и не знал. Превью видео в сниппете держится и до сих пор.
Спасибо за материал.
Стоит ли закрывать ссылки на 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
Сделал по вашей инструкции - http://vkusno-pirogi.ru/kulichi/kulichi-optom.html
=ошибку выдает; что делать?? У мя уже разметка по продукту была, и терь конфликтует или устарела директива?
По видео ничего не скажу. Данный вопрос для меня уже не интересен, не слежу за ним.
Огромное спасибо помогли просто сильно
Все как вы в примере сделал. Гугл валидатор пишет нет ошибок и предупреждений. А вот в Яндексе валидатор пишет "ОШИБКА: невозможно определить принадлежность данных полей. Возможны две причины: эти поля некорректно размещены, либо указан лишний атрибут itemprop".
Я даже ваш код скопировал и проверил кодом. Яндекс тоже ругается на ваш код.
Можете найти ошибку?