J'ai essayé de suivre cette question: Fournissez une image pour le partage de lien WhatsApp

J'ai créé une page Web HTML simple avec les métabalises Facebook de base:

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

Le linter Facebook se valide correctement et sur Facebook, il est parfait, mais lorsque j'essaie de partager par WhatsApp, l'image ne s'affiche pas.

J'essaie sur WhatsApp sur Android

→ Ceci est l'URL de l'exemple de page Web

Je pense que vous devez ajouter itempropà la og:imagebalise meta, définir la taille de l'image sur 256x256et il ne serait pas non plus dangereux d'ajouter les propriétés site_name, typeet 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" />

Vous pouvez voir ces balises méta en action sur par exemple Google Maps .
Une fois que vous avez modifié vos balises Meta, vous devrez peut-être attendre un certain temps pour que d'éventuels caches se mettent à jour.

Vous pouvez déboguer / vérifier les balises méta Open Graph à partir du débogueur Facebook
Si vous pouvez y voir toutes vos balises, les sites / applications sur lesquels vos balises ne s'affichent pas correctement peuvent avoir des exigences différentes pour les balises Open Graph.

EDIT:
Si vous allez spécifier une image par un HTTP-Securelien, vous devez utiliser à la og:image:secure_urlplace de og:image.

EDIT2:
Vous devez également spécifier og:typecar il s'agit de l'un des quatre paramètres de base requis.
<meta property="og:type" content="website" />devrait vous amener dans la bonne direction.

J'ai eu le même problème et le problème était la taille de l'image. Whatsapp ne prend pas en charge les images d'une taille supérieure à 300 Ko.

Ainsi, la propriété la plus importante pour afficher l'image sur Whatsapp est:

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

Et la taille de l'image à afficher doit être inférieure à 300 Ko

Je fais aussi face à ce problème Enfin, je l'ai résolu

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

Ma propriété d'image

1. Dimension: 300X200
2. Taille: <300KB
3. URL: http://yourdomain.com/yourfolder/imagename.png

Assurez-vous que dans le nom de l'image il n'y a pas d'espace, si vous avez deux mots, utilisez le signe de soulignement

Après avoir passé des mois à essayer de comprendre cela, j'ai finalement résolu le problème. Voici ma solution:

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

Copiez ce qui précède, collez-le dans la zone principale du site Web. FERMER votre application Whatsapp, rouvrir, PUIS tester. Pas besoin de vider le cache, et PAS BESOIN DE EFFACER LES DONNÉES.

Bénédictions à tous!

J'ai trouvé la solution ici Lien de prévisualisation Whatsapp publié le 2 mars 16

Et vous devriez voir travailler

Il existe deux types de code. Première méta og: image à l'intérieur de <head>

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

Schéma miniature de schema.org à l'intérieur de <body>

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

J'espère que cette aide. Merci.

Effacez vos données et votre cache WhatsApp (ou utilisez un autre WhatsApp)!

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

Faites attention ! Sauvegardez vos messages avant cette action.

Ensuite, le résultat: avant et après la suppression des données et le cache WhatsApp

Je ne connais pas le nombre minimum de balises meta nécessaires pour fonctionner sur WhatsApp, j'ai trouvé cela quelque part et cela a fonctionné parfaitement pour moi. Remarque: la résolution d'image est de 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>

Informations utiles supplémentaires:

Vous pouvez fournir plusieurs og: images, WhatsApp utilisera la dernière. Cela aidera à résoudre le problème que, par exemple, Facebook veut un rapport de 1,91: 1 et WhatsApp 1: 1

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

En réponse à https://stackoverflow.com/a/35785393/1518500

Essayez la version mise à jour pour 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>

ou en utilisant le format json-ld de google

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

 }
 </script>

Pour tous ayant encore ce problème et quant à moi, aucune des solutions affichées n'a fonctionné.

J'ai eu le même problème. L'image s'affichait correctement dans toutes les autres boîtes de dialogue de partage. Seul WhatsApp n'a pas pu afficher l'image, même si le débogueur Facebook a correctement la balise og: image.

La solution qui a fonctionné pour moi: j'utilise Firebase. Pour le contenu téléchargé dans leur stockage, vous obtenez une URL de téléchargement unique avec un jeton multimédia. Quelque chose comme:

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

