Montrant Vignette pour le lien dans WhatsApp || og:image meta-tag ne fonctionne pas
Essayé de suivre cette question : Fournir une photo pour whatsapp lien de partage
J'ai créé une simple page HTML avec la base Facebook metatags:
<!--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 Facebook linter valider correctement et dans Facebook il montre parfaite, mais quand j'essaie de faire partager par WhatsApp, l'image ne montre pas.
Je suis en train de l'essayer sur WhatsApp sur Android
→ C'est l'URL de l'Exemple de la Page web
- Étrange... l'og:image devrait être suffisant. J'ai essayé de partager un lien youtube et je peux voir correctement la miniature dans mon chat. J'ai essayé de voir si Youtube a l'aide de plus de balises meta sans la découverte de quelque chose de spécial.... sommes-nous face à un problème de cache?
- excusez-moi , mais vous êtes sûr que c'est encore possible ? avez-vous déjà vu ailleurs avant ? avez-vous un lien qui disposent d'un pouce sur whatsapp ?
- il est possible d'augmenter la hauteur et la largeur???? dans Whatsapp
- J'ai utilisé de la même balise sa ne fonctionne pas merci de guide stackoverflow.com/questions/47236739/...
- Puis-je référencer une Image sans appel HTTP, comme dans
content="./images/logo.png"
?
InformationsquelleAutor JesuLopez | 2014-08-03
Vous devez vous connecter pour publier un commentaire.
Je trouve que vous avez besoin pour ajouter
itemprop
à laog:image
balise meta, ont la taille d'image définie à256x256
et aussi il ne ferait pas de mal à ajouter lessite_name
,type
etupdated_time
propriétés 🙂Vous pouvez voir ces balises meta dans l'action, par exemple Google Maps.
Après avoir changé vos balises meta-tags, vous devrez peut-être attendre un certain temps pour d'éventuelles caches de mise à jour.
Vous pouvez déboguer/vérifier l'Open Graph meta tags de la Facebook Débogueur
Si vous pouvez voir tous vos balises là, puis les sites/applications où vos tags ne s'affichent pas correctement peut avoir des exigences différentes pour l'Open Graph tags.
EDIT:
Si vous allez spécifier une image par un
HTTP-Secure
lien, vous devez utiliserog:image:secure_url
au lieu deog:image
.EDIT2:
Vous devez également spécifier
og:type
que c'est l'un des quatre de la base de paramètres requis.<meta property="og:type" content="website" />
devrait vous obtenir dans la bonne direction.itemprop="image"
. Message d'erreur:Cannot GET /logos/logo_512.png
property="og:image:secure_url"
au lieu deproperty="og:image"
app_id
utiliser ceci:<meta property="fb:app_id" content="xxxxxxxxxxxxxxx" />
Remplacer le xxxxxxxxxxxxxxx avec l'id par défaut que vous recevez de FB. Il est également important d'ajouter:<meta property="og:url" content="http://yoousite.com" />
J'ai eu le même problème et le problème était la taille de l'image. Whatsapp ne supporte pas l'image avec une taille supérieure à 300 KO.
Donc la propriété la plus importante d'affichage de l'image sur Whatsapp est:
Et la taille de l'image à afficher doit être inférieur à 300 KO
J'ai trouvé la solution ici Whatsapp lien aperçu posté le 2 Mars 16
Et vous devriez voir le travail Avant et après screenshoot
Il y a deux type de code. Première meta og:image à l'intérieur <head>
Vignette schéma de schema.org à l'intérieur de <body>
Espérons que cette aide. Merci.
J'ai également confrontés à ce problème
Enfin, je l'ai résolu
Mon image de la propriété
Assurez-vous que dans le nom de l'image il n'y a pas d'espace, si vous avez deux mots, puis utilisez le trait de soulignement signe
Après avoir passé des mois à essayer de comprendre cela, j'ai finalement résolu le problème. Voici ma solution:
Copie de la ci-dessus, collez-le dans la tête de site web.
FERMER votre Whatsapp app, re-ouvrir, PUIS le tester.
Pas besoin de vider le cache, et PAS BESOIN D'EFFACER les DONNÉES.
Bénédictions à tous!
Effacer vos données whatsapp et cache (ou utiliser un autre whatsapp) !
Android Phone : Go to SETTINGS > APPS > Application List > WhatsApp > Storage and Clear Data.
Alors le résultat : avant et après compensation des données et le cache de WhatsApp
Je ne connais pas le nombre minimum de balises meta doivent travailler sur whatsapp, trouvé cela en quelque part, et cela a fonctionné pour moi parfaitement. Remarque: la résolution de l'Image est de 256 x 256.
En réponse à https://stackoverflow.com/a/35785393/1518500
Essayer la version mise à jour pour schema.org
ou en utilisant le json-ld format de google
Pour tous toujours à avoir ce problème et que pour moi aucune des solutions élaborées.
J'ai eu le même problème.
L'image montrait correctement dans tous les autres partager les boîtes de dialogue.
Seulement WhatsApp ne pourrais pas afficher l'image, même si l'facebook débogueur a l'og:image balise correctement.
La solution qui a fonctionné pour moi:
Je suis à l'aide de firebase. Pour le contenu téléchargé dans leur stockage, vous obtenez un lien de Téléchargement unique avec un support de jeton. Quelque chose comme:
https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/?alt= " media&token=YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY
J'ai utilisé cette URL dans l'og:image de la balise meta. Il a travaillé pour Facebook, etc., mais il semble que WhatsApp ne pourrais pas télécharger l'image à partir de cette URL.
Au lieu de cela, vous devez inclure l'image dans votre répertoire de projet et d'utiliser ce lien pour les jo:balise d'image. Maintenant il fonctionne correctement dans WhatsApp trop.
Avant (pas de travail dans WhatsApp, mais facebook etc.)
Après (qui travaille maintenant dans toutes les boîtes de dialogue testés, y compris WhatsApp)
Espère que ça peut aider certains d'entre vous 🙂
J'ai documenté la parfaite solution dans le détail ici - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html
Il y a sept étapes à faire pour obtenir le parfait aperçu.
Titre : Ajouter un mot-Clé riche de titre à votre page web avec un maximum de 65 caractères.
Meta Description : Décrivez votre page web dans un maximum de 155 caractères.
og:title : 35 caractères Maximum.
og:url : lien Complet à votre adresse de la page web.
og:description : un Maximum de 65 caractères.
og:image : Image(JPG ou PNG) de taille de moins de 300 KO et la dimension minimale de 300 x 200 pixels est conseillé.
favicon : Une petite icône de dimensions 32 x 32 pixels.
Dans la page mentionnée ci-dessus, vous avez un cahier des charges, la limite de caractères et exemples de balises. Ne upvote une fois que vous trouvez qu'il est satisfaisant.
J'espère que cela aide:
Prendre note de la imgURL qui doit être hébergé à partir d'un même domaine, ou il ne sera pas affiché sur whatsapp. J'ai essayé de charger une url à partir d'amazon, aperçu de l'image n'est pas de travail.
Dans mon cas, l'ajout de l'en-dessous de la balise meta résolu le problème. J'ai été à l'aide de contenus en arabe et avait pour ajouter cet pour faire apparaître l'image sur WhatsApp:
Remarque: Si vous utilisez des contenus en anglais, pas besoin d'ajouter cette balise meta puisque l'anglais est la valeur par défaut.
Vous avez seulement besoin de taper le message avec "http://" au début. Par exemple:
http://www.google.com montre la miniature de l'image, mais http://www.google.com no.
Open Graph de données: