Не показывается og:image в WhatsApp на Android: решение
Быстрый ответ
Для корректного отображения миниатюры ссылки в WhatsApp убедитесь, что мета-тег og:image
верно настроен:
- Мета-тег находится в секции
<head>
страницы. - Ссылка на изображение в
og:image
является абсолютным URL. - Размер изображения составляет не менее 300x200 пикселей, при весе файла не более 300 КБ.
Пример:
<meta property="og:image" content="https://example.com/image.jpg" />
Для проверки вносимых изменений используйте инструмент Facebook's URL Debugger. Обеспечьте доступность изображение для сервера.
Настройки Open Graph и обмен ссылками в WhatsApp
WhatsApp основывается на тегах Open Graph (OG) для создания превью ссылок. Но правильное отображение миниатюры требует соблюдения следующих условий:
- Размер изображения: для быстрой загрузки WhatsApp рекомендуется использовать изображения размером 300x200 пикселей и весом до 300 КБ.
Указание размера изображения: теги
og:image:width
иog:image:height
исключают проблемы с неправильным обрезанием изображений.HTMLСкопировать код<meta property="og:image:width" content="300" /> <meta property="og:image:height" content="200" />
Использование защищённых URL: при использовании протокола HTTPS актуален тег
og:image:secure_url
.HTMLСкопировать код<meta property="og:image:secure_url" content="https://example.com/image.jpg" />
Определение дополнительных данных: теги
og:site_name
,og:type
иog:updated_time
способствуют улучшению визуализации и функциональности веб-сайта.HTMLСкопировать код<meta property="og:site_name" content="Example Website" /> <meta property="og:type" content="website" /> <meta property="og:updated_time" content="2023-04-01T20:00:00+0000" />
Проверка изменений: все внесённые изменения следует проверять через Facebook Debugger. Для обновления метаданных может понадобиться перезагрузка WhatsApp.
Интеграция с Schema.org для улучшения SEO
Интегрирование с Schema.org может придать более высокую ценность вашему og:image
:
Разместите OG мета-теги в секции
<head>
.HTMLСкопировать код<meta property="og:image" content="https://example.com/image.jpg" />
В
<body>
используйте элемент с схемойThumbnail
иitemprop="thumbnailUrl"
.HTMLСкопировать код<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> <link itemprop="url" href="https://example.com/image.jpg"> </span>
Структурированная разметка данных позволяет более точно передавать информацию о контенте веб-сайта поисковым системам и платформам обмена сообщениями.
Визуализация
Можно рассматривать og:image
как центральный элемент, что украшает стол перед обедом:
Стол без украшательства:
[ Тарелка 🍽️ | Приборы 🍴 | Салфетка 🍽️ | (Пустое место) ]
Стол с декоративным объектом:
[ Тарелка 🍽️ | Приборы 🍴 | Салфетка 🍽️ | **Ваза с цветами** 🏺]
Мета-тег og:image
аналогичен вазе с цветами на вашем веб-столе:
<meta property="og:image" content="URL_of_the_Floral_Vase.jpg" />
Точно так же, как ваза привлекает внимание к столу, og:image
гарантирует, что превью ссылки в WhatsApp будет отображать выбранное вами изображение.
Для продвинутых: og:image для обеспечения широкой совместимости в социальных сетях
Настройте og:image
таким образом, чтобы изображение идеально отображалось в WhatsApp и других социальных сетях:
Адаптация к разнообразным платформам: выбирайте размеры
og:image
исходя из особенностей разных устройств и платформ.HTMLСкопировать код<meta property="og:image" content="https://example.com/happy-cat-300x200.jpg" /> <meta property="og:image:alt" content="Счастливая кошка" />
Детализирование: добавьте мета-теги для MS Tile для обеспечения полной функциональности.
HTMLСкопировать код<meta name="msapplication-TileImage" content="https://example.com/happy-cat-tile.jpg" />
Устранение несоответствий: учтите различное отображение изображений в WhatsApp на Android и на других платформах, проверив разметку на разных устройствах.
Полезные материалы
- Протокол Open Graph — подробное руководство по использованию тега
<meta>
и og:image. - Sharing Debugger – Meta for Developers — инструмент Facebook для проверки Open Graph.
- Введение в работу со структурированными данными — основы взаимодействия поисковых ботов с тегами
<meta>
и структурированными данными. <meta>: Элемент метаданных
— детальный обзор HTML мета-тегов от MDN Web Docs.- Сервис проверки разметки W3C — валидация HTML и корректность Open Graph.
- Необходимые мета-теги для социальных сетей — руководство CSS-Tricks по созданию оптимальных og:image.
- Типы медиа — стандартные определения Content-Type, необходимые для og:image.