Спробував дотримуватися цього питання: Надайте зображення для спільного використання посилань 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-адреса зразка веб-сторінки

Я вірю , що вам потрібно додати 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 .
Після того, як ви змінили свої метатеги, можливо, вам доведеться почекати деякий час, поки можливі кеші оновляться.

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

РЕДАГУВАТИ:
Якщо ви збираєтеся вказати зображення за HTTP-Secureпосиланням, вам потрібно використовувати og:image:secure_urlзамість og:image.

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

У мене була та сама проблема, і проблема полягала в розмірі малюнка. Whatsapp не підтримує зображення розміром більше 300 КБ.

Отже, найважливішою властивістю відображення зображення на Whatsapp є:

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

І розмір зображення для відображення повинен бути менше 300 КБ

Я також стикаюся з цією проблемою Нарешті, я її вирішив

<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

Переконайтесь, що в назві зображення немає місця, якщо у вас є два слова, використовуйте знак підкреслення

Провівши місяці, намагаючись це зрозуміти, я нарешті вирішив проблему. Ось моє рішення:

<!-- 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, знову відкрити, ПОТІМ тестувати. Не потрібно очищати кеш-пам’ять і НЕ ПОТРІБНО ОЧИСТУВАТИ ДАНІ.

Всім благословення!

Рішення я знайшов тут, посилання для попереднього перегляду 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>

Сподіваюся, це допоможе. Дякую.

Очистіть свої дані та кеш-пам’ять WhatsApp (або скористайтеся іншим WhatsApp)!

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

Будь обережний ! Створіть резервну копію повідомлень перед цією дією.

Тоді результат: до і після очищення даних та кешування WhatsApp

Я не знаю про мінімальну кількість мета-тегів, необхідних для роботи на 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>

Додаткова корисна інформація:

Ви можете надати кілька зображень og:, WhatsApp використовуватиме останню. Це допоможе вирішити проблему з тим, що, наприклад, facebook хоче співвідношення 1,91: 1 і WhatsApp 1: 1

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

У відповідь на 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>

Для всіх, хто все ще має цю проблему, як і для мене, жодне з опублікованих рішень не спрацювало.

У мене була подібна проблема. Зображення відображалось правильно у всіх інших діалогових вікнах спільного доступу. Тільки 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">

Сподіваюся, це може допомогти комусь із вас :)

Тут я задокументував ідеальне детальне рішення - 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: опис: максимум 65 символів.

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

7. значок: невелика піктограма розміром 32 х 32 пікселі.

На наведеній вище сторінці ви маєте необхідні технічні характеристики, обмеження кількості символів і зразки тегів. Голосуйте, коли вважаєте, що це задовільно.

Я сподіваюся, що це допоможе:

<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, попередній перегляд зображення не працює.

У моєму випадку додавання метатегу нижче вирішило проблему. Я використовував арабський вміст і повинен був додати це, щоб зображення з’явилось у WhatsApp:

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

Примітка: Якщо ви використовуєте англійський вміст, не потрібно додавати цей метатег, оскільки англійською є значення за замовчуванням.

Потрібно лише на початку ввести повідомлення з "http: //". Наприклад: http://www.google.com показує ескіз, але www.google.com ні.

Відкрити дані графіку:

<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"/>

Тільки ці 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.

Для тих, хто все ще відчуває це, я виявив, що зображення, розміщені на 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 Drive (звичайно, загальнодоступний), вона спрацювала нормально.

Я також спробував зафіксувати зображення в нашому репо, яке розміщується та розгортається на AWS із користувацьким доменом, і це теж не спрацювало. Отже, AWS, як і раніше, є винуватцем. Сподіваюся, це комусь допомагає!

Якщо після всіх цих порад піктограма все ще не відображається, спробуйте наступне:

Моя проблема полягала в тому, що подвійні лапки з атрибутів og були видалені при побудові для виробництва (npm run build). Це робив модуль Minify.

Тож рішенням було скасувати це видалення, встановивши для атрибута removeAttributeQuotes значення false:

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

У своєму середовищі розробки я встановив його у файлі "webpack.prod.conf.js". Встановіть його у своєму еквівалентному файлі.

Просто відновіть, і зараз це працює.

Я виконував усі вказівки в анверах тут, і все ще не міг змусити його працювати. Здається, 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"/>

і це, здається, працює ...

Була та сама проблема, я нарешті змусив її працювати після спроб. Ось 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:

a. Примусово зупиніть мобільний додаток (я спробував в Android) і повторіть спробу

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

c. У мобільному браузері вставте пряме посилання на великий палець ОГ і оновіть браузер 4-5 разів. наприклад https://bla123neocities.org/nmp/images/thumbs/IMG_327.JPG

Листопад 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, зміни не впливають на першу спробу !! і успішно з другої спроби. Дуже дивно !

Це рішення працює для мене:

    <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" />

протестовано на codesandbox.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"/>