Как задать фото, которое подтягивается при вставке УРЛ?

Для любого владельца сайта не секрет, что не только пользователи взаимодействуют с ним, но и неодушевленные системы - другие сайты, поисковые системы и т.д. Несмотря на это, в конечном итоге информацию с вашего сайта все равно получают живые люди, пусть даже и через посредников. Фотографии - не исключение! О том, как их грамотно задавать - в этой статье на Thumber.ru.

Теги:

фото-превью, вставка УРЛ, публикация, предпросмотр УРЛ

Публикация и вид фотографии (картинки) в большинстве случаев

Один из таких сценариев - это отправка ссылки на любую страницу сайта своему другу в мессенджере или соцсети. Что при этом видит получатель ссылки кроме нее самой? Например, современные мессенджеры устроены таким образом, что в момент отправки ссылки они пытаются ее "распарсить", т.е. зайти на эту страницу (в качестве упомянутого посредника) и "вытащить" оттуда изображение-превью и какой-то главный текст, описывающий суть этой страницы. Как только эти данные получены, они будут отображены в мессенджере вместе со ссылкой. Вот, как это выглядит на примере известных сайтов:

Пример предпросмотра статьи на сайте habr
Пример предпросмотра отеля на сайте booking

Давайте рассмотрим их немного подробнее. Текст есть на любой странице и, скорее всего, в процессе парсинга точно что-то возьмется оттуда, чтобы показать нам. Но как парсеры поступают с изображением превью? Здесь процедура всегда одинаковая сначала и различная в конце. Первым этапом парсер ищет специальный meta-тег со свойством og:image, в значении которого будет стоять полный URL, соответствующий тумбе-превью страницы. Если такого тега нет, то скорее всего будет составлен список всех более или менее больших (по ширине) изображений на странице и взято первое из них.

Поэтому, чтобы точно быть уверенным, какое изображение увидит получатель ссылки, нужно обязательно прописать мета тег og:image, указав в качестве его атрибута property полный адрес (URL) файла на сайте.

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

И вот почему: обычное изображение не может раскрыть суть страницы, хотя и способно отразить смысл содержимого. Пользователи хотят получать полную информацию в максимально сжатом виде. Парадокс, да? Но выход есть!

Способ изменить дизайн фото (предпросмотра) при вставке URL

Как можно улучшить тумбу (картинку) предпросмотра для страниц сайта? Как можно брендировать это изображение? Достаточно несколько шагов - наложить логотип вашего сайта на картинку и написать заголовочный текст со страницы крупным шрифтом прямо на той же картинке. Конечно, оформить это красиво с помощью разных шрифтов, цветов, расположения. Тем самым получим некую "визитку" для страницы, которая еще вдобавок повышает узнаваемость сайта. Ведь увидев знакомый логотип при получении ссылки, желание открыть ее возрастает в разы.

Пример информационной тумбы-превью на сайте meduza
Пример информационной тумбы-превью на сайте rabota.ru
И самое главное - теперь есть легкий способ получить уникальное изображение-превью для каждой страницы вашего сайта через сервис Thumber.ru, чтобы повысить конверсию отправляемых ссылок в открытые!

В его рамках создан широко-функциональный конструктор, с помощью которого можно выбрать шаблон для создания тумбы-превью, настроить различные параметры оформления текстов, указать ссылку на логотип и затем установить выданный HTML-код на страницы сайта. Готово! Когда кто-то отправит ссылку на ваш сайт, мессенджер или социальная сеть найдет meta-тег og:image, возьмет оттуда специальную ссылку на сервис Thumber.ru, и изображение будет сгенерировано и отображено.

Простая регистрация - и лояльность клиентов к вашему бизнесу повышена, а узнаваемость бренда растет с каждым днем!