Размер картинки Open Graph и OG-теги: полное руководство
Когда ссылку вставляют в Facebook, LinkedIn, X, Telegram, Slack или WhatsApp, площадка не делает скриншот страницы. Её робот скачивает HTML, читает несколько тегов Open Graph в <head> и собирает из них карточку: заголовок, короткое описание и картинку. Если тегов нет или они заполнены неверно, площадка угадывает сама — и обычно показывает обрезанный логотип или вовсе карточку без изображения. Ниже — какие теги нужны, какого размера делать OG-картинку и как заставить соцсеть забыть старое превью.
Коротко: размер картинки для Open Graph
Делайте одну картинку 1200×630 пикселей (соотношение 1.91:1) в JPG или PNG и не раздувайте вес файла. Такая картинка даёт большую карточку в Facebook, LinkedIn и X, а мессенджеры сами уменьшают её под свои превью. Заголовок и логотип держите в центральной зоне: часть приложений обрезает края или показывает квадратную миниатюру.
| Площадка | Что рекомендует документация |
|---|---|
| Для большой карточки — от 1200×630; картинки меньше 600×315 показываются в маленьком формате; абсолютный минимум 200×200; файл до 8 МБ | |
| 1.91:1, рекомендуется 1200×627 | |
X, summary_large_image | 2:1, минимум 300×157, файл до 5 МБ; JPG, PNG, WebP или GIF (только первый кадр) |
X, summary | Квадратная миниатюра 1:1, минимум 144×144 |
Пропорции 2:1 у X и 1.91:1 у остальных настолько близки, что картинка 1200×630 подходит всем: X срежет по нескольку пикселей сверху и снизу. Площадки время от времени меняют вёрстку карточек, поэтому считайте таблицу отправной точкой и перед крупным запуском проверяйте карточку в официальном инструменте каждой соцсети.
Какие теги Open Graph обязательны
Протокол Open Graph (ogp.me) называет четыре обязательных свойства: og:title, og:type, og:image и og:url. На практике к ним добавляют описание и тип карточки X. Полный набор для статьи выглядит так:
<meta property="og:title" content="Как выбрать беговые кроссовки при плоскостопии"> <meta property="og:description" content="Пять проверок перед покупкой — советы физиотерапевта."> <meta property="og:type" content="article"> <meta property="og:url" content="https://example.com/blog/krossovki-ploskostopie"> <meta property="og:image" content="https://example.com/img/og/krossovki-1200x630.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="Ноги бегуна на беговой дорожке в нейтральных кроссовках"> <meta property="og:site_name" content="Example Running"> <meta property="og:locale" content="ru_RU"> <meta name="twitter:card" content="summary_large_image">
| Тег | Статус | На что обратить внимание |
|---|---|---|
og:title | Обязательный | Пишется под ленту: хвост « | Бренд» не нужен, домен карточка и так покажет |
og:type | Обязательный | website для главной и разделов, article для статей |
og:image | Обязательный | Полный адрес с https://, который робот скачает без cookies и авторизации |
og:url | Обязательный | Канонический адрес этой страницы: Facebook строит карточку по странице, на которую он указывает |
og:description | Желательный | Одно-два предложения; некоторые приложения показывают только первую строку |
og:image:width, og:image:height | Желательные | Позволяют Facebook показать карточку при первом же шеринге, не дожидаясь загрузки картинки |
og:image:alt | Желательный | Текстовое описание картинки для экранных дикторов |
og:site_name, og:locale | По желанию | Название бренда и язык, например ru_RU или uk_UA |
Теги Open Graph пишутся с атрибутом property, теги X — с name. Многие парсеры принимают оба варианта, но если держаться соглашения, сюрпризов не будет. Писать разметку вручную не обязательно: генератор мета-тегов собирает блок Open Graph и X вместе с title и description.
twitter:card и что подставляется вместо недостающих тегов
X сначала читает свои теги twitter:*. Если twitter:title, twitter:description или twitter:image нет, он берёт og:title, og:description и og:image. Значит, странице с полным Open Graph нужна всего одна дополнительная строка — twitter:card: summary_large_image для большой картинки или summary для маленькой квадратной. Отдельные twitter:* имеют смысл, только если в X нужен другой текст или другая картинка.
LinkedIn, Telegram, Slack, Discord и WhatsApp тоже работают от Open Graph. Если тегов OG нет совсем, площадка может взять <title>, meta description и первую подходящую картинку на странице — так в карточке и оказываются пиксель счётчика или логотип из подвала.
Почему адрес картинки должен быть абсолютным
Относительный путь вроде /img/cover.jpg работает в браузере, потому что браузер знает, на какой он странице. Роботы соцсетей разрешают его ненадёжно, и многие просто показывают карточку без картинки. Всегда пишите полный адрес с протоколом. И ещё три проверки рядом:
- Без входа и cookies. Картинка должна открываться в приватном окне. Защита от хотлинка, проверка файрвола или подписанная ссылка с истекающим сроком ломают последующие репосты.
- Без JavaScript. Роботы соцсетей, как правило, не выполняют скрипты. Если одностраничное приложение подставляет мета-теги на клиенте, робот видит пустой шаблон. Отдавайте теги с сервера или делайте пререндер.
- Робот не заблокирован.
Disallowв robots.txt или агрессивный фильтр ботов отдают роботу страницу ошибки, и карточка собирается из неё.
Как площадки кэшируют превью и как его обновить
Каждая соцсеть скачивает адрес один раз и какое-то время хранит результат. После правки тегов страница уже правильная, но старая карточка будет появляться, пока площадка не перечитает её. Официальные способы это ускорить:
- Facebook (и ссылки в Messenger и директе Instagram): откройте Sharing Debugger на developers.facebook.com, вставьте адрес и нажмите Scrape Again. Там же видно, какие теги он прочитал и какие есть предупреждения.
- LinkedIn: прогоните адрес через Post Inspector (linkedin.com/post-inspector) — при проверке LinkedIn загружает страницу заново.
- Telegram: отправьте ссылку официальному боту @WebpageBot. Он обновляет превью, которое Telegram хранит для этого адреса; если первый ответ всё ещё старый, отправьте ссылку ещё раз.
- X: публичного инструмента для сброса кэша сейчас нет. Обычный обходной путь — поделиться адресом с безобидным параметром вроде
?v=2: для X это уже новый URL. - WhatsApp, Slack, Discord: официальной кнопки обновления, насколько нам известно, нет. Изменения подтягиваются со временем, а на практике снова выручает новый параметр в адресе.
cover-v2.jpg) и обновите og:image.Частые ошибки
- Одна карточка на все страницы. Тема выводит везде заголовок и логотип главной — и все репосты выглядят одинаково. Генерируйте
og:title,og:descriptionиog:imageдля каждой страницы. - og:url указывает на главную. Facebook считает
og:urlканоническим и показывает карточку главной для каждой статьи. - Дубли тегов.
og:imageвыводят и SEO-плагин, и тема. Обычно побеждает первый тег, и это может быть не тот. - Мелкий текст у краёв. На телефоне карточка часто занимает несколько сотен пикселей в ширину — текст размером 20 пикселей становится нечитаемым.
- Картинка слишком маленькая. Меньше 600×315 — и Facebook переключается на маленький формат с миниатюрой сбоку.
- Проверка только в браузере. Браузер показывает новую страницу, а соцсети помнят старую. После правок всегда перечитывайте адрес.
Как проверить теги
Вставьте адрес в отладчик Open Graph. Он загружает страницу с нашего сервера без выполнения JavaScript — так же, как роботы соцсетей, — и показывает приближённые карточки Facebook, X и LinkedIn, список найденных и недостающих тегов, реальный размер картинки в пикселях и предупреждение об относительных адресах. Превью близки к настоящим, но последнее слово за текущим дизайном соцсети и её кэшем.
На позиции в Google Open Graph не влияет: сниппет поиска строится из <title>, meta description и содержимого страницы. Эту сторону проверяйте отдельно — анализатором мета-тегов и превью выдачи. Подробности — в статьях проверка мета-тегов и сниппета в выдаче и превью сниппета.