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

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

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

В одной из прошлых статей «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 /***Не отображать содержимое тегов на странице***/
}

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

Вам также может понравиться

Микро-разметка расширяющая сниппет — библиотека NewsArticle

Микроразметка расширяющая сниппет — библиотека NewsArticle

Мета-тег robots. Более точная настройка индексации WordPress

Мета-тег robots. Более точная настройка индексации WordPress

Микро-разметка Schema.org

Микро-разметка для Google и Яндекс с учётом всех нововведений Schema.org

Как удалить ссылки в комментариях

Как удалить ссылки в комментариях