# Оформление ссылок в соцсетях с помощью Open Graph разметки

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

Содержание

# Настройка

Исходную документацию на английском языке можно найти на сайте ogp.me.

  1. Чтобы обозначить, что на странице используется Open Graph разметка нужно добавить в тег <html> особый префикс — <html prefix="og: http://ogp.me/ns#">
  2. Open Graph теги настраиваются в HTML-коде страницы и указываются внутри тегов <head></head>.

Чтобы все настроить потребуется попросить помощи у веб-мастера или администратора сайта.

# Основные теги

Тег Описание
og:url Ссылка на статью
og:title Заголовок статьи — лучше без какого-либо упоминания бренда, например названия сайта.
og:description Краткое описание материалов (обычно 2–4 предложения).
og:type Тип материала, например article. Все значения для тега.
og:image URL изображения
og:image:width Ширина изображения в пикселях. Укажите, чтобы при первой публикации фото загрузилось должным образом.
og:image:height Высота изображения в пикселях.

# Пример разметки

<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Когда великие умы не думают одинаково" />
<meta property="og:description" content="Насколько культура влияет на творческое мышление?" />
<meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />
<meta property="og:image:width" content="971" />
<meta property="og:image:height" content="509" />

# Плагины для CMS

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

Ссылки на списки вариантов:

# Требования к изображениям

Совет

Универсальным будет изображение с шириной от 600 пикселей и высотой от 315 пикселей.

# Facebook

  • Не менее 600×315 пикселей, до 8 мегабайт.
  • Если изображение меньше, то используется уменьшенная версия фото.
  • Если одна из сторон меньше 200 пикселей, то изображение не прикрепляется.
  • Другие вложения к записи запрещены.

# ВКонтакте

  • Не менее 510×228 пикселей.
  • Если изображение меньше, то используется уменьшенная версия фото.
  • Если одна из сторон меньше 160 пикселей, то изображение не прикрепляется.
  • Если помимо ссылки прикреплены другие вложения, картинка в сниппете будет уменьшенная — 150×83.

# Twitter

Минимум 280×150 пикселей и не больше 1 мегабайта.

# Одноклассники

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

# Как проверить Open Graph на сайте

Протестируйте свою разметку через инструмент от Facebook или сайт opengraphcheck.com. Введите ссылку на страницу — инструмент покажет метатеги которые нашел, а также ошибки и предупреждения.

# Настройка карточек для Twitter

Твиттер использует особую разметку.

# Пример разметки для Twitter

Есть несколько типов карточек, которые может оформить Твиттер. summary_large_image — имеет больший размер изображения.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ваш аккаунт в Twitter">
<meta name="twitter:title" content="Название статьи">
<meta name="twitter:description" content="Краткое описание">
<meta name="twitter:image:src" content="Ссылка на изображение">

# Требования Twitter

  • Заголовок: до 70 символов.
  • Описание: до 200 символов.
  • Изображение: минимум 280×150 пикселей и не больше 1 мегабайта.

# Как добавить Open Graph через соцпостер?

Прикрепите ссылку к посту используя в редакторе кнопку .

# Можно ли отредактировать заголовок и изменить фото?

Нет. Это информация берется соцсетью по ссылке — данные нужно изменять там.

# Карточка для ссылки формируется без фото

Могут быть разные причины.

  1. Не указаны теги на странице. Проверьте через браузер или через инструмент Facebook.

Для проверки через браузер активируйте панель разработчика сочетанием клавиш:

  • Ctrl+Shift+I в Firefox, Chrome, «Яндекс.Браузере», Edge, Opera для Windows;
  • Option+Command+J в Firefox, Chrome, «Яндекс.Браузер», Opera для macOS;
  • Option+Command+U в Safari для macOS;

Откройте вкладку «Инспектор», «Элементы» или «Elements». Разверните структуру с тегом <head> - должны быть видны теги <title> и <meta>. Проверьте, на месте ли необходимая разметка <meta property="og:image" ... > и т.д.

  1. Сайт долго отвечает. При публикации ссылки через API некоторыми соцсетями используются немного другие механизмы, чем при работе напрямую через их интерфейс — в этом случае иногда может негативно сказаться фактор скорости ответа сервера. Если он больше 200 мс, то изображение может не прикрепиться.

  2. Если ширина и высота фото не указана в разметке, то попробуйте указать. Полезно для Facebook. Пример:

<meta property="og:image:width" content="971" /> 
<meta property="og:image:height" content="509" />

# Карточка формируется с маленьким фото

Фото в og:image может быть меньше требуемого размера — проверьте размер изображения на соответствие требованиям.

# Как настроить импорт из RSS, чтобы работали Open Graph карточки?

Нужно отключить загрузку вложений «Изображения» и включить опцию «Прикрепить ссылку к посту». Таким образом настройки будут выглядеть так:

# Загрузилась не та картинка. Что делать?

Соцпостер не может повлиять, какое фото будет использовано. Управление только с помощью разметки og:image в коде страницы — убедитесь, что ссылка начинается с http(s).

# Карточка не оформляется в Twitter

Для Твиттера нужна отдельная разметка.

# Пост со ссылкой не публикуется

  • В Facebook нельзя опубликовать пост со ссылкой и другими вложениями одновременно.
  • Одноклассники чувствительны к скорости открытия страницы.

# Официальные документации соцсетей

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