Afficher la vignette pour le lien dans WhatsApp || og: la méta-balise image ne fonctionne pas
Essayé de suivre cette question: Fournir une image pour le partage de lien WhatsApp
J'ai créé une simple page Web HTML avec les métatags de base de 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" />
Le linter Facebook valide correctement et sur Facebook, il montre parfait, mais lorsque je tente de partager par WhatsApp, l'image ne montre pas.
Je l'essaie sur WhatsApp sur Android
Je pense que vous devez ajouter itemprop à la balise méta og:image, définir la taille de l'image sur 256x256 et éviter d'ajouter des propriétés site_name, type et 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 meta en action, par exemple, sur Google Maps .
Après avoir modifié vos balises méta, vous devrez peut-être attendre un moment pour que les caches éventuels 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 exigences relatives aux sites/applications où vos balises ne s'affichent pas correctement peuvent être différentes pour les balises Open Graph.
MODIFIER:
Si vous souhaitez spécifier une image à l'aide d'un lien HTTP-Secure, vous devez utiliser og:image:secure_url au lieu de og:image.
EDIT2:
Vous devez également spécifier og:type car il s’agit de l’un des quatre paramètres de base requis.<meta property="og:type" content="website" /> devrait vous mettre dans la bonne direction.
J'ai eu le même problème et le problème était la taille de la photo. Whatsapp ne prend pas en charge les images dont la taille est supérieure à 300 Ko.
Donc, la propriété la plus importante pour afficher une image sur Whatsapp est:
<meta property="og:image" content="url_image">
Et le la taille de l'image à afficher doit être inférieure à 300 Ko
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 séance d’écran
Il y a deux types de code. Première méta-image: image à l'intérieur de <head>
<meta property="og:image" content="url_image">
Schéma de vignettes 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.
Je suis aussi confronté à 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
- Dimension: 300X200
- Taille: <300Ko
- URL: http://yourdomain.com/yourfolder/imagename.png
Assurez-vous qu'il n'y a pas d'espace dans le nom de l'image. Si vous avez deux mots, utilisez un trait de soulignement.
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 la mise en cache de WhatsApp 
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>
Je ne connais pas le nombre minimum de balises META requises pour travailler sur WhatsApp, je l'ai trouvé quelque part et cela a parfaitement fonctionné pour moi. Remarque: la résolution de l'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>
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 du imgURL qui devrait être hébergé à partir du même domaine, ou il ne sera pas affiché sur WhatsApp. J'ai essayé de charger une URL d'Amazon, l'aperçu de l'image ne fonctionne pas.
Pour tous ayant toujours ce problème et quant à moi, aucune des solutions affichées n'a fonctionné.
J'ai eu le même problème. L'image était correctement affichée dans tous les autres dialogues de partage. Seul WhatsApp n'a pas pu afficher l'image, même si le débogueur de 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 de média. Quelque chose comme:
https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/ ? alt = média & jeton = YYYYYYYY-YYYYYYYYYYYYYYYYYYYYYYYY
J'ai utilisé cette URL dans la balise méta 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 . Vous devez plutôt inclure l'image dans votre répertoire de projet et utiliser ce lien pour le tag og: image. Maintenant, cela fonctionne correctement dans WhatsApp aussi.
Avant (ne fonctionne 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 tous les dialogues partagés testés, 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 le aperçu parfait.
Titre: Ajoutez un titre riche en mots-clés sur votre page Web de 65 caractères maximum.
Meta Description: Décrivez votre page Web en 155 caractères maximum.
og: titre: 35 caractères maximum.
og: url: lien complet vers l'adresse de votre page Web.
og: description: 65 caractères maximum.
og: image: une image (JPG ou PNG) de taille inférieure à 300 Ko et de dimension minimale de 300 x 200 pixels est conseillée.
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 des votes lorsque vous le trouvez satisfaisant.
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. Fermez votre application WhatsApp, rouvrez-le, puis testez. Pas besoin d'effacer le cache, et PAS BESOIN DE EFFACER LES DONNÉES.
Des bénédictions à tous!
Dans mon cas, l'ajout de la balise méta ci-dessous a résolu le problème. J'utilisais du contenu arabe et je devais l'ajouter pour que l'image apparaisse sur WhatsApp:
<meta property='og:locale' content='ar_AR' />
Remarque: Si vous utilisez du contenu anglais, inutile d'ajouter cette balise META car l'anglais est la valeur par défaut.
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"/>
Seules 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
La façon la plus simple d'expérimenter pour moi était d'utiliser CodeSandbox en procédant comme suit:
- Créez une application Vanilla avec https://codesandbox.io/s/
- Modifiez vos balises META en conséquence dans le fichier
index.html - Enregistrez le fichier (
ctrl+s) qui jetterait 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)
- Apporter des modifications aux balises méta
- Modifier l'URL - ajoutez un seul caractère à la fin de l'URL. Cela supprime la "prévisualisation en cache précédente"
Devis requis
Assurez-vous d'avoir TOUJOURS des guillemets et des guillemets fermants, car WhatsApp est sensible à cela. Votre exemple ci-dessus n'a pas de devis de clôture pour votre og:description.
Il vous suffit de taper le message avec "http: //" au début. Par exemple: http://www.google.com affiche la vignette, mais www.google.com no.