Часто возникает ситуация, когда есть необходимость добавить изображение на веб-сайт, которое будет отображаться в WhatsApp при отправке ссылки. Например, при разработке лендинга для нового продукта или приложения, хочется, чтобы при отправке ссылки на этот сайт в WhatsApp, отображался не просто текст ссылки, а красивый предпросмотр с изображением.
Как это работает?
WhatsApp автоматически создает предпросмотр ссылки, извлекая информацию прямо из HTML-кода страницы. Для выбора картинки, WhatsApp руководствуется определенным набором правил, но в первую очередь он ищет теги meta с определенными свойствами в head секции HTML-кода страницы.
Подготовка изображения для предпросмотра
Для того чтобы задать изображение для предпросмотра в WhatsApp, необходимо добавить следующий HTML код в секцию head вашей страницы:
<meta property="og:title" content="Название вашего сайта или страницы" />
<meta property="og:description" content="Краткое описание вашего сайта или страницы" />
<meta property="og:image" content="URL вашего изображения" />
Здесь og:title, og:description и og:image это так называемые Open Graph теги, которые используются социальными сетями для построения предпросмотра ссылки.
Важные замечания
-
Изображение должно быть доступно по прямой ссылке. Это значит, что изображение должно быть размещено на том же домене, что и ваш сайт, или на сервисе хостинга изображений.
-
Не все изображения могут быть использованы для предпросмотра. WhatsApp не поддерживает изображения с прогрессивным JPEG кодированием. Важно удостовериться, что изображение сохранено в базовом (baseline) формате JPEG.
-
Размер изображения должен быть не меньше 300×200 пикселей. В противном случае, WhatsApp может не отобразить его в предпросмотре.
-
Изменения в коде страницы могут не отразиться сразу. WhatsApp кэширует информацию о ссылках, поэтому если вы внесли изменения в
metaтеги, они могут не отобразиться сразу. В этом случае стоит подождать некоторое время или использовать специальные инструменты для очистки кэша WhatsApp.
Добавить комментарий