Не показывается og:image в WhatsApp на Android: решение

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Для корректного отображения миниатюры ссылки в WhatsApp убедитесь, что мета-тег og:image верно настроен:

Мета-тег находится в секции <head> страницы.
Ссылка на изображение в og:image является абсолютным URL.
Размер изображения составляет не менее 300x200 пикселей, при весе файла не более 300 КБ.

Пример:

HTML

Скопировать код

<meta property="og:image" content="https://example.com/image.jpg" />

Для проверки вносимых изменений используйте инструмент Facebook's URL Debugger. Обеспечьте доступность изображение для сервера.

Пройдите тест и узнайте подходит ли вам сфера IT

Пройти тест

Настройки 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 как центральный элемент, что украшает стол перед обедом:

Markdown

Скопировать код

Стол без украшательства:
[ Тарелка 🍽️ | Приборы 🍴 | Салфетка 🍽️ | (Пустое место) ]

Стол с декоративным объектом:
[ Тарелка 🍽️ | Приборы 🍴 | Салфетка 🍽️ | **Ваза с цветами** 🏺]

Мета-тег og:image аналогичен вазе с цветами на вашем веб-столе:

HTML

Скопировать код

<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.

Свежие материалы

Управляющие конструкции в C

30 августа 2024

Верстка сайтов: от простого к сложному

30 августа 2024

Возврат значений из функций в C

30 августа 2024