Руководство по социальным превью
Изображения Open Graph: проверьте ссылку перед публикацией
Изображения Open Graph определяют, как выглядит ваша страница при публикации ссылки. Руководство показывает практичные размеры, теги, проверки дизайна, обновление кэша и чеклист для полезных превью.
Краткий ответ
Выберите одно изображение Open Graph и проверьте ссылку перед публикацией
Для большинства страниц начните с изображения 1200 x 630, держите важный текст и логотипы подальше от краёв, используйте абсолютные HTTPS URL изображений и тестируйте итоговый URL в инструментах отладки платформ. Этот простой процесс ловит большинство проблем с превью.
Роль превью
Рассматривайте изображение Open Graph как ресурс страницы
Изображение Open Graph — это не украшение. Это картинка, представляющая страницу при создании карточки ссылки для соцсетей, мессенджеров и рабочих инструментов. Оно должно соответствовать заголовку, описанию, видимой теме страницы и изображению в структурированных данных.
Это привлекает клик
Изображение, заголовок и описание формируют первое впечатление до того, как посетитель попадёт на страницу.
Должно соответствовать содержимому
Хорошее превью-изображение соответствует заголовку страницы, видимой теме и основному обещанию для пользователя, а не использует общий брендовый график.
Это часть SEO-данных
Изображения Open Graph, Twitter-карт, канонические URL и JSON-LD должны описывать одну и ту же страницу.
Требуется правило именования
Чёткое имя файла и правило обновления предотвращают возврат устаревших кэшей и старых изображений кампаний.
План размеров
Выберите размеры, которые сохранятся в реальных превью
Разные платформы обрезают и кэшируют превью по-разному. Файл 1200 x 630 — хороший стандарт для Open Graph, но безопаснее проектировать с центральной безопасной зоной и тестировать итоговый URL на ключевых платформах.
| Платформа или использование | Практичный план изображения | Обратите внимание на | Проверка перед публикацией |
|---|---|---|---|
| Общий Open Graph | Используйте 1200 x 630 как практический стандарт для большого изображения при шаринге. | Маленькие изображения могут выглядеть размытыми или отображаться как маленькие миниатюры. | Проверьте итоговый URL в отладчике платформы перед публикацией. |
| Facebook и LinkedIn | Используйте изображение с соотношением 1.91:1, если странице не нужен специфичный для платформы ресурс. | Края могут обрезаться по-разному в разных лентах и на устройствах. | Держите важный текст и логотипы в центральной безопасной зоне. |
| Большая карточка X | Используйте summary_large_image и держите визуал в центре; X поддерживает широкое изображение большой карточки. | Мелкий текст и детали по краям могут исчезать при обрезке или изменении размера карточки. | Установите twitter:image и протестируйте с помощью инструментов карточек X. |
| Мессенджеры и рабочие инструменты | Держите файл маленьким и дизайн простым, так как превью часто показываются в компактных окнах. | Перегруженные скриншоты, длинные заголовки и низкая контрастность быстро становятся нечитаемыми. | Вставьте итоговую ссылку в инструменты, которыми пользуется ваша аудитория. |
Держите основное сообщение в центре изображения. Края — рискованная зона, так как карточки в ленте, превью в чатах и мобильные макеты могут обрезать по-разному.
HTML
Установите теги, необходимые краулерам, до публикации страницы
Теги Open Graph должны находиться в разделе <head> HTML. Используйте абсолютные URL изображений, указывайте ширину и высоту, добавляйте информативный alt-текст и сохраняйте канонический URL, соответствующий странице, которой действительно будут делиться пользователи.
<meta property="og:type" content="article">
<meta property="og:title" content="Your clear page title">
<meta property="og:description" content="A short description that matches the page.">
<meta property="og:url" content="https://example.com/guide/">
<meta property="og:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Short description of the preview image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta name="twitter:image:alt" content="Short description of the preview image">| Тег | Почему это важно | Типичная ошибка |
|---|---|---|
| og:image | Указывает краулерам изображение, которое должно представлять страницу. | Использование относительного пути или изображения, заблокированного логином, редиректами или правилами robots. |
| og:image:width / og:image:height | Сообщает платформам размер изображения до загрузки и проверки файла. | Отсутствие размеров заставляет каждого краулера угадывать, как отобразить превью. |
| og:image:alt | Описывает превью-изображение для доступности и даёт краулерам больше контекста. | Повторение заголовка страницы вместо описания видимого на изображении. |
| og:url | Связывает превью с каноническим URL страницы, который должен быть опубликован. | Использование трекингового, тестового или неправильного по культуре URL как постоянного идентификатора страницы. |
| twitter:card / twitter:image | Дает X явную инструкцию для большой карточки и опциональное изображение для платформы. | Предположение, что X всегда отображает изображение Open Graph так же, как другие платформы. |
Если вы используете Blazor, Компонент SEO-метаданных Blazor объединяет теги Open Graph, Twitter-карты, канонические URL и метаданные JSON-LD.
Правила дизайна
Сначала разработайте для маленькой карточки в ленте
Большинство пользователей не увидят полное изображение. Они видят сжатую карточку в ленте, сообщении или окне превью. Побеждают простые макеты: один чёткий объект, читаемый контраст и отсутствие мелкого текста, работающего только в исходном файле.
Рабочий процесс
Простой рабочий процесс для каждой важной страницы
- 1
Напишите обещание превью
Определите, что должна передавать карточка с первого взгляда: тема, выгода, продукт или угол подачи статьи.
- 2
Создайте изображение с запланированным соотношением
Используйте 1200 x 630 для стандартного файла и держите важное содержимое в центре.
- 3
Оптимизировать файл
Используйте JPG или PNG для социального изображения, держите файл небольшим и избегайте видимых артефактов сжатия.
- 4
Настройте метаданные и схему
Обновляйте теги Open Graph, Twitter-карты, канонический URL и ссылки на изображения JSON-LD одновременно.
- 5
Публикуйте с постоянным именем файла
Используйте осмысленное имя файла и меняйте его при замене изображения, если кэши платформ могут сохранять старую версию.
- 6
Проверьте итоговый URL
Пропустите публичный URL страницы через отладочные инструменты и проверьте реальное превью, а не только исходный код.
Подсказка
Используйте PixelPress после выбора размера превью
Когда план изображения задаёт имена финальным файлам, PixelPress помогает локально конвертировать в WebP или AVIF. Сохраняйте оригиналы, проверяйте результат и обновляйте URL Open Graph.
Отладка
Обновите кэши платформы перед тем, как доверять превью
Социальные платформы кэшируют данные превью. Если заменить изображение, но оставить тот же URL, платформа может показывать старое превью. Используйте официальные инструменты и при необходимости меняйте имя файла или добавляйте версионированный URL.
Контрольный список
Контрольный список изображений Open Graph перед публикацией
Используйте этот список перед публикацией статьи, страницы товара, инструмента или лендинга. Он выявляет проблемы с превью, которые сложно заметить после распространения ссылки.
Частые вопросы
Какой размер должен быть у изображения Open Graph?
Используйте 1200 x 630 как практический стандарт для большинства превью Open Graph. Размер достаточен для экранов с высокой плотностью и близок к распространённому соотношению 1.91:1. Тем не менее тестируйте итоговый URL, так как платформы могут обрезать или кэшировать превью по-разному.
Можно ли использовать одно и то же изображение Open Graph для всех страниц?
Можно, но обычно это слабее. Универсальное брендированное изображение лучше, чем его отсутствие, но важные статьи, страницы товаров и инструменты должны иметь превью, соответствующее конкретной странице.
Почему моё старое изображение Open Graph всё ещё отображается?
Самая частая причина — кэширование платформой. Используйте Facebook Sharing Debugger, LinkedIn Post Inspector или инструменты карточек X для обновления URL. Если старый файл продолжает появляться, опубликуйте новое изображение с новым именем файла или версионированным URL.
В чём разница между og:image и twitter:image?
og:image — стандартное изображение Open Graph, используемое многими платформами. twitter:image — специфично для карточек X. Если указать twitter:image, X использует его вместо og:image.
Должно ли изображение JSON-LD совпадать с изображением Open Graph?
Не обязательно быть идентичным, но должно рассказывать одну и ту же историю страницы. Метаданные поиска, теги Open Graph, Twitter-карты и JSON-LD не должны указывать на нерелевантные или устаревшие изображения.
Какую роль играет PixelPress в изображениях Open Graph?
PixelPress используется после выбора размера изображения, имени файла и роли. Он помогает локально конвертировать финальные файлы, сохраняя оригиналы. Странице всё равно нужны корректные метаданные и тестирование превью.