J'ai utilisé cette URL dans la balise meta og: image. Cela a fonctionné pour Facebook, etc., mais il semble que WhatsApp ne puisse pas télécharger l'image à partir de cette URL. Au lieu de cela, vous devez inclure l'image dans le répertoire de votre projet et utiliser ce lien pour la balise og: image. Maintenant, cela fonctionne également correctement dans WhatsApp.

Avant (ne fonctionnant pas dans WhatsApp, mais Facebook, etc.)

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

Après (fonctionne maintenant dans toutes les boîtes de dialogue partagées testées, y compris WhatsApp)

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

J'espère que cela pourrait aider certains d'entre vous :)

J'ai documenté la solution détaillée parfaite ici - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html Il y a sept étapes à suivre pour obtenir l'aperçu parfait.

1. Titre: ajoutez un titre riche en mots clés à votre page Web avec un maximum de 65 caractères.

2. Meta Description: Décrivez votre page Web avec un maximum de 155 caractères.

3. og: titre: 35 caractères maximum.

4. og: url: lien complet vers l'adresse de votre page Web.

5. og: description: 65 caractères maximum.

6. og: image: Une image (JPG ou PNG) d'une taille inférieure à 300 Ko et d'une dimension minimale de 300 x 200 pixels est conseillée.

7. favicon: Une petite icône de dimensions 32 x 32 pixels.

Dans la page ci-dessus, vous avez les spécifications requises, la limite de caractères et des exemples de balises. Faites un vote positif une fois que vous le trouvez satisfaisant.

J'espère que cette aide:

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

Prenez note de l'imgURL qui devrait être hébergée à partir du même domaine, sinon elle n'apparaîtra pas sur WhatsApp. J'ai essayé de charger une URL d'Amazon, l'aperçu de l'image ne fonctionne pas.

Dans mon cas, l'ajout de la balise meta ci-dessous a résolu le problème. J'utilisais du contenu arabe et j'ai dû ajouter ceci pour que l'image apparaisse sur WhatsApp:

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

Remarque: si vous utilisez du contenu en anglais, il n'est pas nécessaire d'ajouter cette balise Meta car l'anglais est la valeur par défaut.

Il vous suffit de taper le message avec "http: //" au début. Par exemple: http://www.google.com affiche l'image miniature, mais www.google.com non.

Données 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"/>

