Чаще всего когда на сайт вставляется код кнопок поделиться в соц. сетях используются различные сервисы, но зачастую при работе с ними возникают проблемы, в частности при расшаривании постов в социальные сети вместо изображения статьи мы видим логотип сайта или изображение другой статьи, или хуже того рекламный баннер. Решение есть…
Итак, как же при нажатии кнопки share разместить правильную информацию в соц сетях? На странице должны быть размещены нужные meta-теги:
<meta property="og:title" content="Заголовок статьи"></meta> <meta name="description" content="Описание статьи какой размер картинки шарить в соц сети." /> <meta property="og:image" content="http://mysite.com/mypic.jpg"></meta>
| Значение | Описание |
|---|---|
| og:title |
Заголовок – текст ссылки, если нет данного тега, то заголовок будет взят из mrc__share_title, twitter:title или <title> |
| description | Описание. Если на публикуемой странице есть тег, то описание будет взято из него |
| og:image |
Иллюстрация. Если на публикуемой странице есть тег og:image, twitter:image, image, то адрес изображения для иллюстрации будет взят из него, иначе будут взяты первые 8 тегов <img src=”…” alt=”” /> размер которых больше 130 |
После публикации ссылки в Вконтакте ее данные кэшируются, если вы обновили Заголовок, описание или изображение, а при попытке поделиться отображаются старые значения нужно воспользоваться инструментом для сброса кэша VK pages.clearCache.
Фейсбук использует теги Open Graph, для получения информации о статье.
<meta property="og:url" content="http://mysite.com/article/" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Заголовок статьи" /> <meta property="og:description" content="Описание статьи" /> <meta property="og:image" content="http://mysite.com/images/image.jpg" /> <meta property="fb:app_id" content="идентификатор_вашего_приложения_Facebook"></meta>
| Значение | Описание |
|---|---|
| og:title | Заголовок или название объекта |
| og:description | Краткое описание страницы |
| og:image | URL картинки поста. Внимание! Facebook кеширует картинки, читайте требования к публикуемым изображениям |
| og:url | URL страницы. |
| og:type | Тип объекта. В данном случае указал тип “article” – статья. Другие типы объектов OG |
| fb:app_id | Обязательный параметр - идентификатор приложения для Facebook, необходим для просмотра статистики переходов на сайт с Facebook |
Если кто-либо уже поделился ссылкой на страницу, которую вы пробуете расшарить в Facebook, то информация по ней может быть закеширована, для сброса воспользуйтесь инструментом Open Graph Object Debugger.
<meta name="twitter:card" content="summary"></meta> <meta name="twitter:title" content=""></meta> <meta name="twitter:description" content=""></meta> <meta name="twitter:image" content=""></meta>
| Значение | Описание |
|---|---|
| twitter:title | Заголовок |
| twitter:description | краткое описание |
| twitter:image |
полный путь к картинке |
Рекомендуемый формат - использование микроразметки Schema.org.
<body itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Заголовок</h1>
<img itemprop="image" src="http://mysite.com/image/image.jpg" />
<p itemprop="description">Краткое описание</p>
</body>
Как и другие социальные сети Google Plus может использовать разметку Open Graph.
<meta property="og:title" content="..." /> <meta property="og:image" content="..." />
<meta property="og:description" content="..." />
Также, если выше указанная разметка на странице отсутствует, то будет использована информация из тегов <title> и <meta name="description" ... /> в секции <head>.
Пол дела сделано! Теперь поговорим о камушках, с которыми можно неожиданно столкнуться.
Вконтакте и Facebook кешируют изображения, поэтому если вы изменили размер изображения, то обязательно измените адрес в теге og:image, не сохраняйте файл с тем же именем или воспользуйтесь инструментами для сброса кэшированных данных.