Превью сайта при отправке ссылки в Телеграм, ВКонтакте и мессенджеры

Ситуация, знакомая почти каждому владельцу сайта. Менеджер отправляет клиенту ссылку на страницу услуги в Телеграм — и вместо аккуратной карточки с картинкой и заголовком появляется голый адрес или серый прямоугольник с непонятным текстом. Или того хуже: подтягивается логотип с прошлого сайта и заголовок «Главная страница».

Мелочь? Не совсем. Ссылками сегодня обмениваются постоянно: менеджеры отправляют клиентам, клиенты пересылают коллегам и родственникам, сотрудники кидают в рабочие чаты, довольные заказчики советуют знакомых в переписке. Каждая такая пересылка — потенциальное обращение. И то, как выглядит ссылка, напрямую влияет на то, откроют её или пролистают.

Разберём, откуда берётся превью, почему оно ломается и как настроить его один раз для всего сайта.

Откуда мессенджер берёт картинку и текст

Когда вы отправляете ссылку, приложение обращается к странице и ищет в её невидимой служебной части специальные подсказки: какую картинку показать, какой заголовок, какое короткое описание, как называется сайт. Это отдельный набор данных, который добавляется в код страницы и не виден посетителю.

Если этих подсказок нет, приложение пытается угадать: берёт заголовок из обычного заголовка страницы, описание — из служебного описания, а картинку — какую найдёт первой, часто это логотип или вообще случайное изображение из вёрстки. Результат непредсказуем.

Важный момент: разные сервисы читают эти подсказки по-разному. Телеграм, ВКонтакте, Одноклассники, почтовые программы, рабочие мессенджеры — у каждого свои особенности. Но базовый набор один и тот же, и если он заполнен правильно, везде будет прилично.

Что должно быть настроено

Заголовок. Тот, который увидит человек в карточке. Он не обязан совпадать с заголовком страницы для поиска — здесь важнее человечность и краткость. Длинный заголовок обрежется, поэтому укладывайтесь примерно в шестьдесят-семьдесят знаков.

Описание. Две-три строки, которые объясняют, что внутри. Здесь работает та же логика, что и с текстом на кнопке: конкретика лучше общих слов. «Расчёт стоимости и сроки монтажа вентиляции в квартире» лучше, чем «Услуги нашей компании».

Картинка. Самая важная часть — именно она определяет, заметят ссылку в ленте сообщений или нет. Требования: горизонтальная, достаточно крупная (примерно 1200 на 630 точек — универсальный размер), не слишком тяжёлая, с крупными деталями. Мелкий текст на превью нечитаем.

Название сайта. Показывается мелким шрифтом над или под заголовком. Должно быть человеческим названием компании, а не адресом.

Адрес страницы в каноническом виде. Чтобы карточка не менялась в зависимости от того, с какими метками пришла ссылка.

Типичные поломки и их причины

Картинки нет вообще. Подсказки не заполнены, а на странице нет ни одного подходящего изображения — например, все картинки подгружаются скриптом при прокрутке. Приложение приходит, ничего не находит и показывает пустоту.

Подтягивается логотип вместо картинки статьи. Указана одна общая картинка на весь сайт. Работает, но скучно: все ссылки выглядят одинаково.

Показывается старая картинка. Самая частая жалоба. Причина — кеширование: сервис один раз запросил страницу, сохранил результат и больше не перезапрашивает. Даже если вы всё исправили, в переписке будет висеть старое. Решение — либо принудительно обновить через инструмент отладки соответствующего сервиса, либо изменить адрес страницы, либо подождать (срок кеша разный, от часов до нескольких недель).

Заголовок «Главная» на всех страницах. Признак того, что заголовок задан один раз в шаблоне и не подставляется для каждой страницы.

Картинка обрезается неудачно. Разные сервисы кадрируют по-разному. Если важный объект у самого края, его срежет. Держите главное в центре.

Вертикальная картинка. Превращается в узкую полоску или обрезается до неузнаваемости.

Слишком тяжёлое изображение. Некоторые сервисы просто не грузят картинки больше определённого размера — получается карточка без изображения.

