Как для facebook и вконтакте задать картинку и текст для ссылки, которым мы делимся

В соцсетях когда мы делимся любой страницей со своими друзьями, вместе со ссылкой на соответствующую страницу фейсбук подтягивает с сайта картинку и краткое описание. Как указать явным образом фейсбуке и вконтакте, какую картинку и опись брать с сайта?

 

Когда картинки в тексте вставлены через нормальный классический html тег img, то обычно фейсбук находит такие картинки на странице и даже предлагает выбрать нужную. Предлагает выбрать не все, а несколько вариантов в какие-то своей хоаточний последовательности, неважно, главное что находит. Но если картинки вставлены стилями через div, то, к сожалению фейсбук вообще ничего не найдет на вашем сайте.

Что касается описания к ссылке, он его берет с description соответствующей страницы. Также не всегда удобно, так как в дескрипшин порой сеошники навбивають такого всякого.

Для того, чтобы указать явным способ какую картинку и описание для ссылки брать нужно использовать так называемый Open Graph protocol, подробнее о OGP. То есть необходимо на страницу добавить соответствующие мета теги с картинкой и описанием.

Теги протокола Open Graph:

тег описание
og: title заголовок вашей статьи
og: type тип объекта
og: site_name название сайта
og: url канонический адрес вашей страницы
og: description описание стринкы
og: image адрес предлагаемой картинки. Рекомендуется использовать не менее 1200 * 630 пикселей
Пример использования кода

<html prefix="og: http://ogp.me/ns#">
<head>
<title>Велодень 2016</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.fedun.com.ua/relaks/231-bikeday-2016-ivano-frankivsk.html" />
<meta property="og:image" content="http://www.fedun.com.ua/images/stories/2016/bikeday/bikeday_18.JPG" />
...
</head>
...
</html>

Все возможности протокола описывать нет смысла, больше можно ознакомиться на сайте Open Graph protocol.

Добавить комментарий


Защитный код
Обновить