Тег og:image - один из самых влиятельных метатегов на странице: это миниатюра, которая появляется, когда кто-то делится вашим URL в Facebook, LinkedIn, WhatsApp, Slack, Discord или X. Но есть правило, которое постоянно ставит разработчиков в тупик: URL в og:image **должен быть абсолютным**. Относительный путь молча не сработает, и предпросмотр ссылки не покажет изображение. Это руководство объясняет, почему существует такое требование, что на самом деле означает «абсолютный URL» и как правильно его задать.
Что такое og:image и почему это важно?
Open Graph - протокол, представленный Facebook в 2010 году, который позволяет управлять тем, как URL выглядит при публикации в социальных сетях. Метатег `og:image` задаёт изображение предпросмотра: крупную миниатюру, привлекающую внимание в ленте, сообщении чата или карточке ссылки. Сегодня его поддерживает практически любая платформа, отображающая предпросмотр ссылок: Facebook, LinkedIn, WhatsApp, Telegram, Discord, Slack, iMessage и другие.
Без корректного og:image платформы либо не показывают изображение вовсе, либо пытаются извлечь случайное из страницы, обычно неподходящее или слишком маленькое. Хорошо проработанный og:image способен резко повысить кликабельность публикуемого контента, что делает его одним из самых эффективных метатегов, которые можно добавить.
Базовый синтаксис
<meta property="og:image" content="https://example.com/images/article-cover.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A descriptive alt text for the preview image" />Note
Почему og:image требует абсолютный URL
Когда пользователь делится ссылкой в Facebook, LinkedIn или WhatsApp, краулер платформы обращается к этому URL, чтобы прочитать его метатеги. Ключевой момент: краулер - независимый HTTP-клиент, у него нет понятия «с какой страницы он пришёл». Читая относительный путь вроде `/images/cover.jpg`, он не имеет базового URL для разрешения, поэтому либо игнорирует тег, либо возвращает ошибку.
Абсолютный URL, напротив, самодостаточен. Он включает протокол, домен и полный путь - всё, что нужно краулеру, чтобы загрузить изображение из любого контекста, не полагаясь на только что прочитанную страницу. Именно поэтому документация Open Graph прямо указывает, что og:image должен быть абсолютным URL, и поэтому все крупные платформы требуют этого.
URL в og:image должен быть абсолютным. Относительные URL, протокол-относительные URL и data-URI не поддерживаются.
Три формата URL и какие из них работают
| Формат URL | Пример | Работает как og:image? |
|---|---|---|
| Абсолютный URL | https://example.com/og.jpg | ✓ Да - работает всегда |
| Протокол-относительный URL | //example.com/og.jpg | ✗ Нет - нет схемы |
| Путь от корня | /images/og.jpg | ✗ Нет - нет домена |
| Относительный путь | images/og.jpg | ✗ Нет - нет ни домена, ни корня |
| Data-URI | data:image/png;base64,… | ✗ Нет - это не URL |
Warning
Что на самом деле означает «абсолютный URL»
Абсолютный URL полностью определяет расположение ресурса в интернете независимо от контекста, в котором он встречается. Он состоит из четырёх компонентов, обязательных все до одного:
- Схема - протокол: `https://` (всегда используйте HTTPS; HTTP-изображения могут блокироваться правилами смешанного контента на HTTPS-страницах)
- Хост - имя вашего домена: `example.com` или `www.example.com`
- Путь - расположение файла: `/images/og-cover.jpg`
- Необязательно: порт - нужен только при работе на нестандартном порту (например, `:8080`). Для продакшена не указывайте.
https://example.com/images/og-cover.jpg
│ │ │
│ │ └-- путь к файлу изображения
│ └-------------- имя хоста (ваш домен)
└---------------------- схема (всегда https://)HTTPS против HTTP
Всегда используйте `https://` в URL og:image. Если og:image указывает на HTTP, а страница отдаётся по HTTPS, браузеры и часть краулеров заблокируют запрос из-за смешанного контента. Facebook, LinkedIn и WhatsApp загружают изображения по HTTPS и молча не сработают или не покажут изображение, если ваш URL использует HTTP.
Tip
Как получить правильный абсолютный URL в разных фреймворках
Самая частая причина ошибок с относительными URL - разработчики собирают значение og:image конкатенацией строк, не включая origin явно. Ниже приведён правильный шаблон для самых популярных фреймворков и окружений.
Next.js (App Router)
В Next.js 13+ с App Router используйте свойство `metadataBase` в корневом layout. Оно говорит Next.js, какой origin использовать при разрешении относительных путей изображений в `openGraph.images`.
import type { Metadata } from 'next';
export const metadata: Metadata = {
metadataBase: new URL('https://example.com'), // ← задаёт базу
openGraph: {
images: ['/images/og-cover.jpg'], // Next.js разрешит в абсолютный URL
},
};Без `metadataBase` Next.js выведет в HTML относительный путь, и социальные краулеры не смогут загрузить изображение. Это одна из самых часто забываемых настроек в деплоях Next.js.
Next.js (Pages Router)
В Pages Router с `next/head` полный абсолютный URL нужно собирать вручную, обычно используя переменную окружения для origin сайта.
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? 'https://example.com';
<Head>
<meta
property="og:image"
content={`${SITE_URL}/images/og-cover.jpg`}
/>
</Head>Чистый HTML / статические сайты
Здесь магии фреймворка нет: просто напишите полный URL. Единственное, за чем следить, - использовать продакшен-домен, а не localhost.
<meta property="og:image" content="https://example.com/images/og-cover.jpg" />WordPress
Плагины вроде Yoast SEO, Rank Math и All in One SEO автоматически формируют абсолютные URL для og:image, объединяя `home_url()` с путём загруженного изображения. Если вы задаёте og:image вручную в теме, используйте `get_site_url()`, чтобы построить абсолютный URL, а не прописывайте домен жёстко.
$og_image = get_site_url() . '/wp-content/uploads/og-cover.jpg';
echo '<meta property="og:image" content="' . esc_attr($og_image) . '" />';Подход через переменные окружения (рекомендуется для любого стека)
Жёстко прописанный в коде домен хрупок: staging и продакшен используют разные домены, а опечатка ломает предпросмотры везде. Самый чистый шаблон - хранить базовый URL сайта в переменной окружения и ссылаться на неё при сборке значений og:image.
NEXT_PUBLIC_SITE_URL=https://example.comexport const SITE_URL =
process.env.NEXT_PUBLIC_SITE_URL ?? 'https://example.com';
export function absoluteOgImage(path: string): string {
// Гарантируем, что путь начинается с /
const normalized = path.startsWith('/') ? path : `/${path}`;
return `${SITE_URL}${normalized}`;
}
// Использование:
// absoluteOgImage('/images/og-cover.jpg')
// → 'https://example.com/images/og-cover.jpg'Оптимизатор текста предпросмотра Open Graph
Проверьте длину og:title и og:description, риск обрезки и качество текста для социального предпросмотра - мгновенно в браузере.
Специфичные требования WhatsApp к og:image
Предпросмотр ссылок в WhatsApp формирует собственный краулер, который по ряду параметров строже, чем у Facebook или LinkedIn. Если ваш og:image работает в Facebook, но не в WhatsApp, обычно причина в одном из этих ограничений.
- Абсолютный HTTPS-URL - как и на других платформах; WhatsApp не следует перенаправлениям с HTTP на HTTPS.
- Изображение должно быть публично доступным - без авторизации и защиты от ботов, блокирующей диапазоны IP краулера WhatsApp.
- Минимальный размер: 300×200 px - изображения меньше часто игнорируются рендерером предпросмотра WhatsApp.
- Максимальный размер файла: ~300 КБ - у краулера WhatsApp короткий таймаут на загрузку изображений. Крупные файлы либо не успевают загрузиться, либо пропускаются.
- Формат JPEG или PNG - поддержка WebP зависит от версии и платформы WhatsApp. Для максимальной совместимости используйте JPEG.
- og:image:width и og:image:height настоятельно рекомендуются - они позволяют WhatsApp рассчитать контейнер предпросмотра до загрузки.
Warning
Рекомендуемая настройка og:image для WhatsApp
<!-- Основной og:image - должен быть абсолютным HTTPS-URL -->
<meta property="og:image" content="https://example.com/og/article-cover.jpg" />
<!-- Настоятельно рекомендуемые спутники -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Заголовок статьи или краткое описание" />
<!-- Нужны, чтобы WhatsApp показал полную карточку ссылки, а не просто URL -->
<meta property="og:title" content="Заголовок вашей страницы" />
<meta property="og:description" content="Краткое описание содержимого страницы." />
<meta property="og:url" content="https://example.com/your-page" />Генератор метатегов
Создайте полный блок Open Graph, Twitter Card и стандартных метатегов за секунды - с предпросмотром в реальном времени и предупреждениями SEO-аудита.
Частые ошибки и как их исправить
Даже опытные разработчики повторяют одни и те же ошибки с og:image. Вот самые частые проблемы и точные способы их устранения.
Ошибка 1: относительный путь
<meta property="og:image" content="/images/og-cover.jpg" /><meta property="og:image" content="https://example.com/images/og-cover.jpg" />Ошибка 2: localhost в продакшен-сборках
Обычно это происходит, когда переменная окружения из staging или локальной разработки попадает в репозиторий без переопределения для продакшена.
<meta property="og:image" content="http://localhost:3000/og.jpg" />Ошибка 3: og:image отсутствует вовсе
Если og:image нет, платформы попытаются найти изображение в содержимом страницы, обычно с плохим результатом. Всегда указывайте явный og:image на каждой странице, которую предполагается публиковать. С помощью анализатора метатегов Aback можно мгновенно проверить любой живой URL и убедиться, что og:image присутствует и корректно оформлен.
Ошибка 4: изображение отдаёт статус 4xx или 5xx
Абсолютный URL, корректный по форме, но сломанный на практике (404, 403, 500), даст тот же результат, что и отсутствие изображения: пустой предпросмотр. Всегда проверяйте, что URL изображения возвращает 200 OK с правильным заголовком `Content-Type`.
Ошибка 5: изображение за авторизацией
Социальные краулеры не отправляют cookie и заголовки авторизации. Если URL og:image требует входа или находится на staging-сервере, защищённом базовой HTTP-аутентификацией, краулер получит 401 либо HTML страницы входа вместо изображения. Файлы og:image должны быть всегда публично доступными, даже если сама страница находится за пейволлом.
Ошибка 6: неверные размеры изображения
Слишком маленькие изображения (менее 200×200 px) могут игнорироваться. Изображения с необычными пропорциями могут обрезаться или отображаться с полями. Универсально безопасные размеры - 1200×630 px при соотношении 1,91:1. Сгенерировать og:image нужного размера за секунды можно в генераторе изображений OG.
| Проблема | Симптом | Решение |
|---|---|---|
| Относительный путь | Изображение не показывается при публикации | Добавьте префикс https://вашдомен.com |
| URL с localhost | Изображение не показывается при публикации | Используйте продакшен-домен; проверьте переменные окружения |
| HTTP вместо HTTPS | Нет изображения или ошибка смешанного контента | Отдавайте изображение по HTTPS |
| Изображение 404/403 | Изображение не показывается при публикации | Исправьте путь или права доступа |
| Изображение за авторизацией | Изображение не показывается при публикации | Перенесите файл в публичный путь CDN |
| Неверные размеры | Предпросмотр обрезан или отсутствует | Используйте JPEG или PNG 1200×630 px |
| Нет og:image:width/height | Медленный или отсутствующий предпросмотр в WhatsApp | Добавьте og:image:width и og:image:height |
Как проверить, что og:image задан правильно
Правильно задать тег в коде - одно дело, убедиться, что он действительно работает, - совсем другое. Вот самые быстрые способы проверки.
Используйте анализатор метатегов
Анализатор метатегов на Aback Tools позволяет ввести любой живой URL и увидеть все метатеги страницы, включая og:image. Он проверяет наличие значения, абсолютность URL и отмечает типичные проблемы формата. Это самая быстрая первичная проверка.
Используйте Sharing Debugger от Facebook
Sharing Debugger Facebook (`developers.facebook.com/tools/debug`) загружает и отображает данные Open Graph для любого URL, показывает, какое именно изображение появится, и позволяет принудительно обновить кеш. Это авторитетный источник для предпросмотров в Facebook и Instagram.
Используйте Post Inspector от LinkedIn
Post Inspector LinkedIn (`linkedin.com/post-inspector`) выполняет ту же функцию для предпросмотров в LinkedIn. Он особенно полезен тем, что поведение краулера LinkedIn отличается от Facebook в работе с кешем и HTTPS-перенаправлениями.
Проверьте HTML-источник напрямую
Откройте исходный код страницы (`Ctrl+U` / `Cmd+U`) или DevTools браузера и прочитайте необработанный HTML. Найдите метатег `og:image` и скопируйте значение. Если оно не начинается с `https://`, любой краулер потерпит неудачу.
Проверьте URL изображения отдельно
Вставьте URL og:image прямо в адресную строку браузера. Если вы получите 404, страницу входа или что угодно, кроме изображения, краулеры получат тот же ответ. URL должен возвращать само изображение со статусом 200 OK.
Анализатор метатегов
Проверьте любой живой URL на наличие og:image, абсолютный формат URL, теги Twitter Card и более 15 других SEO-сигналов за один прогон.
og:image на разных платформах
Разные платформы обрабатывают og:image немного по-разному. Понимание этих различий помогает написать один метатег, который работает везде.
| Платформа | Мин. размер | Рекомендуемый размер | Формат | Кеширование |
|---|---|---|---|---|
| Facebook / Instagram | 200×200 px | 1200×630 px | JPG, PNG, GIF | Постоянное; сброс через Debugger |
| 200×200 px | 1200×627 px | JPG, PNG | Постоянное; сброс через Post Inspector | |
| 300×200 px | 1200×630 px | JPG, PNG | На устройстве; сложно сбросить | |
| Telegram | 200×200 px | 1200×630 px | JPG, PNG, WebP | Долгоживущее; пересоздаётся при повторной публикации |
| Discord | 256×256 px | 1200×630 px | JPG, PNG, GIF | Короткое; обновляется автоматически |
| Slack | 500×500 px | 1200×630 px | JPG, PNG | На рабочее пространство; очищается примерно через 30 дней |
| X (Twitter) | 144×144 px | 1200×600 px | JPG, PNG, WebP | ~7 дней; сброс через Card Validator |
Note
Динамические og:image
Всё более популярный приём - генерировать og:image динамически для каждой страницы: например, og:image статьи может включать заголовок и имя автора, сформированные на сервере как PNG. Фреймворки вроде Next.js поддерживают это через API `ImageResponse` (`next/og`). Результат всё равно остаётся абсолютным URL: динамическая генерация происходит на сервере, а краулеры видят обычный `https://`-адрес изображения.
Если предпочитаете подход без кода, генератор изображений OG позволяет оформить собственное изображение для социального предпросмотра 1200×630 px с вашим текстом, цветами и композицией и скачать его в PNG - готовое к загрузке в CDN и использованию как абсолютный URL.
og:image вместе с полным набором тегов Open Graph
og:image редко работает в изоляции. Платформы используют весь набор тегов Open Graph, чтобы решить, отрисовывать ли насыщенную карточку ссылки или просто URL. Если вы добавляете og:image на страницу, вот какие теги стоит задать одновременно:
- og:title - заголовок карточки ссылки (обычно совпадает с `<title>`, но может быть короче)
- og:description - резюме в 1-2 предложения под заголовком; проверьте длину в оптимизаторе текста предпросмотра OG
- og:url - канонический URL страницы (используйте тот же, что в `<link rel="canonical">`)
- og:type - `website` для большинства страниц; `article` для постов блога
- og:site_name - название сайта или бренда
- og:image - абсолютный URL изображения предпросмотра (тема этой статьи)
- og:image:width и og:image:height - настоятельно рекомендуются для быстрой отрисовки
- og:image:alt - описательный alt-текст для доступности и читаемого ИИ контекста
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:title" content="Your Article Title" />
<meta property="og:description" content="A brief, compelling description under 155 characters." />
<meta property="og:url" content="https://example.com/blog/your-article" />
<meta property="og:image" content="https://example.com/og/your-article.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="Visual description of the preview image" />
<!-- Запасной вариант для Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og/your-article.jpg" />Весь этот блок можно сгенерировать и проверить, включая og:image с проверкой абсолютного URL, в генераторе метатегов, либо проверить существующую страницу с помощью анализатора метатегов.
Key takeaways
- og:image должен быть абсолютным URL: относительные пути, протокол-относительные URL и data-URI молча не срабатывают.
- Всегда используйте https://: HTTP-изображения блокируются правилами смешанного контента, и многие краулеры их отклоняют.
- Рекомендуемый размер og:image - 1200×630 px (соотношение 1,91:1) и вес менее ~300 КБ в JPEG.
- Добавляйте og:image:width и og:image:height, чтобы ускорить отрисовку предпросмотра в WhatsApp и Telegram.
- В Next.js App Router задайте metadataBase, чтобы избежать относительных путей; в Pages Router собирайте полный URL через переменную окружения.
- Проверяйте анализатором метатегов, Facebook Sharing Debugger и LinkedIn Post Inspector до публикации.
- Краулеры не достанут localhost, staging-серверы за авторизацией и изображения, отдающие 4xx/5xx: файлы og:image должны быть публично доступны.