Новый формат
Open Graph: как оформить ссылку из соцсетей на сайт
Open Graph задаёт, как ссылка на ваш сайт выглядит в превью: заголовок, текст, картинка, тип объекта. Без разметки соцсеть часто тянет случайный фрагмент или мелкое изображение — клики и доверие падают.
Ниже — зачем нужен OG, базовые теги, проверка и частые ошибки. Соседние материалы про протокол Open Graph в очереди смотрите на этот канон.
Зачем нужен Open Graph
Когда человек вставляет URL в пост или сообщение, платформа строит карточку. OG говорит: какую картинку взять, какой заголовок и текст показать, какой канонический URL считать объектом.
Протокол изначально связан с экосистемой Facebook*, но теги подхватили другие сети и сервисы. Для бизнеса это контроль первого впечатления по ссылке на сайт — не «магия трафика из воздуха».
Что вы контролируете:
- заголовок и описание превью;
- изображение;
- URL объекта;
- тип (статья, товар, сайт).
Базовые теги и пример
В head страницы размещают meta с `property` и `content`. `og:url` указывайте на канонический адрес страницы. `og:type` для статей часто `article`, для главной — `website`, для товара — `product` (если поддерживаете расширения).
Картинка — абсолютный URL. Описание — 1–2 предложения без переспама; заголовок читаемый, не простыня ключей.
Минимальный набор:
- `og:title` — заголовок карточки;
- `og:description` — короткий текст;
- `og:image` — превью;
- `og:url` — канон страницы;
- `og:type` — тип объекта;
- `og:locale` — например `ru_RU`.
Картинки и видео
Плохое превью чаще из‑за мелкого, вертикального или закрытого картинкой файла. Держите горизонтальный кадр, достаточный вес/разрешение и стабильный URL (не одноразовый токен).
Для видео OG допускает доп. свойства (`og:video` и связанные) — имеет смысл, если реально отдаёте ролик, а не только постер. Иначе достаточно сильного `og:image`.
Проверка изображения:
- открывается по прямой ссылке;
- https без смешанного контента;
- не обрезан логотип/лицо по краям;
- одна актуальная версия на URL (без сюрпризов CDN).
Как проверить разметку
View Source / DevTools: есть ли og-теги на нужной странице. Затем — официальные отладчики превью платформ, которыми пользуетесь в каналах (где доступны). Сверьте, что подтянулись ваши title/image, а не чужой фрагмент.
После смены картинки сбросьте кэш превью. Убедитесь, что сервер не отдаёт другой HTML боту соцсети (клоакинг недопустим).
Чеклист проверки:
- теги в head, не в body;
- один осмысленный набор на URL;
- `og:url` = канон;
- превью совпадает с задумкой;
- мобильный шаринг выглядит читаемо.
Типичные ошибки
Относительный путь в `og:image`, битая картинка, общий дефолт на все статьи («одна обложка на весь сайт»), заголовок из title с переспамом, `og:url` на главную с внутренних страниц.
Конфликт с canonical: в превью один URL, в каноне другой — путаница для людей и аналитики UTM. Согласуйте.
Часто ломает CTR:
- текст обрезан посередине слова;
- watermark на весь кадр;
- кликбейт, не совпадающий с страницей;
- устаревшее превью из кэша.
Практика внедрения
На шаблонах CMS задайте поля: title/description/image для OG отдельно или с наследованием от SEO-полей. Для карточек товара — свои превью. Добавьте контроль в чеклист релиза контента.
OG не заменяет контент и рекламу: он делает переход из соцсети аккуратнее. Меряйте CTR постов и отказы посадочных, а не «наличие тегов» как KPI.
На неделю:
- OG на главную и 5 ключевых URL;
- проверка превью;
- правило для новых статей;
- согласование с каноном и UTM.
Частые вопросы
Open Graph — это SEO-фактор позиций?
Прямо в ранжировании поиска почти не участвует. Это про CTR и узнаваемость при шаринге и иногда в мессенджерах.
Где прописывать теги?
В `<head>` страницы: `meta property="og:…"`. На CMS — SEO-плагин или шаблон; на статике — в layout.
Какие теги обязательны?
Минимум: `og:title`, `og:type`, `og:image`, `og:url`. Полезно добавить `og:description` и `og:locale`.
Чем OG отличается от Twitter Card?
Похожая идея превью, другие meta-имена. Многие сети читают OG; для X/Twitter иногда дублируют card-теги.
Почему превью не обновляется?
Кэш соцсети. После правки — отладчик/сброс кэша превью для URL. Проверьте, что отдаёте актуальный HTML без старого CDN-кэша.
Какой размер картинки?
Ориентир ~1200×630 px, абсолютный https-URL, файл доступен без авторизации. Не кропайте важный текст по краям.
Нужен ли OG на каждой странице?
На тех, которыми делятся: статьи, карточки, посадочные. На служебных — по желанию.
OG заменяет title/description?
Нет. Title/description — для поиска и вкладки; OG — для превью шаринга. Они могут совпадать по смыслу, но это разные контуры.
Превью ссылок в соцсетях кривое?
Настроим Open Graph: заголовок, описание и картинка без сюрпризов кэша.
Обсудить задачу
