» »

Создание микроразметки для видео на сайт


Создание микроразметки для видео на сайт

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

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

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

Все будем делать на текстовом файле.
С каким видео работать спросите, то давайте с начало будем с Youtube, та как основном видим его на сайте любом.

Но теперь подходим к самому интересному, это код, который видет оба поисковых систем.

Код
<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>


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

Но код мы видели, теперь осталось его заполнить, и вот как он должен выглядеть.

Код
<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=aYXkFAKaleM"/>
<link itemprop="thumbnailUrl" href="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/kak-razzhech.jpg"/>
<meta itemprop="name" content="ZORNET - Скрипты и шаблоны для uCoz"/>
<meta itemprop="uploadDate" content="2016-02-10"/>
<meta itemprop="isFamilyFriendly" content="true"/>
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject" >
<img itemprop="contentUrl" src="Если у вас на ютую уже стоит превью, то ссылку от ютуб здесь" />
<meta itemprop="width" content="760"/>
<meta itemprop="height" content="415"/>
</span>
</div>
<iframe width="760" height="415" src="https://www.youtube.com/embed/aYXkFAKaleM" frameborder="0" allowfullscreen></iframe>
</div>


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

Вот проверил его валидаторе от гугл!

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

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



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



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

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

Источник: Kostyakhmelev.ru
02.07.2016 Просмотров: 473 Комментарий: (15)

Поделиться в социальных сетях

Материал разместил

Комментарий: 15
Kosten
Kosten 02.07.2016 21:551
0
Вообщем статью нашел на многих блогах, так от себя как понимаю написал, проверил вообще как на сайте видео будет, скрин с него, и как видим все нормально, возможно кто то и на кино сайтах так делает.
FeStemBer
FeStemBer 02.07.2016 22:012
0
Интересно. чтоб одно видео поставить, тут нужно расписать его, вообще как уже известно, без микроразметки уже не куда.
Angerfist
Angerfist 02.07.2016 22:063
0
Собирался как то микроразметку для видео сделать, но прочитав статьи я понял, надо было когда сайт только создал, сейчас когда материалов за тыщщу лениво и долго biggrin
Kosten
Kosten 02.07.2016 22:167
0
Вот тоже про это, когда уже материалу реально много, подключили CEO раздел, но купил его, только для того, чтоб поставить скрипт на PHP так вообще не нужен, просто все переписывать мне не очень хочется. Да и что там в дальнейшем получиться, также не известно.

Что по видео, просто залил. возможно кто то терпеливый и делает как все нужно, а не просто ссылку на видео поставит, здесь на сайте его почти нет, но кроме форума.
Сопрано
Сопрано 02.07.2016 22:074
0
Нормально, проверил на гугле валидаторе, написал что ошибок нет. Все понравилось и видно что это нужно, но все заполнять, еще к статье, там самому нужно описывать, что вы на видео увидите, вообщем долго, один минус нашел.
Angerfist
Angerfist 02.07.2016 22:085
0
Я кстати тут вначале нашёл материал который отбил охоту делать микроразметку для видео
Kosten
Kosten 02.07.2016 22:126
0
Angerfist, так источник посмотрите, с него и писал, только своими словами.
Angerfist
Angerfist 02.07.2016 22:188
0
А да точно, добавлю только как я понял из статьи что как не упирайся рогами, и без этой разметки можно жить, ведь превью в выдаче не будет а будет цитирую "только youtube, vimeo и другие популярные видео-сайты."
А ведь ценность была бы таких сниппетов в выдаче с превью ещё какая!
Kosten
Kosten 02.07.2016 22:209
0
Так она предназначена, у кого сайт на видео, эта разметка, тот же контент, возможно в небольшую статью поставить, и не расписывать ее красиво, для робота это не главное. Он прицел наведет уже на разметку, где расположен ролик.
Kosten
Kosten 02.07.2016 22:2310
0
К ста те, мне этот блогер знаком, с ним какое то время пересекался, Константин как помню его зовут, что то он мне помогал делать на старом шаблоне по внутренней оптимизаций.
Angerfist
Angerfist 02.07.2016 22:2711
0
и почему таких друзей нет рядом а только в сети biggrin . Хотя на руку, когда к тебе обращаются комп починить а не звонят в сервис. Но знать всё невозможно и хорошо когда есть у кого спросить или посовещаться.
Kosten
Kosten 02.07.2016 22:3012
0
Angerfist, подскажи, на форум есть микроразметка? Если есть, то объясни плиз, как ее поставить.
Angerfist
Angerfist 02.07.2016 22:3413
0
Не видел, потому что я форумами не занимался никогда.
Ладно надо идти смотреть футбол Италия-Германия!
Если увижу скину ссылку.
FeStemBer
FeStemBer 02.07.2016 22:5814
0
На форум видел микроразметку, но что то посоветовали не ставить ее.
tsakonter
tsakonter 02.07.2016 23:0315
0
Если на статью затратил много времени и к нему еще видео идет, не вижу не чего, чтоб его в код поставить, если для поисковых систем так лучше.
avatar