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

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

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

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

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

<meta >>

  • указываем какой заголовок для ссылки будем выводить. Является обязательным. При отсутствии будет выведен контент в теге TITLE
>
  • указываем какой тип контента. Если не в курсе какие есть - указывайте article. Он заполняется так по умолчанию.
>
  • миниатюра для ссылки. Тут есть пара нюансов на которые я наткнулся. Facebook кеширует полученные OpenGraf данные ровно на сутки. ПОсмотреть какие данные он получает и сбросить их можно на странице: https://developers.facebook.com/tools/debug. Ещё один нюанс - при указании картинки размером меньше 200х200 пикселей - Facebook её проигнорирует и воткнет ту которая ему больше понравится, а Вконтакт не покажет вообще никакой.
>
  • время в которое данный контент был обновлен. Не уверен в правильности его указания, но на всякий случай я выставил time() что бы тот-же Facebook думал что контент обновлен и его кеш надо сбросить.
>
  • Краткое описание для ссылки. Не стоит указывать слишком длинный текст. Иначе он будет заменен на тот что указан в meta name="description". Руководствоваться длинной текста следует так же как и для этого мета-тега.
    Ну и напоследок - указывать всё это требуется, естественно, внутри тега head.  По сути, применяя с умом метаданные - можно довольно тонко настроить то, как и чем будут делиться пользователи вашего сайта со своими подписчиками в социальных сетях.
Mirivlad

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

Share
Published by
Mirivlad

Recent Posts

Как вернуть доступ к аккаунту VK (ВКонтакте)?

Восстановить доступ к странице ВКонтакте можно относительно просто. И для этого даже не потребуется помощь…

1 год ago

Реверс-инжиниринг электроники и ПО

Реверс инжиниринг электроники и программного обеспечения — увлекательная и важная дисциплина, играющая ключевую роль в…

3 года ago

Что лучше Apple iPhone 14 или iPhone 13: сравниваем модели

Рынок смартфонов не стоит на месте и каждый год пополняется новыми моделями. Компания Apple традиционно…

3 года ago

Как открыть интернет-магазин с нуля в 2026 году?

Запуск онлайн-бизнеса может показаться сложной задачей, но на самом деле этот процесс можно существенно упростить,…

3 года ago

Как проверить текст на уникальность?

Если Вы хотите продвинуть свой сайт в поисковых системах, одним из самых важных аспектов является…

3 года ago

ТОП лучших смартфонов Samsung 2026 года: рейтинг по цене и качеству

Корейская компания Samsung зарекомендовала себя на потребительском рынке как производитель флагманов, так и бюджетных смартфонов.…

3 года ago