Превью ссылки в мессенджерах

Карточка с картинкой, названием и описанием, которая появляется, когда ссылку на сайт отправляют в Telegram, VK или WhatsApp. Собирается автоматически, картинку и текст можно задать свои.

Когда вы отправляете ссылку на сайт клиенту в Telegram или публикуете её в VK, мессенджер показывает карточку: картинку, название и пару строк описания. Такая ссылка вызывает больше доверия, чем голый адрес.

Как собирается карточка

При каждой публикации Velvio сам добавляет на каждую страницу теги Open Graph:

  • название — заголовок страницы, у внутренних страниц вместе с названием сайта;
  • описание — описание страницы из SEO, а если его нет — первый содержательный абзац;
  • картинка — первая крупная фотография с главной страницы, обычно фото первого экрана;
  • адрес и название сайта — чтобы мессенджер правильно подписал карточку.

Для Telegram, VK, WhatsApp и соцсетей этого достаточно, ничего настраивать не нужно.

Своя картинка и текст

Откройте раздел «SEO» в меню проекта слева, блок «Превью ссылки в мессенджерах». Сверху — карточка, как её покажет мессенджер; она меняется, пока вы правите поля.

  • Картинка. Нажмите «Своя картинка» и выберите файл. Появится рамка 1200×630 — это размер, который мессенджеры показывают без обрезки. Перетащите картинку, чтобы выбрать кадр, ползунком — приблизьте. Нажмите «Готово». Картинка сохранится в разделе «Файлы» проекта. «Вернуть фото с главной» — снова брать первое фото главной страницы.
  • Название. До 60 символов — длиннее мессенджер обрежет. Пусто — как заголовок для поиска.
  • Описание. До 155 символов. Пусто — как описание для поиска.

Нажмите «Сохранить», затем обновите публикацию: «Опубликовать» → «Опубликовать заново». Своя картинка ставится на все страницы сайта, название и описание — на главную; у внутренних страниц остаются их собственные.

Проверить перед публикацией

В окне «Опубликовать» под адресом видна карточка «Так ссылка выглядит в мессенджерах», а рядом — ссылка «Настроить», которая ведёт в раздел SEO.

Мессенджеры запоминают превью ссылки. Если после обновления в Telegram осталась старая карточка, отправьте ссылку боту @WebpageBot — он обновит превью.

Советы

  • На картинке не нужен мелкий текст — в ленте он не читается. Лучше крупное фото или логотип на спокойном фоне.
  • Самое важное держите ближе к центру: некоторые мессенджеры показывают карточку квадратной и обрезают края.
  • Для акции можно временно поставить отдельную картинку, а потом вернуть фото с главной.