Плагин "Simple Open Graph" - простенькая поддержка Open Graph для LS 1.0.X

Привет друзья!

Плагин добавляет мета-данные Open Graph. Без особых наворотов.

Что такое Open Graph?
1. ogp.me/
2. yandex.ru/support/webmaster/open-graph/intro-open-graph.html

И каков результат?
Для страницы топика результат выглядит примерно так:
<meta property="og:site_name" content="ММОзговед"/>
<meta property="og:locale" content="ru_RU" />
<meta property="og:title" content="Почему развивать MMO на основе платных дополнений - плохая идея / Теория MMO / ММОзговед" />
<meta property="og:url" content="https://mmozg.net/theory/2017/04/28/pochemu-razvivat-mmo-na-osnove-platnyh-dopolneniy-plohaya-ideya.html" />
<meta property="og:type" content="article"/>
<meta property="og:description" content="Сегодня по формальным признакам можно назвать термином MMO большинство форм онлайновых развлечений. Дискуссии ведутся разве что вокруг двойной “M” — достаточно ли массовый мультиплеер. Но и здесь можно найти множество формальных лазеек. Я же считаю, что без единого цельного мира со свободным взаимод"/>
<meta property="og:image" content="https://mmozg.net/uploads/images/00/00/01/2017/04/28/6e5fac.jpg" />
<meta property="article:section" content="Теория MMO"/>
<meta property="article:published_time" content="2017-04-28T14:09:31+03:00"/>
<meta property="article:tag" content="теория ММО" />
<meta property="article:tag" content="buy-to-play" />
<meta property="article:tag" content="дополнение" />
<meta property="article:tag" content="Elite: Dangerous" />
<meta property="article:tag" content="Guild Wars 2" />


Для всех остальных так:
<meta property="og:site_name" content="ММОзговед"/>
<meta property="og:locale" content="ru_RU" />
<meta property="og:title" content="ММОзговед (Игровая индустрия, DarkFall) / Топ" />
<meta property="og:url" content="https://mmozg.net/index/top/" />
<meta property="og:type" content="website"/>
<meta property="og:image" content="https://mmozg.net/uploads/images/mmozg-logo-sm.png" />


Особенность:
В качестве картинки для топика плагин пытается вытащить первую картинку из «TextShort» (Или картинку-превью из Плагина «Main Preview»). Если удалось — ура. Если нет — «og:image» не добавится, или, если в конфигурации задана картинка «по умолчанию» — добавится она.

Где взять и как установить?
GitHub: github.com/Gmugra/ls-simpleopengraph

Полученную папку обязательно переименовать в simpleopengraph и, как обычно, закинуть в /plugins/. После чего активировать в админке.

Необязательно, но желательно:
В шаблоне нужно добавить
prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#"
в атрибуты тега
<head>


Как правило, это единственное место в самом верху файла /templates/skin/ВАШ ШАБЛОН/header.tpl
Выглядеть, в итоге, должно примерно так:
<html prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#" class="no-js" lang="ru">


Без этого социальные сети тоже будут прекрасно понимать, но «Валидатор микроразметки» из Яндекс.Вебмастер будет ругаться.

Пара слов о «og:image»
Facebook требует чтобы картинка там была не меньше, чем 200x200 размером.
Если картина меньше, или «og:image» вообще не указан, то Facebook будет пытаться вытащить первую попавшуюся картинку на странице подходящего размера. Как правило, результат — кака. Получаем картинку «не в тему». Связи с этим, остро рекомендую, всё-таки использовать картинку «по умолчанию». Лучше красивый логотип сайта, чем какая-нить непонятная фигня со страницы.

Но даже если картинка больше чем 200x200, не факт что Facebook её не обрежет, как ему нравится.
В идеале, он ждет пропорций 1.91:1, что и написано в документации: developers.facebook.com/docs/sharing/best-practices#images.
Связи с этим всем, остро рекомендую, отнестись с большим вниманием к картинке «по умолчанию», и проверить её при помощи developers.facebook.com/tools/debug/og/object. У нас, приемлемо, получилось с 4-ой попытки только.

Google+ ещё интереснее: developers.google.com/+/web/snippet/article-rendering
Он требует картинку шириной не меньше чем 400, и с соотношением сторон не больше чем 5:2.
Если картинка, что ему подсунул этот плагин, не соответствует — он будет искать другую на странице.
Если ничего не нашлось — таки возьмёт эту, если нашлось — возьмёт другую, и хоть стреляйся.

Пара слов о «article:section»
Из документации The Open Graph protocol:
article:section — string — A high-level section name. E.g. Technology
© ogp.me/

Из документации Facebook:
article:section — The section of your website to which the article belongs, such as 'Lifestyle' or 'Sports'
© developers.facebook.com/docs/reference/opengraph/object-type/article

Т.е. это название раздела верхнего уровня, на нашем сайте. В контексте «стандартного» LS, название блога, из которого заметка, подходит вполне.

Пара слов о «og:description»
www.joshspeters.com/how-to-optimize-the-ogdescription-tag-for-search-and-social

Если вкратце, то Facebook возьмет не более чем первый 300 символов. Так что 300 первых символов из «TextShort» плагин туда и пихает. Отфильтровав html-тэги, конечно.

