Плагин "Simple Open Graph" - простенькая поддержка Open Graph для LS 1.0.X
Привет друзья!
Плагин добавляет мета-данные Open Graph. Без особых наворотов.
2. yandex.ru/support/webmaster/open-graph/intro-open-graph.html
Для всех остальных так:
Особенность:
В качестве картинки для топика плагин пытается вытащить первую картинку из «TextShort» (Или картинку-превью из Плагина «Main Preview»). Если удалось — ура. Если нет — «og:image» не добавится, или, если в конфигурации задана картинка «по умолчанию» — добавится она.
Полученную папку обязательно переименовать в simpleopengraph и, как обычно, закинуть в /plugins/. После чего активировать в админке.
Как правило, это единственное место в самом верху файла /templates/skin/ВАШ ШАБЛОН/header.tpl
Выглядеть, в итоге, должно примерно так:
Без этого социальные сети тоже будут прекрасно понимать, но «Валидатор микроразметки» из Яндекс.Вебмастер будет ругаться.
Если картина меньше, или «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.
Если картинка, что ему подсунул этот плагин, не соответствует — он будет искать другую на странице.
Если ничего не нашлось — таки возьмёт эту, если нашлось — возьмёт другую, и хоть стреляйся.
Из документации Facebook:
Т.е. это название раздела верхнего уровня, на нашем сайте. В контексте «стандартного» LS, название блога, из которого заметка, подходит вполне.
Если вкратце, то Facebook возьмет не более чем первый 300 символов. Так что 300 первых символов из «TextShort» плагин туда и пихает. Отфильтровав html-тэги, конечно.
Плагин добавляет мета-данные 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-тэги, конечно.
Известные косяки и особенности
- «og:locale» всегда ru_RU. Если кто подскажет как получить текущий язык контекста LS в таком формате — буду благодарен.
- По идее, все примитивно, и должно работать практически в любом шаблоне. Исключение — линк на картинку, некоторые шаблоны имеют расширенную логику в вопросе «основной картинки топика». Тут придется адаптировать. Если кто-то адаптирует под что-то, и не будет жалко — кидайте мне, включу в плагин.
- Скорее всего, и с более старыми версиями LS будет работать.
Посмотреть/по-тестить
- Как всегда, на MMOзговед можно посмотреть на результат в живую.
- У Facebook есть родная «тулсень» для того чтобы проверить результат: developers.facebook.com/tools/debug/og/object
- Вышеупомянутый «Валидатор микроразметки» из Яндекс.Вебмастер
Пожелания и баги
Пишите в комментах. Ничего не обещаю, но… :)08.05.2017 на GitHub сейчас версия 1.1
Новшества:- Опциональная поддержка картинки «по умолчанию»
- Опциональная поддержка Плагина «Main Preview»
- /config/config.php для вышеупомянутых пунктов
09.05.2017 на GitHub сейчас версия 1.2
Новшества:- Поддержка «og:description»
- Поддержка «article:section»
- Пара мелких фиксов
11.05.2017 на GitHub сейчас версия 1.3
Новшества:- Поддержка YouTube video thumbnail. Если картинки не нашлось, но нашлось YouTube видео, то в og:image будет оно самое
- Ещё пара мелких фиксов
15.05.2017 на GitHub сейчас версия 1.31
Фактически пара баг-фиксов (но не особо приятных), по-этому минорный номер версии:- Поддержка главной картинки фотосета
- фикс: пустой линк(og:url) на не первых стрaницах-списках
17 комментариев
И с «og:locale» там тоже толком не разобрались :(
Facebook требует чтобы картинка там была не меньше, чем 200x200 размером.
Если картина меньше, или «og:image» вообще не указан, то Facebook будет пытаться вытащить первую попавшуюся картинку на странице подходящего размера.
Как правило, результат — кака. Получаем картинку «не в тему».
Поддержку картинки «по умолчанию», по этой причине, я прикручу, чуть позже.
Но суть в том, что если у вас есть какая-то особая работа с картинками, отличная от того что есть в базовой версии LS 1.0.X и шаблоне Synyo, то плагин, скорее всего, придется адаптировать под эту особую работу.
Только наверно надо еще свою дополнительную инструкцию, как задавать свои размеры в Main Preview, потому что я видел люди еще дополнительно спрашивают о его настройке
В шаблоне вам придется делать эту работы (поиск и выдирает линка картинки) для каждого показа страницы, либо изобретать велосипед с кэшем. Оба варианта — грусть-печаль.
Ну и это все, в отрыве от того факта, что огород городить, непосредственно, в шаблоне — вообще плохой стиль.
Новшества:
1. Опциональная поддержка картинки «по умолчанию»
2. Опциональная поддержка Плагина «Main Preview» (https://catalog.livestreetcms.com/addon/view/226/)
3. /config/config.php для вышеупомянутых пунктов
P.S. Скорее всего будет еще одна «минорная» версия с поддержкой «article:section»
Новшества:
P.S. На этом — вcё. В ближайшее время планов что-то добавлять нет.
11.05.2017 на GitHub сейчас версия 1.3
Новшества:И что не забыл Ls)
15.05.2017 на GitHub сейчас версия 1.31
Фактически пара баг-фиксов (но не особо приятных), по-этому минорный номер версии: