OG-разметка
Также: open graph, превью ссылки, og:image
Служебные теги, которые определяют, как выглядит ссылка на ваш сайт в мессенджере и соцсети: заголовок, описание и картинка. Без них вместо превью показывается случайный кусок страницы.
Что задаётся
- og:title — заголовок в карточке
- og:description — короткое описание
- og:image — картинка, обычно 1200×630 пикселей
Мессенджеры кэшируют превью надолго: изменив картинку, вы можете ещё несколько дней видеть старую. Это не ошибка сайта — так работает кэш на их стороне.
Требования к картинке
| Параметр | Значение | Зачем |
|---|---|---|
| Размер | 1200×630 | соотношение, которое не обрежется в большинстве мест |
| Вес | до 1 МБ | тяжёлые картинки часть сервисов не подтягивает |
| Формат | JPG или PNG | экзотические форматы поддерживаются не везде |
| Текст на картинке | крупный или никакого | в ленте она размером с ноготь |
Почему это важнее, чем кажется
Ссылку на сайт чаще всего пересылают, а не набирают руками: клиент отправляет её коллеге, знакомый — знакомому, вы сами — в переписке с заказчиком. В этот момент человек видит не ваш сайт, а карточку превью, и по ней решает, открывать ли вообще. Пустая карточка с обрывком меню и логотипом-иконкой выглядит как ссылка на что-то сомнительное.
Отдельный случай — рассылка ссылок в мессенджерах при холодных контактах. Там превью работает как маленькое объявление: заголовок и картинка либо объясняют, что внутри, либо нет. Разница в переходах между аккуратно оформленной ссылкой и голой заметна невооружённым глазом, и это самая дешёвая правка из всех возможных.
Как проверить и обновить превью
- Отправьте ссылку самому себе в мессенджер и посмотрите, что подтянулось.
- Если показалось старое — это кэш на стороне сервиса, он держится долго.
- У части площадок есть отладчик ссылок, который принудительно обновляет превью.
- Крайний способ — добавить к ссылке параметр вида ?v=2: для сервиса это новый адрес.
Частые вопросы
Что будет, если OG-теги не заполнить?
Сервис возьмёт что найдёт: заголовок страницы, первый попавшийся кусок текста и случайное изображение — иногда логотип, иногда иконку интерфейса. Выглядит это обычно плохо и снижает доверие к ссылке.
Нужна ли отдельная картинка для каждой страницы?
Желательно для важных: главной, ключевых услуг, материалов, которыми делятся. Для остальных достаточно одной общей — она всё равно лучше случайного изображения со страницы.
Влияет ли OG-разметка на поиск?
Напрямую нет, она нужна для превью в мессенджерах и соцсетях. Косвенно — да: аккуратное превью получает больше переходов, а переходы по ссылкам с других площадок поисковые системы учитывают.
Почему в разных мессенджерах превью выглядит по-разному?
Каждый сервис по-своему обрезает картинку и укорачивает текст. Поэтому важное на изображении держат по центру, а заголовок делают коротким — так он переживёт любое обрезание.