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

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

Я пытаюсь использовать WhatsApp на Android

→ Это URL-адрес примерной веб-страницы

Ответы

Ответ 1

Я верю, что вам нужно добавить 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.

EDIT:
Если вы собираетесь указать изображение по ссылке HTTP-Secure, вам нужно использовать og:image:secure_url вместо og:image.

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

Ответ 2

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

Поэтому наиболее важным свойством для отображения изображения в Whatsapp является:

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

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

Ответ 3

Я нашел решение здесь Предварительная ссылка WhatsApp, размещенная 2 марта 16

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

enter image description here

Существует два вида кода. Первая мета ог: изображение внутри <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>

Надеюсь, это поможет. Благодарю.

Ответ 4

Я также столкнулся с этой проблемой, наконец, я решил ее

<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

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

Ответ 5

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

<!-- 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, заново открыть, ТО тест. Не нужно очищать кеш и не нужно очищать данные.

Благословения всем!

Ответ 6

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

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

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

clear whatsapp data and cache

Тогда результат: до и после очистки данных и кеша WhatsApp before and after sharing

Ответ 7

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

Ответ 8

В ответ на fooobar.com/questions/127897/...

Попробуйте обновленную версию для 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>

Ответ 9

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

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

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

https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/? alt= media & токен = YYYYYYYY-YYYYYYYYYYYYYYYYYYYYYYYYY

Я использовал этот 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">

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

Ответ 10

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

  • Заголовок: добавьте ключевое слово с богатым заголовком на свою веб-страницу с максимум 65 символами.

  • Описание Meta: Опишите вашу веб-страницу не более 155 символов.

  • og: title: не более 35 символов.

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

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

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

  • favicon: Маленькая иконка размером 32 x 32 пикселя.

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

Ответ 11

Я надеюсь, что эта помощь:

<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, предварительный просмотр изображения не работает.

Ответ 12

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

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

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

Ответ 13

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

Ответ 14

Открыть график данных:

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

Ответ 15

Parabens pelo artigo, eu so tiver um Problem, quando eu comptilho o link do me site (Catingueiraonline.com) нет WhatsApp, aparece tudo certinho (фото, описание и т.д.) Apenas no android. нет iphone, так что есть фотография, которая может быть выше?

bit.ly/2XjwKG2

Ответ 16

Кажется, требуются только эти 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="#" onclick="location.href='https://images.weserv.nl/?url=http://pollosweb.wesped.es/programa_pollos/play.png&w=192&height=192'; return false;" sizes="192x192" />

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

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

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

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

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