Микроразметка Open Graph для Video (og:video)
Микроразметка Open Graph предназначена для удобного отображения контента в соцсетях. Разработчиком Опен Граф является Facebook. Главным преимуществом этой разметки считается относительная легкость ее внедрения. Как известно, в DLE есть встроенная микроразетка опенграф для статей - article, но если у вас сайт с видео (фильмы или сериалы), то логично будет использовать такую микроразметку именно для видео. Для начала нам нужно отключить стандартную микроразметку. Для этого нужно загрузить плагин:
udalenie-ogarticle.zip
[706 b] (cкачиваний: 118)
Теперь нам осталось настроить микроразметку для видео. Есть несколько вариантов это сделать:
- Через правки файлов движка - никогда не настраивал по этому способу, плагин для него делать даже не буду.
- Модулем Metagen - 4 года настраивал опенграф разметку через метаген, и сейчас у меня на всех киношках настроена он именно этим способом.
- Установкой плагина глобальных тегов и настройкой в шаблоне.
Рассмотрим вариант настройки через метаген.
metagen.zip
[603 b] (cкачиваний: 113)
Для начала нужно ознакомиться с информацией по тегам в справочнике яшки. Как видно - самый простой вариант микроразметки для видео такой:
<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" />Но кроме этого можно передавать и другую информацию о кино, например, актеры, режиссер, жанры, длительность видео и т.д. Более детальная информация есть в справочнике яндекса. Приступим к настройке:
- В main.tpl прописываем:
в тег html.[aviable=showfull] prefix="og: http://ogp.me/ns# video: http://ogp.me/ns/video# ya: http://webmaster.yandex.ru/vocabularies/"[/aviable] - Подключаем вывод информации внутри тега head:
{include file='engine/mods/metagen.php?a=get&r=og&t=<meta name="{p}" content="{v}" />'}
Обратите внимание на расположение файла metagen.php, вы можете его загрузить в другую папку, но чтобы не было помойки из файлов - лучше создать папку для сторонних модулей и складировать их в ней, у меня для этого папка mods. - Далее осталось только настроить микроразметку в файле полной новости 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>Это пожалуй самый простой вариант, и можно использовать его, главное собрать нужные параметры для микроразметки, чтобы их настроить.
Но ещё проще простого скопировать микроразметку с любого сайта и настроить её вывод через плагин глобальных тегов:
- Открываете понравившийся сайт и копируете разметку, например:
<meta property="og:description" content="Мистический квест: Пир ворона (2020) – Mythic Quest: Raven's Banquet – Всё о сериале: сезоны и эпизоды, даты выхода, актеры, трейлеры, фото. Отзывы зрителей и профессиональные рецензии. Рейтинг. Интересные факты и ошибки в сериале" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://www.kinopoisk.ru/series/1188292/" />
Как видно здесь нужно вывести нам краткое описание и ссылку на материал. Но теги fullstory.tpl не работают в main.tpl, именно для этого и нужен плагин глобальных тегов. - Устанавливаете плагин.
- Создаем в fullstory.tpl нужные нам теги:
[transfer=fulllink]{full-link}[/transfer] [transfer=shortstory]{short-story}[/transfer] - Прописываем в main.tpl следующий код:
<meta property="og:description" content="{transfer_shortstory}" /> <meta property="og:type" content="website" /> <meta property="og:url" content="{transfer_fulllink}" />
и не забываем про
в тег html.[aviable=showfull] prefix="og: http://ogp.me/ns# video: http://ogp.me/ns/video# ya: http://webmaster.yandex.ru/vocabularies/"[/aviable] - Готово! Микроразметка настроена!
Какой из вариантов использовать - решать вам, у каждого есть свои плюсы и минусы и сложности/проблемы по настройке...
UPDATE 22/03/2021
В связи с выходом Fullstory-Metatags by Sander настройка микроразметки сводится до минимума. Просто нужно установить данный плагин, и прописать нужные теги в шаблон полной новости. Но шаблон для данной схемы настройки я микроразметки ещё не делал, по привычке всё настраиваю через заготовку через metagen...
Похожие статьи:
Комментарии: