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

Пройдите тест, узнайте какой профессии подходите

Сколько вам лет

До 18

От 18 до 24

От 25 до 34

От 35 до 44

От 45 до 49

От 50 до 54

Больше 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. Обеспечьте доступность изображение для сервера.

Настройки 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.

Проверь как ты усвоил материалы статьи

Пройди тест и узнай насколько ты лучше других читателей

Какой минимальный размер изображения для мета-тега og:image для корректного отображения в WhatsApp?

1 / 5

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

Проверка юзабилити сайта: пошаговое руководство

6 сентября 2024

История и развитие HTTP и HTTPS

6 сентября 2024

Что такое HTTP и HTTPS?

6 сентября 2024

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

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

Настройки Open Graph и обмен ссылками в WhatsApp

Интеграция с Schema.org для улучшения SEO

Визуализация

Для продвинутых: og:image для обеспечения широкой совместимости в социальных сетях

Полезные материалы

Загрузка...