Известные косяки и особенности
  1. «og:locale» всегда ru_RU. Если кто подскажет как получить текущий язык контекста LS в таком формате — буду благодарен.
  2. По идее, все примитивно, и должно работать практически в любом шаблоне. Исключение — линк на картинку, некоторые шаблоны имеют расширенную логику в вопросе «основной картинки топика». Тут придется адаптировать. Если кто-то адаптирует под что-то, и не будет жалко — кидайте мне, включу в плагин.
  3. Скорее всего, и с более старыми версиями LS будет работать.


Посмотреть/по-тестить
  1. Как всегда, на MMOзговед можно посмотреть на результат в живую.
  2. У Facebook есть родная «тулсень» для того чтобы проверить результат: developers.facebook.com/tools/debug/og/object
  3. Вышеупомянутый «Валидатор микроразметки» из Яндекс.Вебмастер

Пожелания и баги
Пишите в комментах. Ничего не обещаю, но… :)

08.05.2017 на GitHub сейчас версия 1.1
Новшества:
  1. Опциональная поддержка картинки «по умолчанию»
  2. Опциональная поддержка Плагина «Main Preview»
  3. /config/config.php для вышеупомянутых пунктов

09.05.2017 на GitHub сейчас версия 1.2
Новшества:
  1. Поддержка «og:description»
  2. Поддержка «article:section»
  3. Пара мелких фиксов

11.05.2017 на GitHub сейчас версия 1.3
Новшества:
  1. Поддержка YouTube video thumbnail. Если картинки не нашлось, но нашлось YouTube видео, то в og:image будет оно самое
  2. Ещё пара мелких фиксов

15.05.2017 на GitHub сейчас версия 1.31
Фактически пара баг-фиксов (но не особо приятных), по-этому минорный номер версии:
  1. Поддержка главной картинки фотосета
  2. фикс: пустой линк(og:url) на не первых стрaницах-списках

17 комментариев

avatar
А для ЛС 2 будет такой плагин?
avatar
У 2-ки OG теги из коробки добавлеы в хэдере
avatar
Посмотрел :) Пару идей пожалуй сворую.
И с «og:locale» там тоже толком не разобрались :(
avatar
Забыл упомянуть об одной особености с «og:image»
Facebook требует чтобы картинка там была не меньше, чем 200x200 размером.
Если картина меньше, или «og:image» вообще не указан, то Facebook будет пытаться вытащить первую попавшуюся картинку на странице подходящего размера.
Как правило, результат — кака. Получаем картинку «не в тему».

Поддержку картинки «по умолчанию», по этой причине, я прикручу, чуть позже.
avatar
Я на первой версии? через плагин mainpreview делал картинки для опенграф. Там можно в файле конфига задать нужные размеры
avatar
Не очень понял вопрос.

Но суть в том, что если у вас есть какая-то особая работа с картинками, отличная от того что есть в базовой версии LS 1.0.X и шаблоне Synyo, то плагин, скорее всего, придется адаптировать под эту особую работу.
avatar
Вопрос случайно прицепился)
avatar
Поддержку плагина «Main Preview» я, наверное, прикручу… там просто.
avatar
Было бы удобно. А так да, можно в конфиге вашего плагина сделать переменную, что-то типа использовать изображение из плагина Main Preview, и в шаблоне или хуке проверку.
Только наверно надо еще свою дополнительную инструкцию, как задавать свои размеры в Main Preview, потому что я видел люди еще дополнительно спрашивают о его настройке
avatar
Подскажите, в чем смысл плагина, почему не добавить это просто в шаблон header.tpl?
avatar
Вы не сможете сделать это «чисто» в шаблоне. Плагин позволяет подсунуть, найденный в топике линк на картинку, в объект топика до того, как этот объект попадет в кэш. Тем самым, пока топик находится в кэше, линк на картинку будет уже доступен.

В шаблоне вам придется делать эту работы (поиск и выдирает линка картинки) для каждого показа страницы, либо изобретать велосипед с кэшем. Оба варианта — грусть-печаль.

Ну и это все, в отрыве от того факта, что огород городить, непосредственно, в шаблоне — вообще плохой стиль.
avatar
08.05.2017 на GitHub сейчас версия 1.1
Новшества:
1. Опциональная поддержка картинки «по умолчанию»
2. Опциональная поддержка Плагина «Main Preview» (https://catalog.livestreetcms.com/addon/view/226/)
3. /config/config.php для вышеупомянутых пунктов

P.S. Скорее всего будет еще одна «минорная» версия с поддержкой «article:section»
avatar
09.05.2017 на GitHub сейчас версия 1.2
Новшества:
  1. Поддержка «og:description»
  2. Поддержка «article:section»

P.S. На этом — вcё. В ближайшее время планов что-то добавлять нет.
avatar
Привет. А вы могли бы сделать смайлики? Или банер-крутилку? И если да, сколько бы мне это вышло?
avatar
11.05.2017 на GitHub сейчас версия 1.3
Новшества:
  1. Поддержка YouTube video thumbnail. Если картинки не нашлось, но нашлось YouTube видео, то в og:image будет оно самое
  2. Ещё пара мелких фиксов
avatar
Привет! Спасибо, что делишься!
И что не забыл Ls)
avatar
15.05.2017 на GitHub сейчас версия 1.31
Фактически пара баг-фиксов (но не особо приятных), по-этому минорный номер версии:
  1. Поддержка главной картинки фотосета
  2. фикс: пустой линком вокруг не первых стрaниц-списков
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.