Opengraph метатеги нужны, чтобы после того, как человек поделился страницей вашего сайта в своей социальной сети — запись об этом выглядела достойно и так как вам хочется. Например так:
Full summary card

Покажу на примере сайта getbem.com, так как именно этим я и занимался, закрывая 22-ое ишью в этом проекте. И после этого шейры страниц гетбема имеют неплохой вид в твиттере:
Summary card

Всё очень просто. Добавьте на каждую страницу в <head> такие метатеги:

<meta name="og:url"         content="http://getbem.com/404.html" />
<meta name="og:image"       content="http://getbem.com/img/bem_black.png" />
<meta name="og:title"       content="BEM — 404 Page not found" />
<meta name="og:description" content="Sorry Mario, the BEM is in another castle" />

Убедитесь, значения метатегов для каждой из страниц уникальные. Адреса картинок должны содержать в себе домен. Также картинки должны быть не очень большими, конечно же.

Twitter Сards

Выберите один из семи типов карточек твиттера. Обычно это “Summary Card”. Материал для самой карточки мы уже подготовили, добавив opengraph метатеги, поэтому теперь осталось только настроить карточку твиттера:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@getbem" />

Замените @getbem на ваш твиттер аккаунт. Более точную настройку можно провести с помощью справки от твиттера.

После того, как настроите карточку как вам хочется, останется только проверить её и заапрувить ваш домен для системы Twitter cards. Это делается с помощью валидатора Twitter Cards. После того как исправите все недочёты (если они есть), твиттер предложит заапрувить ваш сайт в свою систему карточек:

Жмите «Request Approval», заполните небольшую форму и через небольшое время (примерно 15 минут) твиттер начнёт показывать твиты о страницах вашего сайта с дополнительной информацией:

карточка у медузы

Все статьи