Кликабельный предосмотр ссылок на сайт в социальных сетях с Open Graph

Кликабельный предпросмотр ссылок на сайт в социальных сетях с Open Graph

Специалисты Facebook создали опенграф. С помощью этого протокола можно управлять данными в предпросмотре ссылки на сайт, которой пользователь делится в соцсетях.

Где применяется Open Graph

• в социальных сетях и мессенджерах: Facebook, Pinterest, Twitter, Telegram, WhatsApp, Viber;
• для передачи данных в Яндекс.Видео;
• в AdSense с целью улучшить функцию «Блоки рекомендуемого контента».

Польза от Open Graph

Пользователь А поделился ссылкой на сайт в посте Facebook.

Без Open Graph. Что люди будут видеть в предпросмотре ссылки, предугадать невозможно: система может подставить непонятный фрагмент изображения, бессвязный набор слов.

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

На заметку: мета-теги опенграф и веб-страницы, по желанию оптимизатора/владельца сайта, могут не совпадать.

Как внедрить Open Graph

Нужно прописать строчки мета-тегов в код сайта:

og:title – название статьи, видео со страницы сайта;

og:description – описание контента. Объем – до 300 символов без пробелов;

og:type – тип контента: статья, новость, музыка, видео;

og:image – ссылка на картинку к статье, видео;

og:url – постоянная ссылка, которая будет обозначать контент.

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