Отображение эскиза ссылки в WhatsApp || og: метатег изображения не работает

94

Пытался ответить на этот вопрос: предоставьте изображение для обмена ссылками в WhatsApp

введите описание изображения здесь

Я создал простую веб-страницу HTML с основными метатегами Facebook:

<!--FACEBOOK-->
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta property="og:description" content="Programa de fiestas />
<meta property="og:image" content="http://pollosweb.wesped.es/programa_pollos/play.png" />        

Линтер Facebook проверяет правильность, и в Facebook он показывает отлично, но когда я пытаюсь поделиться с WhatsApp, изображение не отображается.

Пробую в WhatsApp на Android

Это URL-адрес образца веб-страницы

JesuLopez
источник
Странно ... изображения og: должно хватить. Я попытался поделиться ссылкой на YouTube, и я правильно вижу миниатюру в моем чате. Я попытался узнать, использует ли Youtube больше метатегов, но ничего особенного не обнаружил .... столкнулись ли мы с проблемой кеширования?
cs.edoardo
извините, но вы уверены, что это вообще возможно? Вы видели это где-нибудь раньше? у вас есть какая-то ссылка, по которой есть большой палец на WhatsApp?
ProllyGeek
можно увеличить высоту и ширину картинки ???? в Whatsapp
Чандреш 08
Я использовал тот же тег, что он не работает, пожалуйста, обратитесь к stackoverflow.com/questions/47236739/…
vinox
Могу ли я ссылаться на изображение без какого-либо HTTP-вызова, как в content="./images/logo.png"?
TMOTTM 01

Ответы:

102

Я верю, что вам нужно добавить itempropв og:imageметатег, установить размер изображения, 256x256а также не помешает добавить свойства site_name, typeи updated_time:)

<meta property="og:site_name" content="San Roque 2014 Pollos">
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta property="og:description" content="Programa de fiestas" />
<meta property="og:image" itemprop="image" content="http://pollosweb.wesped.es/programa_pollos/play.png">
<meta property="og:type" content="website" />
<meta property="og:updated_time" content="1440432930" />

Вы можете увидеть эти метатеги в действии, например, на Google Maps .
После того, как вы изменили свои метатеги, вам может потребоваться некоторое время, чтобы обновить возможные кеши.

Вы можете отлаживать / проверять метатеги Open Graph из отладчика Facebook.
Если вы видите там все свои теги, значит, сайты / приложения, где ваши теги не отображаются должным образом, могут иметь другие требования к тегам Open Graph.

РЕДАКТИРОВАТЬ:
если вы собираетесь указать изображение по HTTP-Secureссылке, вам нужно использовать og:image:secure_urlвместо og:image.

EDIT2:
вам также необходимо указать, og:typeпоскольку это один из четырех основных требуемых параметров.
<meta property="og:type" content="website" />должен направить вас в правильном направлении.

Неизвестно
источник
Это может быть связано с тем, что изображение недоступно в вашем первом из двух метатегов с itemprop="image". Сообщение об ошибке:Cannot GET /logos/logo_512.png
Неизвестно
4
Кроме того, если вы собираетесь использовать ссылки secure-http на изображение, которое вам нужно использовать property="og:image:secure_url"вместоproperty="og:image"
Неизвестно
Спасибо за ваше время. Я внес изменения. Но все равно не повезло. :(
Ахил Сехаран
Ссылка на YouTube ведет к видео, где показывают, как создать плоский значок в Illustrator?
Неизвестный
Извините за двусмысленность. Когда мы отправляем эту ссылку через WhatsApp, рядом с сообщением появляется миниатюра видео, как показано в этом вопросе
Ахил Сехаран
29

У меня была такая же проблема, и проблема заключалась в размере изображения. Whatsapp не поддерживает изображения размером более 300 КБ.

Итак, самое важное свойство для отображения изображения в Whatsapp:

<meta property="og:image" content="url_image">

И размер изображения для отображения не должен превышать 300 КБ.

Cedriga
источник
dev.dubairent.com/property/… не работает в моем случае
Джитендра Панчоли
11

Я тоже сталкиваюсь с этой проблемой. Наконец, я ее решил.

<meta property="og:image" itemprop="image" content="http://yourdomain.com/yourfolder/imagename.png" />

Мое свойство изображения

  1. Размер: 300X200
  2. Размер: <300 КБ
  3. URL: http://yourdomain.com/yourfolder/imagename.png

Убедитесь, что в названии изображения нет пробела, если у вас два слова, используйте знак подчеркивания

Сайед Зишан Али
источник
не работает в моем случае dev.dubairent.com/property/…
Джитендра Панчоли
10

Потратив несколько месяцев на то, чтобы понять это, я наконец решил проблему. Вот мое решение:

<!-- MS, fb & Whatsapp -->

<!-- MS Tile - for Microsoft apps-->
<meta name="msapplication-TileImage" content="http://www.example.com/image01.jpg">    

<!-- fb & Whatsapp -->

<!-- Site Name, Title, and Description to be displayed -->
<meta property="og:site_name" content="The Rock Photo Studio">
<meta property="og:title" content="The Rock Photo Studio in Florida">
<meta property="og:description" content="The best photo studio for your events">

<!-- Image to display -->
<!-- Replace   «example.com/image01.jpg» with your own -->
<meta property="og:image" content="http://www.example.com/image01.jpg">

<!-- No need to change anything here -->
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/jpeg">

<!-- Size of image. Any size up to 300. Anything above 300px will not work in WhatsApp -->
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">

<!-- Website to visit when clicked in fb or WhatsApp-->
<meta property="og:url" content="http://www.example.com">

Скопируйте вышеуказанное и вставьте в заголовок веб-сайта. ЗАКРОЙТЕ приложение WhatsApp, снова откройте, ТОГДА проверьте. Не нужно очищать кеш и НЕ НУЖНО УДАЛИТЬ ДАННЫЕ.

Всем доброго!

Дэвид Э
источник
За меня отвечал вовсе не размер файла. Пока размер файлов меньше 300 Кб, все в порядке. Мне не нужны свойства меры. Тег og: image достаточно.
Бернхард Краус
в моем случае никто не работал dev.dubairent.com/property/…
Джитендра Панчоли
9

Я нашел решение здесь Ссылка на предварительный просмотр WhatsApp, опубликованная 2 марта 16

И вы должны увидеть работу

До и после скриншота

введите описание изображения здесь

Есть два типа кода. Первый мета-объект: изображение внутри <head>

<meta property="og:image" content="url_image">

Схема эскиза из schema.org внутри <body>

<link itemprop="thumbnailUrl" href="url_image"> 
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> 
  <link itemprop="url" href="url_image"> 
</span>

Надеюсь на эту помощь. Спасибо.

wong_udik
источник
1
Отладчик FB: 100% нормально. Rich Preview: 100% нормально (включая Watsapp). Когда я пытаюсь поделиться через WhatsApp, изображение не отображается. URL в моем случае - robotiqu.es ... нет ответа через год?
Хуанджо
1
@wong_udik Как передать этот HTML-контент через Android Intent
Раджа Джавахар
не работает в моем случае dev.dubairent.com/property/…
Jitendra
3

Очистите данные и кеш WhatsApp (или используйте другой WhatsApp)!

Android Phone : Go to SETTINGS > APPS > Application List > WhatsApp > Storage and Clear Data.

Быть осторожен ! Сделайте резервную копию ваших сообщений перед этим действием.

очистить данные и кеш WhatsApp

Потом результат: до и после очистки данных и кеширования WhatsApp до и после обмена

Азодиум
источник
1
это и уменьшение размера файла менее 300 КБ сработало для меня
Арье Бейтц
1
Достаточно только очистить кеш. Нет необходимости очищать данные.
Санкет Берде
Вместо этого вы можете просто кешировать ссылку:https://link.com/?_=92375293579
nathan
2

Я не знаю о минимальном количестве метатегов, необходимых для работы в WhatsApp, нашел это где-то, и это сработало для меня безупречно. Примечание: разрешение изображения составляет 256 x 256.

   <head>
    <meta property="og:site_name" content="sitename" />
    <meta property="og:title" content="title">
    <meta property="og:description" content="description">
    <meta property="og:image" itemprop="image" content="http://www.yoursite.com/yourimage.jpg">
    <link itemprop="thumbnailUrl" href="http://www.yoursite.com/yourimage.jpg"> 
    <meta property="og:image:type" content="image/jpeg">
    <meta property="og:updated_time" content="updatedtime">
    <meta property="og:locale" content="en_GB" />
    </head>

    <body>
    <span itemprop="image" itemscope itemtype="image/jpeg"> 
      <link itemprop="url" href="http://www.yoursite.com/yourimage.jpg"> 
    </span>

    </body>
фалеро
источник
2

Дополнительная полезная информация:

Вы можете предоставить несколько изображений og:, WhatsApp будет использовать последнее. Это поможет решить проблему, например, facebook хочет соотношение 1.91: 1 и whatsapp 1: 1.

https://stackoverflow.com/a/61078968/8486854

SinunHenkka
источник
1

В ответ на https://stackoverflow.com/a/35785393/1518500

Попробуйте обновленную версию для schema.org

<span itemprop="image" itemscope itemtype="http://schema.org/ImageObject"> 
 <link itemprop="url" href="imgurlHere">
 <meta itemprop="width" content="1200">
 <meta itemprop="height" content="800">
</span>

или используя формат json-ld из Google

<script type="application/ld+json">
 {
"@context": "http://schema.org/",
"@type": "ImageObject",
 "url": "ImgURLhere",
    "height": 800,
    "width": 1200

 }
 </script>
Джоэл Лапитан
источник
1
Не могли бы вы добавить пояснения к своему ответу? Простое отображение кода может сбивать с толку некоторых людей.
André Kool
1

Для всех, у кого все еще есть эта проблема, и, как для меня, ни одно из опубликованных решений не сработало.

У меня была аналогичная проблема. Изображение отображалось правильно во всех других диалоговых окнах общего доступа. Только WhatsApp не смог отобразить изображение, хотя отладчик facebook правильно имеет тег og: image.

Решение, которое сработало для меня: я использую firebase. Для загруженного контента в их хранилище вы получаете уникальный URL-адрес загрузки с медиа-токеном. Что-то типа:

https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/ ? alt = media & token = YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY

Я использовал этот URL в метатеге og: image. Это сработало для Facebook и т. Д., Но похоже, что WhatsApp не может загрузить изображение с этого URL-адреса. Вместо этого вам нужно включить изображение в каталог вашего проекта и использовать эту ссылку для тега og: image. Теперь он исправно работает и в WhatsApp.

Раньше (не работал в WhatsApp, но в facebook и т. Д.)

<meta property="og:image" itemprop="image" content="https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/your_image?alt=media&token=YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY">

После (теперь работает во всех протестированных общих диалогах, включая WhatsApp)

<meta property="og:image" itemprop="image" content="https://domain_name/path_to_image">

Надеюсь, это поможет некоторым из вас :)

Филипп Миттманн
источник
Не могли бы вы уточнить подробности? Какая на самом деле разница? Вы как бы переписали URL-адрес изображения или что вы сделали?
Джон Макс
Вероятно, что домен должен совпадать с общей ссылкой.
MarsAndBack
1

Я задокументировал идеальное подробное решение здесь - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html. Чтобы получить идеальный предварительный просмотр, нужно выполнить семь шагов.

  1. Заголовок: добавьте на свою веб-страницу заголовок, содержащий не более 65 символов.

  2. Метаописание: опишите свою веб-страницу не более 155 символов.

  3. og: title: Максимум 35 символов.

  4. og: url: Полная ссылка на адрес вашей веб-страницы.

  5. og: description: Максимум 65 символов.

  6. og: image: Рекомендуется изображение (JPG или PNG) размером менее 300 КБ и минимальным размером 300 x 200 пикселей.

  7. favicon: маленький значок размером 32 x 32 пикселя.

На приведенной выше странице у вас есть необходимые спецификации, ограничение на количество символов и образцы тегов. Голосуйте за, когда сочтете это удовлетворительным.

GZone
источник
Объясните, что делает ваша ссылка ... Ссылки могут исчезнуть.
Курт Ван ден Бранден,
Ваш источник только что прошел тестирование или какие-либо из этих требований где-то задокументированы?
Keab42 07
1

Надеюсь, это поможет:

<meta property="og:title" content="Title goes here">
<meta property="og:site_name" content="Site name">
<meta property="og:image" content="imageURLShouldBeFromSameDomainName">
<meta property="og:image:width" content="640">
<meta property="og:image:height" content="300">

Обратите внимание на imgURL, который должен размещаться в том же домене, иначе он не будет отображаться в WhatsApp. Я попытался загрузить URL-адрес из Amazon, предварительный просмотр изображения не работает.

Джоэл Лапитан
источник
1
Как вы отправите эти данные через Intent
Раджа Джавахар
Этот вопрос совершенно
оффтопный
1

В моем случае добавление метатега ниже решило проблему. Я использовал арабский контент, и мне пришлось добавить это, чтобы изображение появилось в WhatsApp:

<meta property='og:locale' content='ar_AR' />

Примечание. Если вы используете контент на английском языке, нет необходимости добавлять этот метатег, поскольку английский является значением по умолчанию.

Рами Зебиан
источник
0

Вам нужно только ввести сообщение с "http: //" в начале. Например: http://www.google.com показывает уменьшенное изображение, а www.google.com - нет.

user6649894
источник
1
это должен быть комментарий, пожалуйста
swiftBoy
0

Данные Open Graph:

<meta property="og:title" content="Title of your website | website.com"/>
<meta property="og:type" content="Most popular business directory of Bangladesh"/>
<meta property="og:url" content="http://www.website.com/"/>
<meta property="og:image" content="http://www.moumaachi.com/images/dhaka-city.jpg"/>
<meta property="og:site_name" content="@website"/>
<meta property="fb:admins" content="Author"/>
<meta property="og:description" content="website.com is your online business directory of Country"/>
Амранур Рахман
источник
не работает в моем случае dev.dubairent.com/property/…
Джитендра Панчоли
0

Кажется, требуются только эти 3 тега ( og:title,twitter:description , rel="icon"):

<meta property="og:title" content="San Roque 2014 Pollos" />

<meta name="twitter:description" property="og:description" itemprop="description" content="Programa de fiestas" />

<link rel="icon" type="image/png" href="https://images.weserv.nl/?url=http://pollosweb.wesped.es/programa_pollos/play.png&w=192&height=192" sizes="192x192" />

Экспериментирование / игра

Для меня проще всего поэкспериментировать с CodeSandbox, выполнив следующие действия:

  • Создайте приложение Vanilla с https://codesandbox.io/s/
  • Измените свои метатеги соответствующим образом в index.html файле
  • Сохраните файл (ctrl+s ), который будет форкнуть приложение и сгенерировать собственный уникальный URL
  • Вставьте этот URL в WhatsApp, чтобы увидеть предварительный просмотр (вам даже не нужно отправлять сообщение)
  • Внесите изменения в метатеги
  • Измените URL-адрес - добавьте один символ в конце URL-адреса. Это отменяет "предыдущий кешированный предварительный просмотр"

Требуются цитаты

Просто убедитесь, что ВСЕГДА есть кавычки и закрывающие кавычки, потому что WhatsApp чувствителен к этому. В приведенном выше примере нет заключительной цитаты для вашего og:description.

