Seo-Бизнес блог Progress-project

Все о создании, продвижении сайтов и заработке в интернете

Обновлённый дизайн блога Progress-project
logotip «Progress-project»
logotip «Progress-project»

Микроразметка видео на блоге

Приветствую вас, сегодня на «Прогресс-проект» мы с вами продолжим говорить о микро-разметки блога и на очереди у нас микроразметка видео роликов.

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

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

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

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

И так, какие именно данные мы с вами будим использовать для разметки наших видео:

  1. Название видео ролика.
  2. Описание видео ролика.
  3. Продолжительность проигрывания.
  4. Url адрес видео ролика.
  5. Полная дата загрузки видео ролика на хостинг.
  6. Ширина и высота видео.
  7. Имеется ли ограничения по возрасту.
  8. Url путь к превью видео ролика.

Два последних пункта мы будим применять специально для Яндекса.

Так, как все видео ролики используемые на abrek-ad-abra.ru подгружаются с Youtube, то и в примере я покажу вам, как прописать микро разметку видео используемое с этого сервиса.

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

Вот непосредственно и сам код который мы с вами и будим использовать для разметки наших видео-роликов:

<div id="video-schema" itemprop="video" itemscope itemtype="https://schema.org/VideoObject">
<div id="video-schema-meta">
<meta itemprop="description" content="Описание видео"/>
<meta itemprop="duration" content="Продолжительность"/>
<link itemprop="url" href="Ссылка на ролик"/>
<link itemprop="thumbnailUrl" href="https://img.youtube.com/vi/Путь к превью/maxresdefault.jpg"/>
<meta itemprop="name" content="Название видео-ролика"/>
<meta itemprop="uploadDate" content="Дата загрузки"/>
<meta itemprop="isFamilyFriendly" content="true"/>
<span itemprop="thumbnail" itemscope itemtype="https://schema.org/ImageObject" >
<img itemprop="contentUrl" src="https://img.youtube.com/vi/Путь к превью/maxresdefault.jpg"/>
<meta itemprop="width" content="Ширина"/>
<meta itemprop="height" content="Высота"/>
</span>
</div>
Здесь сам iframe код видео - ролика с Yotube.
</div>

Теперь давайте подробнее пройдёмся по каждому из имеющихся в коде тегов и изменим их содержимое на необходимое для нашего видео-ролика.

Основные теги микро-разметки видео

Как видите изначально наш код уже обвёрнут в специальный тег указывающий поисковым системам на то, что это именно видео ссылаясь на соответственную библиотеку: «https://schema.org/VideoObject».

Далее у нас с вами идёт ещё один блок в котором указанны все данные о видео а так же указан класс: «video-schema-meta» для css стилей, далее с помощью которых мы с вами скроем в статье ненужные отступы между роликами оставленные тегами.

Указываем данные видео ролика в соответствующих мета-тегах

  1. Описание видео — пишем то описание которое указано под роликом на канале Youtube.
  2. Продолжительность — указываем длительность проигрывания в формате: «T16M22S», число 16 минуты и 22 соответственно секунды.
  3. Ссылка на ролик — Url адрес видео на Youtube.
  4. Путь к превью — открываем необходимое видео на Youtube и копируем из адресной строки браузера всё содержимое после: «v=» и далее уже вставляем его в код микро-разметки.
  5. Название видео-ролика — так же указываем, что и на Youtube.
  6.  Дата загрузки — указываем дату загрузки ролика на youtube в следующем формате «2016-05-12».
  7. Ширину и высоту видео можно узнать непосредственно из самого кода ролика.

Вот наглядный пример микро-разметки одного из роликов abrek-ad-abra.ru:

<div id="video-schema" itemprop="video" itemscope itemtype="https://schema.org/VideoObject">
<div id="video-schema-meta">
<meta itemprop="description" content="Электронная платёжная система Яндекс деньги, регистрация и создание кошелька"/>
<meta itemprop="duration" content="T4M53S"/>
<link itemprop="url" href="https://www.youtube.com/watch?v=T0UR4pRd5Mk"/>
<link itemprop="thumbnailUrl" href="https://img.youtube.com/vi/T0UR4pRd5Mk/maxresdefault.jpg"/>
<meta itemprop="name" content="Яндекс деньги | Yandex mony (проходим процедуру регистрации, создаём кошелёк)"/>
<meta itemprop="uploadDate" content="2015-04-16"/>
<meta itemprop="isFamilyFriendly" content="true"/>
<span itemprop="thumbnail" itemscope itemtype="https://schema.org/ImageObject" >
<img itemprop="contentUrl" src="https://img.youtube.com/vi/T0UR4pRd5Mk/maxresdefault.jpg" />
<meta itemprop="width" content="560"/>
<meta itemprop="height" content="315"/>
</span>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/I1EHYuPMrhc" frameborder="0" allowfullscreen></iframe>
</div>

Теперь давайте с помощью css стилей выравняем наш ролик по центру и заодно скроем ненужные пробелы между роликов оставленные тегами div и уже можно будет приступать к проверке микро-разметки.

Открываем файл темы: style.css и в самый его низ вставляем следующие стили микро-разметки видео:

/***К общему блоку, который оборачивает всю разметку***/
#video-schema{
text-align: center /***Выравнивание видео по центру страницы***/
}
/***К блоку, который оборачивает только теги разметки***/
#video-schema-meta{
display:none /***Не отображать содержимое тегов на странице***/
}

Проверяем микроразметку видео

Переходим по ссылке в Яндекс валидатор и указываем для проверки страницу с размеченным роликом:

Как видите Яндекса всё вполне устраивает и мы имеем максимум информации о нашем видео.

Теперь давайте посмотрим, что думает Google по этому поводу?

Переходим в Google валидатор и так же указываем ссылку на статью с видео:

Дожидаемся окончания проверки и смотрим результат:

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

На сегодня у меня всё, желаю вам успехов, всего доброго и до новых встреч!

С уважением, автор блога!
© progress-project
★Обновлено:2016-05-21

Введите свой e-mail:

Вы можете поделиться статьёй в социальных сетях:

Ваш комментарий

Внимание! Перед тем, как вставить в комментарий: html, php либо JavaScript, преобразуйте его в HTML сущность!

» Подписаться на комментарии по RSS
Поиск по блогу

Введите свой e-mail:

ВКонтакте Google+ Facebook RSS-лента сайта abrek-ad-abra.ru

Топ комментаторов

Виктор(6)
seoonly.ru(4)
Иван(3)
Олег(3)
Николай(3)

© 2015-2017

SEO-Бизнес блог «Progress-project».

Все материалы, опубликованные на сайте: принадлежат автору и охраняются в соответствии с законодательством РФ.

При использовании материалов сайта гиперссылка на обязательна!



seo-блог