При публикации ссылки в соцсети платформа формирует карточку: заголовок, описание и изображение. Если разметка настроена неправильно, превью может быть некрасивым, обрезанным или вовсе отсутствовать. В этой статье — как настроить превью так, чтобы ссылки выглядели профессионально в любой соцсети.
Как соцсети формируют превью
При добавлении ссылки платформа:
- Загружает страницу
- Ищет Open Graph теги (og:title, og:description, og:image)
- При отсутствии OG — парсит title, meta description и первое подходящее изображение
- Кэширует результат
Без OG вы не контролируете процесс. Платформа может взять логотип вместо релевантной картинки, обрезать заголовок или показать техническое описание.
Минимальная настройка за 5 минут
Добавьте в <head> каждой страницы:
<meta property="og:title" content="Заголовок, который увидят в соцсетях">
<meta property="og:description" content="Краткое описание на 1-2 предложения. Должно побуждать к клику.">
<meta property="og:image" content="https://ваш-сайт.ru/images/preview.jpg">
<meta property="og:url" content="https://ваш-сайт.ru/страница/">
<meta property="og:type" content="website">
Критически важно: og:image должен быть абсолютным URL с https://. Относительные пути не работают.
Требования к изображению превью
| Параметр | Рекомендация |
|---|---|
| Размер | 1200×630 px (универсально для всех платформ) |
| Соотношение | 1.91:1 |
| Формат | JPG или PNG |
| Размер файла | До 1 МБ (оптимально 100–300 КБ) |
| Содержимое | Важная информация в центре, учёт обрезки по краям |
Зоны безопасности
Платформы могут обрезать изображение. VK показывает 537×240 в ленте, Telegram — разные пропорции в зависимости от клиента. Держите ключевые элементы (логотип, текст) в центральной зоне 1000×500 px.
Платформо-специфичные особенности
VK
- Использует og:image
- В ленте отображается 537×240, в полном посте — больше
- Кэш агрессивный, сброс через время или при смене URL
Telegram
- Использует og:*
- Требует HTTPS для изображения
- Кэширует надолго — при смене картинки старый вариант может показываться дни
- Решение: добавить query-параметр к URL изображения при обновлении (
?v=2)
- Строгие требования к размеру: минимум 200×200, рекомендуется 1200×630
- Debugger: https://developers.facebook.com/tools/debug/ — для проверки и сброса кэша
- Использует OG
- Показывает компактную карточку в чате
Динамическая генерация превью
Для CMS и статических генераторов можно задавать OG на уровне шаблона с подстановкой переменных:
<meta property="og:title" content="{{ page.title }}">
<meta property="og:description" content="{{ page.description }}">
<meta property="og:image" content="{{ site.url }}{{ page.image }}">
<meta property="og:url" content="{{ page.url }}">
Для статей — уникальное изображение на каждую публикацию. Для товаров — фото товара. Для главной — общее превью сайта.
Решение типичных проблем
Превью не отображается
- Проверьте, что og:image — абсолютный URL с https://
- Убедитесь, что изображение доступно (нет 403/404)
- Проверьте robots.txt — не блокируется ли путь к изображению для краулеров
- Используйте OG Preview на reChecker для диагностики
Старая картинка в превью
Соцсети кэшируют превью. Решения:
- Facebook: Sharing Debugger — «Scrape Again»
- VK: подождать или изменить URL страницы
- Telegram: изменить URL изображения (добавить ?v=2)
Обрезанный текст
- og:title — до 60 символов для безопасного отображения
- og:description — до 160 символов
- Проверяйте в OG Preview — инструмент показывает, как будет выглядеть карточка
Разное отображение на разных платформах
Это нормально. У каждой платформы свои пропорции и лимиты. Универсальный размер 1200×630 минимизирует искажения.
Шаблоны превью для разных типов контента
Статья блога
- Уникальное изображение к статье (фото, инфографика)
- og:title — заголовок статьи
- og:description — лид или вывод (1–2 предложения)
- og:type — article
Товар
- Фото товара на белом или нейтральном фоне
- og:title — название товара
- og:description — краткое описание, цена
- og:type — product
Лендинг / услуга
- Изображение, отражающее услугу или УТП
- og:title — название услуги
- og:description — призыв к действию
- og:type — website
Инструменты для создания OG-изображений
- Canva — шаблоны 1200×630 для соцсетей
- Figma — кастомный дизайн
- Генераторы превью — автоматическое наложение текста на изображение
Рекомендация: создавайте шаблон с зоной безопасности 1000×500 px в центре — так важная информация не обрежется ни в одной платформе.
Чек-лист перед публикацией
| Проверка | Действие |
|---|---|
| OG-теги на странице | View Source, поиск og: |
| Абсолютный URL изображения | Проверить в коде |
| Размер изображения 1200×630 | Открыть файл |
| Доступность изображения | Открыть URL в браузере |
| Предпросмотр | OG Preview |
| Мета-теги | Проверка мета-тегов |
| Зона безопасности | Ключевые элементы в центре |
| Уникальность для статей | Отдельное превью на каждую статью |
Часто задаваемые вопросы
Почему в Telegram показывается старая картинка?
Telegram кэширует превью надолго. Решения: изменить URL изображения (добавить ?v=2), подождать обновления кэша, в крайнем случае — изменить URL страницы.
Нужны ли отдельные изображения для каждой соцсети?
Обычно достаточно одного 1200×630. Для особых кейсов (например, вертикальный формат для Stories) можно использовать платформо-специфичные теги, но это редко необходимо.
Влияет ли превью на SEO?
Косвенно. Красивое превью повышает кликабельность при шеринге, что может привести к дополнительным ссылкам и упоминаниям. Прямого влияния на ранжирование нет.
Заключение
Красивое превью при шеринге — результат правильной настройки Open Graph. Обязательные теги: og:title, og:description, og:image (абсолютный URL), og:url. Изображение 1200×630 px подходит для всех платформ. Проверяйте результат в OG Preview и проверке мета-тегов. Подробнее о разметке — в руководстве по Open Graph.