Франсуа
источник
не работает в моем случае dev.dubairent.com/property/…
Джитендра Панчоли
1
@JitendraPancholi, ваш сайт (dubairent.com) не тот. Вокруг значений атрибутов требуются символы двойных кавычек. Вот один из Вашего сайта: <meta property=og:title content="Immaculate 4 Bed Townhouse Victory">. Оно должно быть: <meta property="og:title" content="Immaculate 4 Bed Townhouse Victory">. Если вы используете Webpack с плагином HTML, подумайте о том, minify.removeAttributeQuotesчтобы установитьfalse
Francois
Я исправил это сейчас, но WhatsApp по-прежнему не показывает изображение в предварительном просмотре, хотя заголовок и описание отображаются так же, как и раньше.
Джитендра Панчоли
@JitendraPancholi, вы можете использовать приведенные выше инструкции для «Самым простым способом поэкспериментировать для меня был с CodeSandbox, выполнив следующие действия». Просто скопируйте свой <head>раздел в ванильное приложение. Чтобы получить необработанный HTML-код вашего веб-сайта, используйте параметр «просмотреть исходный код страницы» (в Chrome это так CTRL + U).
Франсуа
0

Для тех, кто все еще сталкивается с этим, я обнаружил, что изображения, обслуживаемые на Amazon S3, не работают для мобильного приложения WhatsApp (как для Android, так и для iOS, но настольное приложение Mac было в порядке). Вполне возможно, что это вызвано нашими настройками AWS, но я заметил эту закономерность и на других сайтах (например, этот с og:imageпопаданием в домен вроде https://s3.amazonaws.com).

На других платформах, которые я пробовал, проблем не возникало, только с мобильными приложениями WhatsApp. Как только я указал<meta property="og:image" content="https://some-non-aws-location" /> на другой общедоступный URL-адрес, такой как файл Google Диска (конечно же, общий доступ), все заработало.

Я также попытался зафиксировать образ в нашем репо, который размещен и развернут на AWS с пользовательским доменом, и это тоже не сработало. Так что, похоже, виновником по-прежнему является AWS. Надеюсь, это кому-то поможет!

abettermap
источник
0

Если после всех этих советов эскиз все еще не отображается, попробуйте следующее:

Моя проблема заключалась в том, что двойные кавычки из атрибутов og удалялись при сборке для производства (сборка npm run). Модуль Minify делал это.

Итак, решение заключалось в том, чтобы отменить это удаление, установив для атрибута removeAttributeQuotes значение false:

minify: {
    ...
    removeAttributeQuotes: false,
    ...
}

В своей среде разработки я установил его в файле «webpack.prod.conf.js». Установите его в свой эквивалентный файл.

Просто восстановите, и теперь он работает.

Дерзу
источник
0

Я выполнил все инструкции в ответах здесь, и я все еще не мог заставить его работать. Похоже, WhatsApp также требует расширения для отображения изображения.

Итак, для тега, указывающего на jpeg:

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

Измените API, чтобы разрешить расширение, и используйте:

<meta property="og:image" itemprop="image" content="https://example.com/someimageid.jpeg"/>

а потом вроде работает ...

Ник H247
источник
0

введите описание изображения здесь У меня была такая же проблема, я, наконец, получил ее после некоторых попыток. Вот 8 тегов html, которые я использовал на своей веб-странице для предварительного просмотра:

В <head>теге:

<meta property="og:title" content="ABC Blabla 2020 Friday" />
<meta property="og:url" content="https://bla123.neocities.org/mp/friday.html" />
<meta property="og:description" content="Photo Album">
<meta property="og:image" itemprop="image" content="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG"/>
<meta property="og:type" content="article" />
<meta property="og:locale" content="en_GB" />

В <body>теге:

<link itemprop="thumbnailUrl" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">

<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">
</span>

Эти 8 тегов (6 в головке, 2 в теле) работали отлично.

Подсказки:

1. Используйте точный URL-адрес местоположения изображения вместо формата каталога, т.е. не используйте images / OG_thumb.jpg

2. Расширение файла с учетом регистра: если имя расширения изображения у вашего хостинг-провайдера - «.JPG», тогда не используйте «.jpg» или «.jpeg». Я заметил, что в зависимости от комбинации хостинг-провайдера и ошибки браузера может быть или нет возникают, поэтому для безопасности проще просто сопоставить случай расширения файла.

3. После выполнения вышеуказанных шагов, если предварительный просмотр миниатюр все еще не отображается в сообщении WhatsApp, выполните следующие действия:

а. Принудительно остановите мобильное приложение (я пробовал на Android) и повторите попытку

б. Используйте онлайн-инструмент для предварительного просмотра тега OG, например, я использовал: https://searchenginereports.net/open-graph-checker

c. В мобильном браузере вставьте прямую ссылку на большой палец OG и обновите браузер 4-5 раз. например https://bla123neocities.org/nmp/images/thumbs/IMG_327.JPG

зенни
источник
0

Ноябрь 2020 г .: Как я понял, эти метатеги необходимы и влияют на то, что вы видите по общей ссылке в Whatsapp и WhatsApp-thumbnail:

<head>
 <meta content='myTitle' property='og:title'/>
  <meta content="myDescription" property="og:Description"/>
  <meta property="og:type" content= "website" />
  <meta property="og:image" itemprop="image primaryImageOfPage" content="https://i.ibb.co/1GRpwND/600px-Approve-icon-svg.png" />
</head>

и внутри <body> :

<a href="https://wa.me/?text=https://myaddress.blogspot.com/2020/11/try-16.html" target="_blank" rel="nofollow">Hello whatsApp</a>

Дополнительные объяснения:

1- Предположим, у вас есть <meta content='example.com/page1' property='og:url'/>и внутри тела, на которое вы ссылаетесь <a href="https://wa.me/?text=example.com/page2" >Hello whatsApp</a>, og:imageи og:descriptionстраницыexample.com/page2 Виль быть оказаны на WhatsApp , как вы упомянули о вашей ссылке в теле (может быть очевидным).

2-Когда вы add/changeоткрываете какие-либо теги графиков, такие как og:description, и снова нажимаете свой <a></a>тег на своей странице / теле, то, что вы видите в WhatsApp, не меняется, если вы не измените href="I am a new URL"свой<a></a> тег или не очистите кеш WhatsApp !!

3-Я пробовал Png/jpgизображения, все размером менее 300 КБ и все размером более 300 * 300 в пикселях, а содержимое изображения было https или httpURL-адресом, приведенный выше код поддерживает оба из них (нет необходимости og:image:secure_url).

4-Каждый раз, когда вы добавляете / изменяете ogсодержимое, чтобы иметь миниатюру в WhatsApp, изменения не влияют на первую попытку !! и успешно со второй попытки. Очень странно !

ehsan_kabiri_33
источник
-1

Это решение работает для меня:

    <meta property="og:title" content="Testing Title" />
    <meta
      property="og:description"
      content="This is best way to view your Time Table & Join Meetings"
    />
    <meta
      property="og:image"
      itemprop="image"
      content="//upload.wikimedia.org/wikipedia/commons/d/d4/JPEG_example_image_decompressed.jpg"
    />
    <meta property="og:url" content="https://google.com/" />
    <meta property="og:type" content="website" />
    <meta property="og:image:type" content="image/jpeg" />

проверено на codeandbox.io

вот ссылка: https://l8ogr.csb.app/

одна глупая вещица сотворила волшебство, удалив "http " или " https" из URL изображения

если URL вашего изображения ex: https://test.com/img.jpegto//test.com/img.jpeg

<meta property="og:image" itemprop="image" content="//test.com/img.jpg"/>
SKJ
источник