Fournir une image pour le partage de lien WhatsApp
Comment pouvons-nous inclure une image sur notre site Web à afficher dans WhatsApp lorsque nous partageons un lien comme celui-ci?
Normes 2019
Quelques étapes sont nécessaires pour obtenir un aperçu parfait de WhatsApp, Twitter, Facebook et des icônes de signets pour les PC et les appareils mobiles. Si vous aimez lire, allez à ogp.me - mais veillez à lire les étapes 1 à 6 de cette réponse pour obtenir le meilleur aperçu de WhatsApp.
Étape 1: titre
Maximum de 65 caractères
<title>your keyword rich title of the website and/or webpage</title>
Étape 2: description
Maximum de 155 caractères
<meta name="description" content="description of your website/webpage, make sure you use keywords!">
Étape 3: og: titre
35 caractères maximum
<meta property="og:title" content="short title of your website/webpage" />
Étape 4: og: url
Lien complet vers l'adresse de votre page Web
<meta property="og:url" content="https://www.example.com/webpage/" />
Étape 5: og: description
Maximum 65 caractères
<meta property="og:description" content="description of your website/webpage">
Étape 6: 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
<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">
Étape 7: og: tapez
Pour que votre objet soit représenté dans le graphique, vous devez spécifier son type. Voici une liste des types globaux disponibles: http://ogp.me/#types . Vous pouvez également spécifier vos propres types.
<meta property="og:type" content="article" />
Étape 8: og: locale
La localisation de la ressource. Vous pouvez également utiliser og: locale: alter si vous avez d'autres traductions disponibles.
Si vous ne spécifiez pas og: locale, sa valeur par défaut est en_US.
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
Étape 9: Twitter
Pour le meilleur support Twitter, lisez ceci .
Étape 10: Facebook
Pour le meilleur support Facebook, lisez ceci .
Etape 11: favicon
Pour le meilleur support favicon pour tous les navigateurs et appareils, lisez ceci .
Bonus étape 12: vidéo/audio
Il est également possible de partager des fichiers audio/vidéo. Facebook et Twitter par exemple partagent très bien des vidéos. Lire ogp.me .
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.
Si le problème persiste, lisez également la réponse pour cette question similaire
Je suppose qu'il n'y a pas de liste blanche dans WhatsApp, car j'ai trouvé une solution qui a fonctionné pour moi. Faites comme suit. insérer 3 balises META:
<meta property="og:image" content="http://yourimage_with_complete_URL.png"/>
<meta property="og:title" content="Your Title"/>
<meta property="og:description" content="Your description."/>
Votre image doit être au format .png et dimension 600x600px et doit être nommée 'logo-yoursite.png' (Une fois que cela a fonctionné pour moi, JUSTE COMME CELA)
N'oubliez pas d'insérer le lien vers WhatsApp dans votre site Web:
<a href='whatsapp://send?text=Text to send withe message: http://www.yoursite.com'>whatsApp</a>
Faites ceci et vous serez bien fait!
J'ai documenté la solution détaillée parfaite ici - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html Il existe sept étapes à suivre pour obtenir aperçu parfait.
Titre: Ajoutez un titre riche en mots clés sur votre page Web avec un maximum de 65 personnages.
Meta Description: Décrivez votre page Web sur un maximum de 155 personnages.
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: image (JPG ou PNG) de taille inférieure à 300 Ko et minimale une dimension 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 travaillé dans un bug, découvert que dans IOS, éléments dans HEAD pourrait arrêter la recherche WhatsApp de og: image/og: description/name = description. Donc, essayez d'abord de les mettre au-dessus de tout le reste.
Ça ne marche pas
<head>
<div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>
<meta property="og:description" content="description" />
<meta property="og:image" content="http://cdn.some.com/random.jpg" />
</head>
Ce travail:
<head>
<meta property="og:description" content="description" />
<meta property="og:image" content="http://cdn.some.com/random.jpg" />
<div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>
</head>
J'ai aussi essayé de le faire moi-même et j'ai ajouté tous les balises méta appropriées:
<meta property="og:image" itemprop="image" content="image_url" />
<meta property="og:image:url" itemprop="image" content="image_url" />
<meta property="og:image:type" content="image/png" />
mais je ne pouvais pas encore voir l'image lorsque je partageais mon lien dans WhatsApp.
J'ai découvert que WhatsApp fait également une sorte de mise en cache de l'image et des informations d'URL, ne sais pas pour combien de temps.
Pour vérifier que les balises correctes ont été insérées, j'ai simplement essayé différentes URL, par exemple: http://domain.com au lieu de http://www.domain.com .
espérons que cela aide quelqu'un d'autre.
J'ai eu le même problème, voici à résoudre.
Il devrait être visible si vous ajoutez meta og: image
Le problème est que whatsapp n’affichera pas d’image si vous tapez sans http: // et finissez avec /Par exemple, il affiche une image et une description si vous tapez http://google.com/ mais pas avec google.com
J'espère que ça aide quelqu'un.
Vous avez besoin des balises suivantes pour obtenir un aperçu de l'image WhatsApp:
<meta property="og:title" content="Website name" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://url.com/" />
<meta property="og:description" content="Website description" />
<meta property="og:image" content="image.png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="600" />
Comme docs Facebook dit, si vous spécifiez la taille de l'image og: elle sera récupérée rapidement au lieu d'être asynchrone sinon.
Le format PNG est recommandé pour le format d'image. 600x600 pixels au moins est recommandé.
Les actions suivantes ont aidé dans mon cas.
Mettre une image sous le même hôte.
<meta property="og:url" content="https://www.same-Host.com/whatsapp-image.png" />
Passage de l'image nécessaire à WhatsApp en détectant son agent utilisateur en menant une sous-chaîne, exemple
WhatsApp/2.18.380 A
_ {Attente quelques secondes} _ avant d'appuyer sur le bouton d'envoi, WhatsApp aura ainsi le temps de récupérer l'image et la description à partir de métadonnées.
Avait le même problème, ajouté og: image et cela ne fonctionnait pas tant que l'URL se terminait par un signe (/) Après avoir supprimé la barre oblique de l'URL - l'image est chargée .. Bogue intéressant ...
Si vous souhaitez afficher une image à côté d'une URL de votre site Web partagée par une personne partagée sur WhatsApp, vous devez définir une métabalise sur la page où l'URL renvoie, comme ceci:
<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>
Même après ces essais. Les images de mon site Web ont été récupérées à plusieurs reprises et parfois non. Après validation avec https://developers.facebook.com/tools/debug/sharing
a réalisé que mon framework Django (python) rendait relativement le chemin de l'image. J'ai dû modifier le chemin de l'image avec l'URL complète. (y compris http: //). alors il a commencé à fonctionner