Картинка недоступна. Указан адрес изображения, которого нет, или он ведёт на защищённый раздел. Проверяется просто: откройте адрес картинки в браузере напрямую.

Смешанный протокол. Сайт защищённый, а картинка указана по незащищённому адресу — часть сервисов её не возьмёт.

Как настроить один раз на весь сайт

Правильный подход — не проставлять данные вручную на каждой странице, а настроить автоматическую подстановку в шаблоне.

Логика такая:

Заголовок берётся из названия страницы или элемента.

Описание — из краткого описания, а если его нет — из первых предложений текста.

Картинка — из главного изображения элемента, а если его нет — из общей картинки-заглушки для этого раздела.

Название сайта — постоянное значение.

В ХостСМС это делается на уровне шаблона: в шапку добавляются нужные служебные строки, а значения подставляются из полей информационного элемента — названия, описания и большого изображения. После этого каждая новая статья, услуга или товар автоматически получает корректное превью без ручной работы. Один раз настроили — работает для всего, что будет добавлено потом.

Важная деталь: путь к картинке должен быть полным, с указанием протокола и домена. Относительный путь часть сервисов не понимает.

Разные картинки для разных разделов

Если делать по уму, у каждого типа страниц своё изображение.

Статьи и новости — своя иллюстрация к каждой записи. Это как раз тот случай, когда картинка есть и её надо просто использовать.

Страницы услуг — картинка, отражающая услугу. Можно сделать простые заготовки: фоновое изображение плюс название услуги крупным шрифтом.

Товары — фотография товара.

Главная и разделы без своей картинки — общая заготовка с логотипом, названием компании и коротким описанием того, чем занимаетесь.

Отдельный приём, который хорошо работает для коммерческих страниц: сделать заготовку, на которой крупно написано главное — например, «Монтаж вентиляции. Бесплатный замер» и телефон. Такая карточка в переписке работает почти как визитка.

Как проверить, что получилось

Самый простой способ — отправить ссылку самому себе. Создайте в мессенджере переписку с собой и киньте туда ссылки на главную, на страницу услуги, на статью, на товар. Сразу видно, что не так.

Проверьте несколько сервисов. Телеграм, ВКонтакте, рабочий мессенджер, почта. Поведение отличается.

Проверьте на телефоне. Карточка на телефоне выглядит иначе, чем на компьютере.

Проверьте после изменений. Помните про кеш: если превью уже показывалось, оно может не обновиться сразу. У большинства сервисов есть инструмент отладки, который позволяет принудительно перезапросить страницу.

Проверьте страницы всех типов. Часто главная настроена, а карточки товаров — нет.

Проверьте после переезда или редизайна. Это первое, что ломается и последнее, что замечают.

Почему это влияет на обращения

Механика простая и легко проверяется.

Ссылка с картинкой заметнее. В потоке сообщений карточка с изображением останавливает взгляд, голый адрес — нет.

Ссылка с картинкой выглядит надёжнее. Адрес без превью в переписке подсознательно воспринимается как подозрительный — люди привыкли, что так выглядят сомнительные рассылки. Часть получателей просто не откроет.

Ссылка с описанием объясняет, что внутри. Человек понимает, стоит ли переходить, ещё до перехода.

Пересылают чаще. Красивая карточка охотнее уходит дальше по цепочке — коллегам, супругу, в чат дома. А это бесплатное распространение.

Менеджерам проще работать. Отправить ссылку, которая выглядит как карточка товара с ценой, гораздо эффективнее, чем описывать словами.

Отдельная история — чаты жилых домов и посёлков. Там люди постоянно советуют друг другу исполнителей и кидают ссылки. Карточка с понятной картинкой и заголовком в таком чате работает как реклама, которую разместили не вы.

Как сделать картинки для превью без дизайнера

Отдельная практическая задача: где взять изображения нужного формата, если их нет.

Заготовка-шаблон. Сделайте один макет размером 1200 на 630 точек: фон в фирменных цветах, логотип в углу, место под крупную надпись. Дальше под каждый раздел меняется только надпись. Такой шаблон делается за час и потом используется годами. Собрать его можно в любом простом графическом редакторе, специальных навыков не требуется.

