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

Поиск картинки, если она не указана в вёрстке страницы явно, ложится на алгоритмы самого мессенджера. Часто так получается, что мессенджер берёт самое первое изображение, которое встретилось в коде страницы. И, увы, не всегда это именно то изображение, которое подходит к сайту.

В данной статье рассматривается, как поставить логотип сайта (эмблему учреждения) или любое другое изображение, чтобы оно использовалось в подобных представлениях ссылки. Рассмотрим, как это сделать, на примере Шаблона 2.

Весь ход работ можно разбить на 3-4 этапа.

Этап 1. Получение адреса нужного изображения.

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

Перейдите в раздел "Дизайн", выберите в левой панели пункт "Изображения", а затем откройте необходимое изображение из списка (если такого нет - сначала загрузите его) для просмотра его свойств.

В этом окне нас интересует адрес изображения: следует выделить его и скопировать в буфер обмена - этот адрес понадобится нам на этапе 2.

В Шаблоне 2 для этих целей подойдёт изображение "logo1.png":

Этап 2а. Исправление кода:

В Админке вашего сайта выберите вкладку Дизайн и в ней перейти в категорию Модули, выберите пункт Текстовый блок, в отобразившемся списке модулей найдите модуль Превью сайта для мессенджеров и соц сетей (или похожий по названию, содержащий похожие по смыслу слова):

Дважды щелкните по названию данного модуля и выберите пункт Формат вывода в появившемся окне редактирования данного модуля. Справа в поле редактирования выделите путь к файлу в двойных кавычках:

<meta property="og:image" content="/files/template2/img/logo1.png" />

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

ВНИМАНИЕ! 

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

Этап 2б. Подготовка кода:

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

<meta property="og:image" content="{URL}" />

где {URL} следует заменить на адрес нужного изображения, который был получен на этапе 1.

Для удобства скопируйте полученный код в буфер обмена.

Этап 3. Вставка кода в макет.

Перейдите в раздел "Дизайн", выберите в левом меню пункт "Обычные" подраздела "Макеты" и откройте использующийся макет на редактирование. Перейдите на вкладку "HEAD".

В Шаблоне 2 первым будет макет "Главная страница":

Здесь в редакторе HTML необходимо из буфера обмена вставить строку, сформированную на этапе 2.

Рекомендуем сделать это после тега "<title>...</title>" и на новой строке (для удобочитаемости), как показано на скриншоте выше.

Нажмите "Сохранить и выйти".

Этап 4. Обновление остальных макетов.

Просто повторите действия этапа 3 для остальных использующихся макетов.

Готово!

Теперь, когда кто-то будет делиться ссылкой в мессенджере, у ссылки будет заданное нами изображение, и выглядеть это может как-нибудь так: