Что такое Open Graph

Open Graph (OG) — это набор мета-тегов в <head>, который описывает страницу для превью при расшаривании ссылки в соцсетях, мессенджерах и некоторых сервисах. По OG платформы берут заголовок, описание, картинку, тип контента, язык и т. п., чтобы собрать красивую «карточку».

Время прочтения:

4 минуты

Дата публикации:

19.08.25

45

Главная

Что такое Open Graph

глоссарий

a

b

c

d

e

f

g

h

i

j

l

m

o

p

r

s

t

u

v

w

y

А

Y

А

Б

В

Г

Д

Е

з

и

к

л

м

н

о

п

р

с

т

у

ф

х

ц

ч

ш

А

Я

метрика месяца

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

ROMI

OG не влияет на SEO-ранжирование поисковиков. Он влияет на CTR в социальных/мессенджер-превью и консистентность бренда.

Базовые теги

<meta property="og:title" content="Клинкерная плитка — как выбрать и не ошибиться">
<meta property="og:description" content="Критерии выбора, сравнение материалов, чек-лист и частые ошибки монтажа.">
<meta property="og:image" content="https://example.com/og/tiles-guide-1200x630.jpg">
<meta property="og:url" content="https://example.com/blog/klinker-guide/">
<meta property="og:type" content="article">      <!-- 'website' для главной/обычных страниц -->
<meta property="og:site_name" content="Example">
<meta property="og:locale" content="ru_RU">

Полезные дополнения для картинок:

<meta property="og:image:width"  content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt"    content="Образцы клинкерной плитки разных фактур">
<!-- HTTPS-версия (если основной URL не https) -->
<meta property="og:image:secure_url" content="https://example.com/og/tiles-guide-1200x630.jpg">

Расширенные свойства по типам контента

Статья (og:type="article"):

<meta property="article:published_time" content="2024-10-22T09:00:00+03:00">
<meta property="article:modified_time"  content="2025-08-01T12:30:00+03:00">
<meta property="article:author"         content="https://example.com/authors/ivan-ivanov/">
<meta property="article:section"        content="Строительство">
<meta property="article:tag"            content="клинкер">

Товар (og:type="product") — для карточек:

<meta property="product:brand"          content="Keralux">
<meta property="product:availability"   content="in stock">
<meta property="product:condition"      content="new">
<meta property="product:price:amount"   content="1490.00">
<meta property="product:price:currency" content="RUB">

Видео:

<meta property="og:video"         content="https://cdn.example.com/video/guide.mp4">
<meta property="og:video:type"    content="video/mp4">
<meta property="og:video:width"   content="1280">
<meta property="og:video:height"  content="720">

Изображения: требования и лучшие практики

Размер/пропорции: ориентир 1200×630 (соотношение ~1,91:1). Минимум обычно 200×200. Используйте JPEG/PNG; WebP поддерживается не везде — держите совместимый формат;
Вес: чем легче, тем быстрее подтягивается превью (идеально до 200–400 КБ);
Безопасная зона: не прижимайте текст к краям — разные платформы могут кадрировать;
Несколько изображений: можно задать несколько og:image — многие берут первое;
Абсолютные URL и HTTPS. И картинка, и страница должны быть доступны без авторизации (не за CDN-защитой, не по локальным ссылкам);
Для стабильности добавляйте og:image:width/height — это ускоряет отрисовку карточки.

Локализация и альтернативы

Язык страницы: og:locale="ru_RU", альтернативы:

<meta property="og:locale:alternate" content="en_US">
<meta property="og:locale:alternate" content="de_DE">

Для мультиязычных сайтов OG живёт на каждой локали со своим контентом. (Для поиска языки связывают hreflang, а не OG.).

Связь с Twitter, Telegram и другими

Twitter Cards: Твиттер читает свои теги (<meta name="twitter:card" content="summary_large_image">, twitter:title, twitter:description, twitter:image). При их отсутствии часто использует OG, но лучше задать оба набора;
Telegram/WhatsApp/LinkedIn/VK в основном смотрят на OG. Telegram любит первое og:image и og:title/description;
Для YouTube-встраиваний и карт используйте их готовые iframes; карточка всё равно считывает OG вашей страницы при шаре прямой ссылки.

Технические нюансы внедрения

Абсолютные, канонические URL в og:url. Совпадает с <link rel="canonical">;
Один набор OG на странице. Не дублируйте теги;
SSR/пререндер для SPA. Большинство скрейперов не исполняют JS: отдавайте OG с сервера;
Редиректы: скрейперы ходят по og:url/href — убедитесь, что финальный ответ 200 OK, не 3xx-цепочка;
Кэш предпросмотров: соцсети кэшируют OG. После обновлений «пнулите»:

Facebook/Meta: Sharing Debugger → Scrape Again,
LinkedIn Post Inspector,
Telegram обычно обновляет с TTL; иногда помогает добавить параметр версии к изображению (…jpg?v=2).

Типичные ошибки

Относительные пути в og:image / og:url;
Тяжёлая/недоступная картинка (по авторизации, IP-фильтрам, robots/CDN-защите);
og:type не соответствует контенту (article для статей, website — для главной);
Несовпадение og:url и каноникала → дубли и кэш-путаница в карточках;
Полагаться на JS-генерацию OG в SPA — скрейпер ничего не видит;
Ставить текст на картинку вплотную к краям — обрезания/оверлеи платформ.

Мини-чек-лист Open Graph

Проставлены og:title, og:description, og:image, og:url, og:type, og:site_name, og:locale;
Картинка 1200×630, ≤ ~400 КБ, абсолютный HTTPS-URL, есть og:image:width/height;
og:url = канонический URL страницы; статус ответа 200 OK;
Для статей/товаров — добавлены профильные свойства (article:*, product:*);
Для SPA/SSR — OG отдаются сервером, не зависят от выполнения JS;
Twitter Cards заданы отдельно (twitter:card, twitter:title/description/image);
После обновлений карточки — прогнаны валидаторами (Sharing Debugger, Post Inspector).

заключение

Open Graph — ваш «паспорт» страницы для соцсетей и мессенджеров. Дайте корректные og:title/description/image/url/type, используйте качественное изображение 1200×630, держите абсолютные HTTPS-ссылки и серверную генерацию тегов. Проверьте валидаторами — и ваши ссылки будут выглядеть одинаково хорошо в любом шеринге, повышая кликабельность и узнаваемость бренда.