Фотография с плашкой. Берётся реальная фотография работы, сверху накладывается полупрозрачная плашка с названием услуги и телефоном. Выглядит живо и информативно.

Кадрирование существующих снимков. Если у вас есть фотографии объектов, их можно обрезать под нужное соотношение. Главное — следить, чтобы при обрезке не потерялось важное.

Чего избегать. Мелкого текста (в карточке он превратится в кашу), важных деталей по краям (обрежутся), тёмных изображений без контраста (сольются с фоном переписки), картинок с большим количеством мелких элементов.

Проверка размера. Файл стоит держать в пределах нескольких сотен килобайт. Слишком тяжёлое изображение часть сервисов не загрузит, и карточка окажется без картинки.

Единый стиль. Когда все превью выполнены в одной манере, ссылки на ваш сайт становятся узнаваемыми — человек видит карточку и понимает, от кого она, ещё до прочтения заголовка.

Как это связано с продвижением 3 в 1

Поиск. Служебные данные для превью частично пересекаются с тем, что видит поиск: заголовок и описание. Аккуратно заполненные, они улучшают и вид ссылки в мессенджере, и внешний вид страницы в результатах поиска — то есть влияют на то, выберут вашу страницу или соседнюю. Отдельно про нейропоиск: он опирается на структурированные сведения о странице и о компании. Чем аккуратнее размечена страница — заголовок, описание, изображение, название организации, — тем проще системе понять, о чём она и кому принадлежит.

Яндекс.Справочник. Ссылка на сайт из карточки Яндекс Бизнеса — один из путей, по которым люди попадают на сайт. Но важнее другое: карточка сама по себе является «превью компании» в картах, и она должна быть согласована с сайтом. Название, описание, фотографии, телефон — везде одинаковые. Когда человек видит одну и ту же картинку и одно и то же описание в карточке, в мессенджере и на сайте, компания воспринимается как цельная и надёжная.

2ГИС. Здесь есть практический момент: карточками из 2ГИС активно делятся в переписке — «вот эта компания, посмотри». И карточка, и сайт должны выглядеть одинаково узнаваемо. Если по ссылке из 2ГИС человек попадает на сайт, который выглядит совсем иначе и называется по-другому, доверие теряется.

Общий смысл в том, что превью — это лицо сайта в переписке, а переписка сегодня один из главных способов передачи рекомендаций. Рекомендации — самый дешёвый источник обращений, и терять их из-за ненастроенной служебной строки в коде обидно.

Дополнительные мелочи, которые стоит настроить

Значок сайта во вкладке браузера. Мелочь, но сайт без него выглядит недоделанным. Он же показывается в закладках и в истории.

Значок для добавления на главный экран телефона. Если человек сохранил ваш сайт на экран, там должна быть нормальная иконка с названием, а не серый квадрат.

Название сайта во вкладке. Не «Главная», а «Название компании — чем занимаетесь». Человек с двадцатью открытыми вкладками должен вас найти.

Правильное отображение в почтовых рассылках. Если делаете рассылку, ссылки в письме тоже часто разворачиваются в карточку.

Всё это делается один раз при настройке шаблона и потом работает само.

Итог

Превью ссылки — незаметная деталь, которая работает каждый раз, когда кто-то кому-то отправляет ссылку на ваш сайт. Настраивается за один раз на уровне шаблона, ломается при переездах и редизайнах, проверяется отправкой ссылки самому себе в мессенджер.

Стоит это немного, а влияет на переходы, на доверие и особенно на распространение рекомендаций — самый выгодный источник обращений, который вообще бывает.

Если не уверены, как ваш сайт выглядит при пересылке ссылок, специалисты компании «Сайты Профессионально» проверят это бесплатно вместе с общей диагностикой: посмотрим превью для всех типов страниц, проверим значки, заголовки, скорость загрузки и другие технические мелочи, из-за которых теряются посетители и обращения. По итогам дадим понятный список того, что стоит поправить. Обращайтесь — проверка ни к чему вас не обязывает.