Seuls ces 3 balises semblent être nécessaires ( 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" />

Expérimenter / jouer

Le moyen le plus simple d'expérimenter pour moi était avec CodeSandbox en suivant ces étapes:

• Créez une application Vanilla avec https://codesandbox.io/s/
• Modifiez vos balises méta en conséquence dans le index.htmlfichier
• Enregistrez le fichier ( ctrl+s) qui bifurquerait l'application et générerait sa propre URL unique
• Collez cette URL dans WhatsApp pour voir l'aperçu (vous n'avez même pas besoin d'envoyer un message)
• Apportez des modifications aux balises méta
• Modifiez l'url - ajoutez un seul caractère à la fin de l'url. Cela supprime le "précédent aperçu mis en cache"

Devis requis

Assurez-vous simplement d'avoir TOUJOURS des citations et des citations de clôture, car WhatsApp y est sensible. Votre exemple ci-dessus n'a pas de devis de clôture pour votre og:description.

Pour tous ceux qui rencontrent encore cela, j'ai trouvé que les images servies sur Amazon S3 ne fonctionnaient pas pour l'application mobile WhatsApp (à la fois Android et iOS, mais l'application de bureau Mac était bien). Il est très possible que nos paramètres AWS provoquent cela, mais j'ai également remarqué le modèle dans d'autres sites (par exemple celui-ci avec og:imageun domaine comme celui-ci https://s3.amazonaws.com).

Il n'y a eu aucun problème sur aucune autre plate-forme que j'ai essayée, juste les applications mobiles WhatsApp. Dès que j'ai pointé mon <meta property="og:image" content="https://some-non-aws-location" />vers une autre URL publique comme un fichier Google Drive (partagé publiquement bien sûr), cela a bien fonctionné.

J'ai également essayé de valider l'image dans notre repo, qui est hébergé et déployé sur AWS avec un domaine personnalisé, et cela n'a pas fonctionné non plus. AWS semble donc toujours être le coupable. J'espère que cela aide quelqu'un!

Si après tous ces conseils, la vignette ne s'affiche toujours pas, essayez ceci:

Mon problème était que les guillemets doubles des attributs og étaient supprimés lors de la construction pour la production (npm run build). Le module Minify faisait cela.

La solution était donc d'annuler cette suppression, en définissant l'attribut removeAttributeQuotes sur false:

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

Dans mon environnement de développement, je le place sur le fichier "webpack.prod.conf.js". Définissez-le sur votre fichier équivalent.

Il suffit de reconstruire et cela fonctionne maintenant.

J'ai suivi toutes les instructions dans les réponses ici, et je ne pouvais toujours pas le faire fonctionner. Il semble que WhatsApp nécessite également l'extension pour afficher l'image.

Donc pour une balise pointant vers un jpeg:

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

Modifiez l'API pour autoriser l'extension et utiliser:

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

et cela semble alors fonctionner ...

J'ai eu le même problème, je l'ai finalement fait fonctionner après quelques essais. Voici les 8 balises html que j'ai utilisées sur ma page Web pour faire fonctionner l'aperçu:

Dans la <head>balise:

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

Dans la <body>balise:

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

Ces 8 balises (6 en tête, 2 en corps) fonctionnaient parfaitement.

Conseils:

1.Utilisez l'URL de l'emplacement exact de l'image au lieu du format de répertoire, c'est-à-dire n'utilisez pas images / OG_thumb.jpg

2.Extension de fichier sensible au cas: si le nom de l'extension d'image sur votre fournisseur d'hébergement est ".JPG", n'utilisez pas ".jpg" ou ".jpeg". J'ai observé qu'en fonction de la combinaison du fournisseur d'hébergement et du navigateur, une erreur peut ou non se produire, donc pour être sûr, il est plus facile de faire correspondre la casse de l'extension de fichier.

3.Après avoir effectué les étapes ci-dessus, si l'aperçu de la vignette n'apparaît toujours pas dans le message WhatsApp, alors:

une. Forcer l'arrêt de l'application mobile (j'ai essayé sous Android) et réessayer

b.Utilisez l'outil en ligne pour prévisualiser la balise OG, par exemple, j'ai utilisé: https://searchenginereports.net/open-graph-checker

c. Dans le navigateur mobile, collez le lien direct vers le pouce OG et actualisez le navigateur 4 à 5 fois. par exemple https://bla123neocities.org/nmp/images/thumbs/IMG_327.JPG

Novembre 2020: Comme je l'ai expérimenté, ces balises meta sont obligatoires et affectent ce que vous voyez sur le lien partagé dans Whatsapp et 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>

et à l'intérieur <body> :

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

Plus d'explications:

1- Supposons que vous ayez un <meta content='example.com/page1' property='og:url'/>corps intérieur auquel vous vous référez <a href="https://wa.me/?text=example.com/page2" >Hello whatsApp</a>, le og:imageet og:descriptionde la page example.com/page2seront rendus sur WhatsApp comme vous l'avez référencé sur votre lien dans le corps (peut-être évident).

2-Lorsque vous add/changeouvrez des balises graphiques telles que og:description, et que vous cliquez à nouveau sur votre <a></a>balise sur votre page / corps, ce que vous voyez sur WhatsApp ne change pas à moins que vous ne changiez le href="I am a new URL"de votre <a></a>balise ou que vous effaciez le cache de WhatsApp !!

3-J'ai essayé des Png/jpgimages, toutes de moins de 300 ko en taille et toutes plus grandes que 300 * 300 en pixels, et le contenu de l'image était une https ou une httpURL, le code ci-dessus les prend en charge tous les deux (pas besoin og:image:secure_url).

4-Chaque fois que vous ajoutez / modifiez du ogcontenu, pour avoir une vignette sur WhatsApp, les changements n'affectent pas au premier essai !! et réussi au deuxième essai. Très étrange !

Cette solution fonctionne pour moi:

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

testé sur codesandbox.io

voici le lien: https://l8ogr.csb.app/

une petite chose idiote a fait cette magie, en supprimant " http" ou " https" de l'URL de l'image

si l'URL de votre image est ex: https://test.com/img.jpegà//test.com/img.jpeg

<meta property="og:image" itemprop="image" content="//test.com/img.jpg"/>