OpenGraf данные для кнопки «Поделиться»

Столкнулся с задачей: на одном сайте используется сервис комментариев. Сей сервис дополнительно предоставляет кнопку Поделиться для социальных сетей. При нажатии на кнопку разворачивается небольшая панелька в которой можно выбрать ту социальную сеть в которую вы хотите отправить ссылку этого сайта. Да в принципе любой пользователь соц.сетей хотя бы раз такой возможностью пользовался. Для тех мамонтов кто не в курсе выглядит это вот так:

Pic1На этом скриншоте можно выглядеть три основных элемента:

  1. Миниатюра для ссылки.
  2. Заголовок для ссылки.
  3. Описание ссылки.

Суть проблемы заключается в том, что скрипт получающий описание, заголовок и миниатюру действует на своё усмотрение и получает данные по своим алгоритмам. В моём случае скрипт выдавал не ту картинку которую требовал заказчик. Влезть в код js стороннего сервиса я не мог. Однако выяснил что как минимум Google+, Facebook и Вконтакте поддерживают описание страницы в формате OpenGraf. Вернее даже не так. Они используют эти описания и при их отсутствии уже по своему усмотрению заполняют отсутствующие данные. Мне осталось посто ткнуть носом скрипт в то какое изображение требуется использовать. Делается это через meta-тег. В частности для моео случая достаточно было в шаблон заголовка темы внести 4 строки:

<meta property=’og:title’ content='<?= wp_title(); ?>’>
<meta property=’og:type’ content=’article’>
<meta property=’og:image’ content=’http://www.example.com/logo.jpg’>
<meta property=’og:updated_time’ content='<?=time();?>’>

Объясню по порядку:

  • указываем какой заголовок для ссылки будем выводить. Является обязательным. При отсутствии будет выведен контент в теге TITLE

  • указываем какой тип контента. Если не в курсе какие есть — указывайте article. Он заполняется так по умолчанию.

  • миниатюра для ссылки. Тут есть пара нюансов на которые я наткнулся. Facebook кеширует полученные OpenGraf данные ровно на сутки. ПОсмотреть какие данные он получает и сбросить их можно на странице: https://developers.facebook.com/tools/debug. Ещё один нюанс — при указании картинки размером меньше 200х200 пикселей — Facebook её проигнорирует и воткнет ту которая ему больше понравится, а Вконтакт не покажет вообще никакой.

  • время в которое данный контент был обновлен. Не уверен в правильности его указания, но на всякий случай я выставил time() что бы тот-же Facebook думал что контент обновлен и его кеш надо сбросить.

  • Краткое описание для ссылки. Не стоит указывать слишком длинный текст. Иначе он будет заменен на тот что указан в meta name=»description». Руководствоваться длинной текста следует так же как и для этого мета-тега.
    Ну и напоследок — указывать всё это требуется, естественно, внутри тега head.  По сути, применяя с умом метаданные — можно довольно тонко настроить то, как и чем будут делиться пользователи вашего сайта со своими подписчиками в социальных сетях.

Автор: Mirivlad

Скромный труженик консоли и окошек.