Сейчас социальные сети занимают очень большую долю трафика.
И нашей задачей является этот трафик направить на сайт
Здесь как раз нам и поможет OpenGraph 🙂

OpenGraph(OG) представляет собой набор мета-тегов для удобного предоставления информации в социальных сетях.

Как подключить?

Для того, чтобы работать с OpenGraph, мы должны посмотреть и изучить его теги

Основные мета-теги:

og:title — Заголовок
og:type — Тип. Например «website»
og:image — URL изображения
og:url — URL, который будет использован в качестве постоянного ID

Дополнительные

og:audio — URL аудио
og:description — Описание
og:determiner — Определитель
og:locale — Локальный тег. По умолчанию en_US.
og:site_name — Название сайта
og:video — URL видео

Делается это очень просто, нужно в html форму добавить мета-теги.
Возьмем для примера одну из моих записей и составим ее OG:

<meta property="og:title" content="Пример использования OpenGraph" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://maksim.pw/2015/11/opengraph/" />
<meta property="og:image" content="http://maksim.pw/2015/11/opengraph/vkf57pmpz74/" />
<meta property="og:description" content="Вы можете посмотреть пример использования OpenGraph на этой странице :)" />

Было так:

Стало так после добавления OpenGraph и очистки кэша:

Очень удобно и красиво. Теперь я могу сам задавать отображение содержимого ссылок в социальных сетях под нужное мне русло.
Ну а в правильных руках это конечно же принесет дополнительный трафик 🙂

Проблема кэширования

Для быстрой загрузки контента социальные сети часто используют кэширование. Что затрудняет корректное отображение OpenGraph
Этим часто грешат vk.com и facebook
И этому есть решение:
Нужно лишь указать url вашей закэшированной записи.
Очистка кэша в VK.COM
Очистка кэша в FB.COM