Загрузка...
Загрузка...
Нашли баг, сбой или ошибку в работе reChecker? Есть предложение по улучшению? Напишите нам, чтобы мы проверили и исправили проблему в сервисе.
Пошаговое руководство по настройке превью ссылок в VK, Telegram, Facebook и других соцсетях. Open Graph, размеры изображений, решение типичных проблем.
Быстрые определения и связанные понятия из SEO-глоссария reChecker.
Мета-теги — HTML-элементы в секции head, передающие информацию о странице поисковикам и браузерам. Узнайте какие мета-теги важны для SEO.
Читать в глоссарии →Meta description — краткое описание страницы в результатах поиска. Не влияет на позиции напрямую, но повышает CTR при правильном написании.
Читать в глоссарии →Open Graph — протокол разметки страниц для красивого превью при репосте в соцсетях. Узнайте какие og-теги нужны и как их настроить правильно.
Читать в глоссарии →Alt текст (атрибут alt) — текстовое описание изображения для поисковиков и экранных читалок. Влияет на SEO изображений и доступность сайта.
Читать в глоссарии →Руководство по мониторингу упоминаний бренда в новостях. Google News, настройка оповещений, анализ тональности, PR-стратегия.
SEOЧто такое content gap анализ, как находить темы которые освещают конкуренты, но не вы, и как использовать эти данные для роста органического трафика.
SEOПолное руководство по сбору семантического ядра: кластеризация, частотность, инструменты автоматизации. Как построить структуру сайта на основе ключевых запросов.
SEOРуководство по написанию alt-тегов для изображений: правила, примеры, типичные ошибки. Влияние на SEO и доступность.
Поделитесь с коллегами или изучите другие материалы блога
При публикации ссылки в соцсети платформа формирует карточку: заголовок, описание и изображение. Если разметка настроена неправильно, превью может быть некрасивым, обрезанным или вовсе отсутствовать. В этой статье — как настроить превью так, чтобы ссылки выглядели профессионально в любой соцсети.
При добавлении ссылки платформа:
Без OG вы не контролируете процесс. Платформа может взять логотип вместо релевантной картинки, обрезать заголовок или показать техническое описание.
Добавьте в <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.
?v=2)Для 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 }}">
Для статей — уникальное изображение на каждую публикацию. Для товаров — фото товара. Для главной — общее превью сайта.
Соцсети кэшируют превью. Решения:
Это нормально. У каждой платформы свои пропорции и лимиты. Универсальный размер 1200×630 минимизирует искажения.
Рекомендация: создавайте шаблон с зоной безопасности 1000×500 px в центре — так важная информация не обрежется ни в одной платформе.
| Проверка | Действие |
|---|---|
| OG-теги на странице | View Source, поиск og: |
| Абсолютный URL изображения | Проверить в коде |
| Размер изображения 1200×630 | Открыть файл |
| Доступность изображения | Открыть URL в браузере |
| Предпросмотр | OG Preview |
| Мета-теги | Проверка мета-тегов |
| Зона безопасности | Ключевые элементы в центре |
| Уникальность для статей | Отдельное превью на каждую статью |
Telegram кэширует превью надолго. Решения: изменить URL изображения (добавить ?v=2), подождать обновления кэша, в крайнем случае — изменить URL страницы.
Обычно достаточно одного 1200×630. Для особых кейсов (например, вертикальный формат для Stories) можно использовать платформо-специфичные теги, но это редко необходимо.
Косвенно. Красивое превью повышает кликабельность при шеринге, что может привести к дополнительным ссылкам и упоминаниям. Прямого влияния на ранжирование нет.
Красивое превью при шеринге — результат правильной настройки Open Graph. Обязательные теги: og:title, og:description, og:image (абсолютный URL), og:url. Изображение 1200×630 px подходит для всех платформ. Проверяйте результат в OG Preview и проверке мета-тегов. Подробнее о разметке — в руководстве по Open Graph.