Пытался ответить на этот вопрос: предоставьте изображение для обмена ссылками в 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 Maps .
После того, как вы изменили свои метатеги, вам может потребоваться некоторое время, чтобы обновить возможные кеши.

Вы можете отлаживать / проверять метатеги 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: description: Максимум 65 символов.

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

7. favicon: маленький значок размером 32 x 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 - нет.

Данные 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"/>

Кажется, требуются только эти 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 Диска (конечно же, общий доступ), все заработало.

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

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

Моя проблема заключалась в том, что двойные кавычки из атрибутов og удалялись при сборке для производства (сборка npm run). Модуль 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, выполните следующие действия:

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

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

c. В мобильном браузере вставьте прямую ссылку на большой палец OG и обновите браузер 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" />

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