Главная страница / DataLife Engine / Скрипты и другая информация / Микроразметка Open Graph для Video (og:video)

Микроразметка Open Graph для Video (og:video)

23 май 2020, Суббота
483
0
Микроразметка Open Graph для Video (og:video)

Микроразметка Open Graph предназначена для удобного отображения контента в соцсетях. Разработчиком Опен Граф является Facebook. Главным преимуществом этой разметки считается относительная легкость ее внедрения.

Как известно, в DLE есть встроенная микроразетка опенграф для статей - article, но если у вас сайт с видео (фильмы или сериалы), то логично будет использовать такую микроразметку именно для видео. Для начала нам нужно отключить стандартную микроразметку. Для этого нужно загрузить плагин:
udalenie-ogarticle.zip [706 b] (cкачиваний: 20)

Теперь нам осталось настроить микроразметку для видео. Есть несколько вариантов это сделать:
  1. Через правки файлов движка - никогда не настраивал по этому способу, плагин для него делать даже не буду.
  2. Модулем Metagen - 4 года настраивал опенграф разметку через метаген, и сейчас у меня на всех киношках настроена он именно этим способом.
  3. Установкой плагина глобальных тегов и настройкой в шаблоне.

Рассмотрим вариант настройки через метаген.
metagen.zip [603 b] (cкачиваний: 20)

Для начала нужно ознакомиться с информацией по тегам в справочнике яшки. Как видно - самый простой вариант микроразметки для видео такой:
<meta property="og:video" content="http://example.com/movie.swf" />
<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />

Но кроме этого можно передавать и другую информацию о кино, например, актеры, режиссер, жанры, длительность видео и т.д. Более детальная информация есть в справочнике яндекса. Приступим к настройке:
  1. В main.tpl прописываем:
    [aviable=showfull] prefix="og: http://ogp.me/ns# video: http://ogp.me/ns/video# ya: http://webmaster.yandex.ru/vocabularies/"[/aviable]
    в тег html.
  2. Подключаем вывод информации внутри тега head:
    {include file='engine/mods/metagen.php?a=get&r=og&t=<meta name="{p}" content="{v}" />'}

    Обратите внимание на расположение файла metagen.php, вы можете его загрузить в другую папку, но чтобы не было помойки из файлов - лучше создать папку для сторонних модулей и складировать их в ней, у меня для этого папка mods.
  3. Далее осталось только настроить микроразметку в файле полной новости fullstory.tpl. Например, если мы хотим получить на выходе разметку:
    <meta property="og:type" content="video.movie"/>
    <meta property="video:tag" content="webmaster"/>
    <meta property="video:duration" content="205"/>

    в самый верх в fullstory.tpl нужно добавить код:
    {include file="engine/mods/metagen.php?a=add&r=og&p=og:type&v=video.movie"}
    {include file="engine/mods/metagen.php?a=add&r=og&p=video:tag&v=[xfvalue_genre], {category}, [xfvalue_year]"}
    {include file="engine/mods/metagen.php?a=add&r=og&p=video:duration&v=[xfvalue_duration_sec]"}


Вот в принципе и всё! Какие теги указывать в разметке - решать вам, в инструкции яндекса почти всё расписано, но так же можете посмотреть разметку на любом киносайте, где есть разметка опенграф для видео, и скопировать у них все "meta property"/"meta name" и потом настроить их на своём сайте.

Таким же образом можно настроить и разметку для twitter и вывести в main.tpl.

Увидел на странице метагена в комментариях вариант на JS:
<script>
$(document).ready(function(){
$("head").append('<meta property="og:image" content="[xfvalue_photo]" />');
$("head").append('<meta property="og:title" content="{title}" />');
$("head").append('<meta property="og:video" content="http://site.ru/uppod.swf" />');
$("head").append('<meta property="og:video:height" content="360" />');
$("head").append('<meta property="og:video:width" content="640" />');
$("head").append('<meta property="og:video:type" content="application/x-shockwave-flash" />');
$("head").append('<meta property="og:url" content="{full-link}" />');
});
</script>

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

Но ещё проще простого скопировать микроразметку с любого сайта и настроить её вывод через плагин глобальных тегов:
  1. Открываете понравившийся сайт и копируете разметку, например:
    <meta property="og:description" content="Мистический квест: Пир ворона (2020) – Mythic Quest: Raven&#39;s Banquet – Всё о сериале: сезоны и эпизоды, даты выхода, актеры, трейлеры, фото. Отзывы зрителей и профессиональные рецензии. Рейтинг. Интересные факты и ошибки в сериале" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.kinopoisk.ru/series/1188292/" />

    Как видно здесь нужно вывести нам краткое описание и ссылку на материал. Но теги fullstory.tpl не работают в main.tpl, именно для этого и нужен плагин глобальных тегов.
  2. Устанавливаете плагин.
  3. Создаем в fullstory.tpl нужные нам теги:
    [transfer=fulllink]{full-link}[/transfer]
    [transfer=shortstory]{short-story}[/transfer]

  4. Прописываем в main.tpl следующий код:
    <meta property="og:description" content="{transfer_shortstory}" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="{transfer_fulllink}" />

    и не забываем про
    [aviable=showfull] prefix="og: http://ogp.me/ns# video: http://ogp.me/ns/video# ya: http://webmaster.yandex.ru/vocabularies/"[/aviable]
    в тег html.
  5. Готово! Микроразметка настроена!

Какой из вариантов использовать - решать вам, у каждого есть свои плюсы и минусы и сложности/проблемы по настройке...
Комментарии:
Прокомментировать
Модули для создания киносайта и не только на базе DataLife Engine, и многое другое...
Просто блог Евгения Попова, он же - byroot © 2020