Affichage de la miniature pour le lien dans WhatsApp || og: la méta-balise d'image ne fonctionne pas


94

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

entrez la description de l'image ici

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


Étrange ... l'og: l'image devrait suffire. J'ai essayé de partager un lien youtube et je peux voir correctement la vignette dans mon chat. J'ai essayé de voir si Youtube utilisait plus de balises méta sans rien découvrir de spécial ... Sommes-nous confrontés à un problème de cache?
cs.edoardo

excusez-moi, mais êtes-vous sûr que c'est même possible? L'avez-vous déjà vu ailleurs? avez-vous un lien qui a un pouce sur WhatsApp?
ProllyGeek

il est possible d'augmenter la hauteur et la largeur de l'image ???? dans Whatsapp
Chandresh

J'ai utilisé le même tag, il ne fonctionne pas, veuillez guider stackoverflow.com/questions/47236739/…
vinox

Puis-je référencer une image sans aucun appel HTTP, comme dans content="./images/logo.png"?
TMOTTM

Réponses:


101

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.


Cela peut être dû au fait que l'image n'est pas disponible dans votre première des deux balises Meta avec itemprop="image". Message d'erreur:Cannot GET /logos/logo_512.png
Inconnu

4
De plus, si vous prévoyez d'utiliser des liens http sécurisés vers l'image, vous devez utiliser à la property="og:image:secure_url"place deproperty="og:image"
Inconnu

Merci pour votre temps. J'ai fait les changements. Mais toujours pas de chance. :(
Akhil Sekharan

Le lien youtube mène à une vidéo où ils montrent comment créer une icône plate dans Illustrator?
Inconnu

Désolé pour l'ambiguïté. Lorsque nous envoyons ce lien via WhatsApp, une vignette de la vidéo apparaît près du message, comme indiqué dans cette question
Akhil Sekharan

29

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


dev.dubairent.com/property/… ne fonctionne pas dans mon cas
Jitendra Pancholi

11

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


ne fonctionne pas dans mon cas dev.dubairent.com/property/…
Jitendra Pancholi

10

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!


Pour moi, la taille du fichier était responsable du tout. Tant que la taille des fichiers est inférieure à 300 Ko, tout va bien. Je n'ai pas besoin de propriétés de mesure. La balise og: image suffit.
Bernhard Kraus

aucun n'a fonctionné dans mon cas dev.dubairent.com/property/…
Jitendra Pancholi

9

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

Et vous devriez voir travailler

Avant et après la capture d'écran

entrez la description de l'image ici

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.


1
Débogueur FB: 100% ok. Aperçu riche: 100% ok (Watsapp inclus). Lorsque j'essaye de partager par WhatsApp, l'image ne s'affiche pas. L'url dans mon cas est robotiqu.es ... pas de réponse un an plus tard?
Juanjo

1
@wong_udik Comment transmettre ce contenu HTML via Android Intent
Raja Jawahar

ne fonctionne pas dans mon cas dev.dubairent.com/property/…
Jitendra Pancholi

3

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.

effacer les données et le cache de WhatsApp

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


1
cela et rendre la taille du fichier inférieure à 300 ko a fonctionné pour moi
Aryeh Beitz

1
Seule la suppression du cache suffit. Pas besoin d'effacer les données.
Sanket Berde

Vous pouvez simplement mettre en cache le lien à la place:https://link.com/?_=92375293579
nathan

2

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>


1

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>

1
Pouvez-vous s'il vous plaît ajouter des explications à votre réponse? Le simple fait d'afficher du code peut être déroutant pour certaines personnes.
André Kool

1

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


Pouvez-vous s'il vous plaît élaborer davantage? Quelle est vraiment la différence? Avez-vous en quelque sorte réécrit l'url de l'image ou qu'avez-vous fait?
John Max

Probablement que le domaine doit correspondre au lien partagé.
MarsAndBack

1

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.


Expliquez ce que fait votre lien ... Les liens peuvent disparaître.
Kurt Van den Branden

Votre source provient-elle uniquement de tests ou l'une de ces exigences est-elle documentée quelque part?
Keab42

1

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.


1
Comment allez-vous envoyer ces données via Intent
Raja Jawahar

Cette question est entièrement hors
sujet

1

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.



0

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

ne fonctionne pas dans mon cas dev.dubairent.com/property/…
Jitendra Pancholi

0

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.


ne fonctionne pas dans mon cas dev.dubairent.com/property/…
Jitendra Pancholi

1
@JitendraPancholi, votre site Web (dubairent.com) n'est pas le même. Des guillemets doubles sont obligatoires autour des valeurs d'attribut. Voici celui de votre site Web: <meta property=og:title content="Immaculate 4 Bed Townhouse Victory">. Il devrait être: <meta property="og:title" content="Immaculate 4 Bed Townhouse Victory">. Si vous utilisez Webpack avec le plugin HTML, envisagez de définir minify.removeAttributeQuotessurfalse
François

J'ai corrigé cela maintenant, mais WhatsApp n'affiche toujours pas l'image dans l'aperçu, bien que le titre et la description s'affichent comme ils le montraient auparavant.
Jitendra Pancholi

@JitendraPancholi, vous pouvez utiliser les instructions ci-dessus pour "La façon la plus simple d'expérimenter pour moi était avec CodeSandbox en suivant ces étapes". Copiez simplement votre <head>section dans l'application vanilla. Pour obtenir le code HTML brut de votre site Web, utilisez l'option "Afficher la source de la page" (dans Chrome, c'est le cas CTRL + U).
François

0

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!


0

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.


0

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


0

entrez la description de l'image ici 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


0

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 !


-1

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"/>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.