Open Graph (OG) — это протокол разметки, который задаёт, как ссылка на вашу страницу будет выглядеть при публикации в соцсетях и мессенджерах: заголовок, описание, изображение и тип контента. OG-теги добавляют в секцию <head> страницы, и именно их считывают Facebook, LinkedIn, Telegram, Viber, когда формируют превью-карточку.
Простыми словами: это «инструкция для соцсетей», какой картинкой и какой подписью показать вашу ссылку. Не зададите — платформа угадает сама, и часто неудачно.
Что такое Open Graph и зачем он нужен
Протокол Open Graph ввёл Facebook ещё в 2010 году, и с тех пор его поддерживают почти все крупные платформы. Без OG-разметки соцсеть подтянет случайную картинку и кусок текста со страницы — привлекательность поста падает, а с ней и кликабельность. С правильными OG-тегами вы контролируете карточку: показываете нужное изображение, чёткий заголовок и описание. Это не фактор ранжирования в Google, но прямо влияет на трафик из соцсетей.
Синтаксис и пример кода
Базовый набор OG-тегов в <head>:
<meta property="og:title" content="Название страницы">
<meta property="og:description" content="Краткое описание">
<meta property="og:image" content="https://pro-fits.com.ua/img/preview.jpg">
<meta property="og:url" content="https://pro-fits.com.ua/seo/">
<meta property="og:type" content="website">
Рекомендованный размер og:image — 1200×630 пикселей: так картинка не обрежется на большинстве платформ.
Типичные ошибки
- Нет
og:imageили картинка слишком мала — превью выходит без изображения. - Изображение не 1200×630 — платформа обрезает его как ей удобно.
- Не указан абсолютный URL картинки (нужен полный, с доменом).
- Изменили OG, а карточка старая — надо сбросить кеш в отладчике соцсети.
Пример
Статья блога без OG публиковалась в Facebook с логотипом сайта вместо обложки и названием рубрики вместо заголовка. Добавили og:title, og:description и og:image 1200×630 — и та же ссылка стала выглядеть как полноценная карточка с обложкой. Кликабельность постов заметно выросла.
Часто путают с…
- Мета-теги — OG это их подвид для соцсетей; обычные meta (title, description) работают в поиске, OG — в превью публикаций.
- Structured data (Schema.org) — разметка для поисковых систем и rich-результатов, а не для карточек в соцсетях.
- Twitter Cards — отдельный, похожий формат для X (Twitter); часто задают вместе с OG.
Вопросы и ответы
Open Graph влияет на SEO?
Прямо на ранжирование в Google — нет. Но OG повышает кликабельность в соцсетях, а это трафик и поведенческие сигналы. Поэтому теги ставят на всех важных страницах.
Какой размер картинки для og:image?
Оптимально 1200×630 пикселей (соотношение 1.91:1). Слишком маленькие изображения платформы могут не показать вовсе.
Почему в соцсети старая картинка после смены OG?
Платформа закешировала прежнее превью. Надо обновить кеш через официальный отладчик (например, Sharing Debugger в Facebook).
Ссылки выглядят «как попало» при публикации? Настроим OG-разметку в рамках SEO-аудита и исправления ошибок на сайте.
Похожие термины: Мета-теги, Structured data, Schema.org, Title, HTML.
Опишіть свій запит
і ми зробимо для Вас
пропозицію
Напишіть мені, щоб бути в ТОП
- Продвижение сайтов в Днепре
- Продвижение сайтов в Чернигове
- Продвижение сайтов в Николаеве
- Продвижение сайтов в Одессе
- Продвижение сайтов в Виннице
- Продвижение сайтов в Полтаве
- Продвижение сайтов в Черкассах
- Продвижение сайтов в Запорожье
- Продвижение сайтов в Ивано-Франковске
- Продвижение сайтов в Харькове
