Столкнулся с задачей: на одном сайте используется сервис комментариев. Сей сервис дополнительно предоставляет кнопку Поделиться для социальных сетей. При нажатии на кнопку разворачивается небольшая панелька в которой можно выбрать ту социальную сеть в которую вы хотите отправить ссылку этого сайта. Да в принципе любой пользователь соц.сетей хотя бы раз такой возможностью пользовался. Для тех мамонтов кто не в курсе выглядит это вот так:
На этом скриншоте можно выглядеть три основных элемента:
- Миниатюра для ссылки.
- Заголовок для ссылки.
- Описание ссылки.
Суть проблемы заключается в том, что скрипт получающий описание, заголовок и миниатюру действует на своё усмотрение и получает данные по своим алгоритмам. В моём случае скрипт выдавал не ту картинку которую требовал заказчик. Влезть в код 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();?>’>
Объясню по порядку:
property="og:title"
- указываем какой заголовок для ссылки будем выводить. Является обязательным. При отсутствии будет выведен контент в теге TITLE
property="og:type"
- указываем какой тип контента. Если не в курсе какие есть — указывайте article. Он заполняется так по умолчанию.
property="og:image"
- миниатюра для ссылки. Тут есть пара нюансов на которые я наткнулся. Facebook кеширует полученные OpenGraf данные ровно на сутки. ПОсмотреть какие данные он получает и сбросить их можно на странице: https://developers.facebook.com/tools/debug. Ещё один нюанс — при указании картинки размером меньше 200х200 пикселей — Facebook её проигнорирует и воткнет ту которая ему больше понравится, а Вконтакт не покажет вообще никакой.
property="og:updated_time"
- время в которое данный контент был обновлен. Не уверен в правильности его указания, но на всякий случай я выставил time() что бы тот-же Facebook думал что контент обновлен и его кеш надо сбросить.
property="og:description"
- Краткое описание для ссылки. Не стоит указывать слишком длинный текст. Иначе он будет заменен на тот что указан в meta name=»description». Руководствоваться длинной текста следует так же как и для этого мета-тега.
Ну и напоследок — указывать всё это требуется, естественно, внутри тега head. По сути, применяя с умом метаданные — можно довольно тонко настроить то, как и чем будут делиться пользователи вашего сайта со своими подписчиками в социальных сетях.