Ссылка на сайт в мессенджерах без картинки: как настроить OpenGraph
Что это значит
Когда ссылку на сайт отправляют в Telegram, WhatsApp, Viber или VK, мессенджер показывает карточку: заголовок, пару строк описания и картинку. Эти данные он берёт из специальных тегов OpenGraph (og:title, og:description, og:image). На главной их нет совсем или не хватает части.
- Нет разметки для соцсетей и мессенджеров (OpenGraph). Когда ссылку на сайт отправляют в Telegram, WhatsApp, Viber или VK, мессенджер показывает карточку: заголовок, пару строк описания и картинку. Эти данные он берёт из специальных тегов OpenGraph (
og:title,og:description,og:image). На главной их нет совсем или не хватает части. - Картинка для соцсетей (og:image) не открывается или не подходит. В теге
og:imageуказана картинка, но она не открывается, это не картинка, адрес записан не полностью или картинка слишком маленькая. - Теги для соцсетей (OpenGraph) указаны дважды. Одни и те же теги OpenGraph на главной указаны несколько раз с разными значениями.
Чем мешает
Без них мессенджер соберёт карточку из случайного текста страницы, возьмёт неподходящую картинку или покажет голую ссылку. По такой ссылке реже нажимают.
Как исправить
WordPress
- Yoast SEO: в настройках «Yoast SEO → Настройки → Соцсети» включите OpenGraph, а в блоке Yoast под текстом страницы на вкладке «Соцсети» задайте заголовок, описание и картинку.
- Rank Math: в редакторе сниппета страницы откройте вкладку «Соцсети» и заполните заголовок, описание и картинку.
- Загрузите картинку 1200×630 пикселей в медиатеку и выберите её в блоке Yoast или Rank Math на вкладке «Соцсети».
- Оставьте один источник тегов: если OpenGraph выводит Yoast или Rank Math, отключите вывод в настройках темы (или наоборот).
Tilda
- В настройках страницы есть раздел для соцсетей: задайте там заголовок, описание и картинку для превью ссылки. Опубликуйте страницу после правки.
- Загрузите картинку 1200×630 пикселей в настройках страницы в разделе для соцсетей и опубликуйте страницу.
- Если вы добавили свои теги og: в код страницы, удалите их: Tilda выводит OpenGraph сама из настроек страницы.
1С-Битрикс
- Теги OpenGraph выводит шаблон сайта: в готовых решениях (Аспро и др.) они обычно включаются в настройках решения. Иначе их добавляет разработчик в
header.php. - Проверьте адрес картинки в шаблоне или в настройках решения: он должен быть полным (с
https://) и открываться в браузере. - Проверьте, не выводят ли теги одновременно шаблон и компонент или модуль решения. Нужен разработчик.
OpenCart
- В стандартной теме OpenGraph нет: поставьте модуль OpenGraph из маркетплейса или попросите разработчика добавить теги в
header.twig. - Проверьте настройки модуля OpenGraph: картинка должна быть полным адресом и открываться в браузере.
- Проверьте, не дублирует ли модуль OpenGraph теги из шаблона
header.twig.
Другой движок или свой сервер
- Добавьте в
<head>главной тегиog:title,og:description,og:image(полный адрес картинки),og:urlиog:type. - Укажите в
og:imageполный адрес (https://…) рабочей картинки JPG или PNG от 200×200, лучше 1200×630 пикселей. - Оставьте в
<head>по одному тегуog:title,og:description,og:urlиog:type.
Пример кода
Замените example.by на адрес своего сайта.
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.by/">
<meta property="og:title" content="Название компании — чем вы занимаетесь">
<meta property="og:description" content="Одно-два предложения о том, что вы предлагаете.">
<meta property="og:image" content="https://example.by/og-image.jpg">Если сайт делал подрядчик
Перешлите ему ссылку на отчёт и эту просьбу:
Настройте, пожалуйста, на главной один комплект тегов OpenGraph:og:title,og:descriptionиog:imageс рабочей картинкой 1200×630.
Как проверить, что всё исправлено
Отправьте ссылку на сайт себе в Telegram: карточка должна показать нужный заголовок и картинку. Telegram кэширует карточки, свежий вариант можно получить через бота @WebpageBot. Проверьте сайт снова на yasnoseo.by.