Вы публикуете ссылку в мессенджере или соцсети, а превью выглядит криво: вместо картинки — случайный блок с сайта, вместо заголовка — обрывок текста. Мелочь, но именно от неё зависит, кликнут по ссылке или пролистают. Настраивается это разметкой Open Graph, и работы здесь на полчаса для всего сайта.
Как работает превью
Когда ссылка попадает в мессенджер или соцсеть, платформа сама смотрит страницу и собирает карточку: заголовок, описание, картинку. Если в коде есть подсказки — используются они. Если нет, сервис берёт первое, что найдёт: иногда заголовок статьи, иногда картинку из шапки, иногда баннер из подвала. Результат почти всегда так себе.
Отсюда простая логика: то, как выглядит ваша ссылка, определяется тем, что вы указали сами. Разметка Open Graph как раз для этого и придумана.
Минимальный набор тегов
Полного списка тегов много, но для хорошего превью достаточно базового набора. И тут важно не перепутать: заголовок страницы для поиска и заголовок для соцсетей — это разные вещи, и лучше их различать.
- Заголовок: короткий, до 60 знаков, без хвостов вида «| Название компании».
- Описание: одна-две фразы, объясняющие пользу, до 200 знаков.
- Картинка: соотношение 16:9 или близкое, размер от 1200 пикселей по ширине.
- Тип материала: статья, товар, видео — влияет на формат карточки.
- Адрес страницы: канонический, совпадающий с тем, что в адресной строке.
Для полноты картины полезно добавить разметку для карточек товаров и больших картинок у крупных платформ, но это уже второй шаг после базовых тегов.
Картинка: главный источник проблем
Именно из-за неё чаще всего превью получается неудачным. Типовые причины: слишком маленькое изображение, альбомная ориентация не та, картинка в формате, который платформа не показывает, или указан неполный адрес.
- Размер не менее 1200×630 пикселей, с запасом для обрезки.
- Важный объект или текст — в центре: края могут обрезаться.
- Формат jpg или png, без экзотики.
- Адрес полный, с протоколом: относительные обычно не работают.
- Для разных разделов — разные картинки, а не одна на весь сайт.
Важно помнить про ограничения платформ: некоторые из них агрессивно кэшируют картинки. Если вы обновили изображение, а превью осталось старым, поможет принудительное обновление через инструмент платформы. Так же как в работе с изображениями на сайте, здесь важно следить за весом: тяжёлая картинка замедлит загрузку в мессенджере. Общие правила разбирали в статье про оптимизацию изображений.
Как настраивается на сайте
В большинстве систем теги можно прописать один раз в шаблоне, а для карточек, статей и товаров подставлять свои значения автоматически. Если у вас WordPress, внедрять это вручную необязательно — многие SEO-плагины делают это сами, но проверять результат всё равно нужно.
Полезно задуматься о логике: у главной страницы одно превью, у статей — своя картинка, у товаров — фотография продукта, у категорий — изображение раздела. Тогда любая ваша ссылка выглядит осмысленно, а не как случайный набор.
Как проверять
Проверить результат просто: возьмите адрес страницы и посмотрите, как она выглядит в инструментах платформ. Затем отправьте ссылку себе в мессенджер и в отзывах — где-то превью ещё и отличается. Если карточка не собирается, проверьте, видны ли теги в исходном коде и нет ли конфликта между ними.
Частые причины проблем: дублирующая разметка от двух плагинов, теги в теле страницы вместо блока с настройками, несколько разных наборов данных. Один источник правды лучше, чем три конкурирующих.
Разметка и SEO: связь
Open Graph не поднимает позиции напрямую — это не тот инструмент. Но он влияет на кликабельность ссылок, а растущее число переходов и упоминаний косвенно работает на сайт. Особенно там, где люди активно пересылают материалы: в сообществах, чатах, редакциях.
Полезно дополнить разметку структурными данными: они помогают поисковым системам показывать расширенные результаты, а соцсетям — понимать тип материала. Мы разбирали эти темы в материалах про аудит микроразметки и заголовки и описания.
Разные площадки — разные правила
Стандарт один, но каждая платформа добавляет своё. Одни предпочитают крупные карточки с большой картинкой, другие показывают компактное превью сбоку, третьи подтягивают описание из первых абзацев, если оно слишком длинное. Поэтому полезно протестировать свою ссылку в нескольких местах, а не только в одном мессенджере.
- Мессенджеры: важна квадратная совместимость картинки, обрезка идёт по центру.
- Соцсети с лентой: лучше работают крупные изображения с контрастной центральной частью.
- Профессиональные сети: чаще смотрят на заголовок и описание, картинка вторична.
- Почтовые клиенты: некоторые вытягивают превью из картинки в письме, а не из страницы.
Проверка занимает десять минут и снимает вопросы вида «почему у всех нормально, а у нас нет».
Тексты для превью: что писать
Заголовок в превью живёт по законам рекламного текста: короткое обещание пользы. Описание — одна фраза, которая объясняет, что человек получит, если перейдёт. Не стоит вставлять в превью названия разделов и служебные формулировки: они ничего не говорят.
Полезное упражнение: напишите превью для страницы так, будто отправляете ссылку коллеге в мессенджере. Если текст звучит естественно и понятно без контекста — он подойдёт.
Когда превью важнее обычной выдачи
Есть ниши, где большая часть переходов приходит не из поиска, а из пересылок: подборки, новости отрасли, локальные сообщества, профессиональные чаты. В таких проектах превью ссылки — фактически главный элемент витрины, и на его настройку не жалко времени. Заодно стоит посмотреть на структуру ссылок и заголовков, если материалы активно расшаривают — иногда там обнаруживаются дубли, о которых мы писали в разборе аудит дублей и canonical.
Ошибки
- Одинаковая картинка превью для всего сайта.
- Слишком маленькое или квадратное изображение.
- Заголовок с хвостом из названия компании и слоганами.
- Отсутствие описания: платформа подставляет первый абзац.
- Дубли тегов из разных плагинов.
Вывод
Настройка превью — работа на один вечер, которая приносит порядок на годы. Пропишите базовые теги, подготовьте картинки под размер, настройте автоматическую подстановку для основных типов страниц и проверьте результат на нескольких примерах. После этого любая ваша ссылка будет выглядеть так, как вы задумали.