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 2020

Quelques étapes sont nécessaires pour obtenir l'aperçu parfait des icônes WhatsApp, Twitter, Facebook et des signets pour les PC et les appareils mobiles. Si vous aimez lire, allez sur ogp.me - mais assurez-vous de lire les étapes 1 à 6 de cette réponse pour obtenir le meilleur aperçu de WhatsApp.

Remarque: certaines applications ou sites Web utilisent le cache ou même stockent l'aperçu du site Web dans leur base de données. Cela signifie que lorsque vous testez votre lien dans WhatsApp ou Facebook par exemple, vous ne verrez probablement aucune différence tout de suite. L'utilisation d'un autre lien (une autre page) fera l'affaire. Mais dès que vous utilisez ce lien une fois, cette section «Veuillez noter» recommence.

É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: title

Maximum 35 caractères

<meta property="og:title" content="short title of your website/webpage" />

Étape 4: og: url

Lien complet vers l'adresse actuelle de la page Web

<meta property="og:url" content="https://www.example.com/webpage/" />

Étape 5: og: description

65 caractères maximum

<meta property="og:description" content="description of your website/webpage">

Étape 6: og: image

Image (JPG ou PNG) d'une taille inférieure à 300 Ko et de dimensions minimales de 300 x 200 ^*

<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">

^* @RichDeBourke me l'a mentionné, mais apparemment, WhatsApp a augmenté sa taille d'image maximale (dimensions ainsi que la taille du fichier). J'ai fait quelques tests: cela ne fonctionne pas systématiquement à chaque fois sur tous les appareils. J'ai testé des images de 2.x Mb et même cela semblait fonctionner 9/10 fois. <300 Ko est l'approche la plus sûre, mais vous devriez être bien en utilisant des images plus grandes à partir du 18-02-2020. Je recommanderais cependant de garder la taille du fichier en dessous de 2 Mo. Et jetez définitivement votre image via TinyPNG ou tout autre algorithme de compression d'image si vous ne l'avez pas déjà fait.

Si vous avez terminé les étapes ci-dessus, vous pouvez maintenant voir votre aperçu dans WhatsApp! Cependant, tenez compte de la section «Veuillez noter» ci-dessus.

Étape 7: og: type

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

Les paramètres régionaux de la ressource. Vous pouvez également utiliser og: locale: alternative si vous disposez d'autres traductions linguistiques.

Si vous ne spécifiez pas og: locale, la 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 obtenir le meilleur support Facebook, lisez ceci .

Étape 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 de l'audio / vidéo. Facebook et Twitter par exemple partagent très bien les vidéos. Lire ogp.me .

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 .

Si le problème persiste, lisez également la réponse à 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érez 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 aux dimensions 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 cela 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 y a sept étapes à suivre pour obtenir l'aperçu parfait.

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

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

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 d'une 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 un vote positif une fois que vous le trouvez satisfaisant.

Je voudrais attirer l'attention sur le fait qu'un simple <meta property="og:image" content="image.png" />, comme suggéré quelque part ci-dessus, ne fonctionne pas pour moi (cela me tenait en fait dans une boucle depuis des semaines maintenant). Ce qui fonctionne est soit une URL absolue:
<meta property="og:image" content="https://domainname.com/image.png" />

ou en commençant par une barre oblique (si l'image est dans le répertoire racine):
<meta property="og:image" content="/image.png" />

(J'aurais ajouté ceci en commentaire, mais je ne suis pas encore autorisé à le faire. Les modérateurs se sentent libres de le déplacer si cela est plus approprié.)

J'ai essayé de le faire moi-même et j'ai ajouté toutes les bonnes balises meta:

<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 n'ai pas encore pu voir l'image lors du partage de mon lien dans WhatsApp.

J'ai découvert que WhatsApp faisait également une sorte de mise en cache de l'image et des informations d'url, je ne sais pas pendant combien de temps.

Pour vérifier que j'ai inséré les bonnes balises, j'ai juste essayé une URL différente, par exemple: http://domain.com au lieu de http://www.domain.com .

j'espère que cela aide quelqu'un d'autre.

Après avoir travaillé dans un bugg, j'ai découvert que dans IOS, les éléments de HEAD pouvaient arrêter la recherche WhatsApp du og: image / og: description / name = description. Alors 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>

Je recommanderais de toujours jeter un œil à https://developers.facebook.com/tools/debug/sharing pour valider vos propriétés, car Facebook change souvent ses politiques, sa conformité et son API.

Si vous travaillez avec des bots Messenger ou d'autres applications FB, vous aurez peut-être besoin de la propriété fb: app_id pour que les images de lien fonctionnent dans Whatsapp. Plus d'informations sur le site Web des développeurs Facebook. https://developers.facebook.com/docs/sharing/webmasters

J'ai eu le même problème, voici à résoudre.

Il devrait apparaître si vous ajoutez meta og: image

Le problème est que WhatsApp n'affiche pas d'image si vous tapez sans http: // et se termine par / Par exemple, il affiche l'image et la description si vous tapez http://google.com/ mais pas avec google.com

J'espère que ça aide quelqu'un.

Je voudrais ajouter une réponse à ce fil pour mentionner spécifiquement lequel des fils ci-dessus m'a aidé à résoudre le problème et l'ordre dans lequel ils peuvent être suivis pour bien comprendre la cause première et la résoudre une fois pour toutes:

J'ai pu obtenir mon aperçu riche tout en partageant le lien sur les réseaux sociaux avec cette solution.

J'ai suivi diverses options dans ce fil et ci-dessous sont les plus proches de la bonne réponse et elles ont toutes contribué au résultat final:

1. Balises requises (balise principale sur laquelle se concentrer - og: image)
2. Paramètres d'image
3. Outil qui aidera certainement
4. Comment donner correctement le chemin de l'image
5. Cause fondamentale et solution

Nous espérons que cela permettra à quelqu'un d'économiser le temps nécessaire pour faire défiler et trouver le bon ensemble de réponses et l'effort requis pour tous les essais et erreurs.

J'ai essayé plusieurs suggestions sous ce fil et à partir de mes recherches externes mais c'était un tout autre problème pour moi. Mon instruction spécifique pour utiliser une image indiquée par la balise og: image était remplacée par les balises graphiques ouvertes fournies par le plugin Jetpack. vous pouvez trouver ma réponse détaillée ici . Cependant, j'ai pensé qu'il valait la peine d'ajouter les étapes en bref sur ce fil plus suivi. J'espère que cela aide quelqu'un.

Le débogueur de partage Facebook m'a aidé à identifier la cause racine et à partir de là, j'ai suivi ces étapes:

1. Déboguez votre site Web à l'aide du débogueur ci-dessus. Tapez simplement l'URL et appuyez sur débogage. Cela devrait vous donner une liste d'avertissements et une fois que vous faites défiler les sections de balises graphiques ouvertes, vous pourrez voir les valeurs qui sont récupérées pour votre site Web. Celui sur lequel se concentrer est la balise og: image .
2. Faites défiler vers le bas jusqu'au lien "Voir exactement ce que notre grattoir voit pour votre URL" et recherchez la balise og: image pour trouver le méchant dans votre histoire.
3. Maintenant, choisissez simplement les moyens de supprimer un remplacement qui se produit. Dans mon cas, j'ai trouvé la fonction suivante utile. Il change l'image par défaut utilisée chaque fois que Jetpack ne peut pas déterminer une image à utiliser.

Il change l'image par défaut utilisée chaque fois que Jetpack ne peut pas déterminer une image à utiliser

function custom_jetpack_default_image() {
    return 'YOUR_IMAGE_URL';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );

Je dois ajouter que les paramètres d'image tels que minimum 300px x 200px et taille <300 Ko sont recommandés. Et s'il vous plaît suivez ces instructions si ces instructions générales ne fonctionnent pas pour vous, car il est fort probable que votre problème soit similaire au mien. Aussi, parfois, la solution la plus simple peut être simplement de supprimer le plugin (à condition de vérifier que vous pouvez vous en passer).

À la fin, vous devriez pouvoir voir quelque chose comme -

J'espère que cela t'aides.

NS

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 le dit la documentation Facebook , si vous spécifiez la taille og: image, elle sera récupérée rapidement au lieu de manière asynchrone sinon.

PNG est recommandé pour le format d'image. Un minimum de 600 x 600 pixels est recommandé.

Si vous voulez avoir une image à côté d'une URL de votre site Web que quelqu'un a partagée sur WhatsApp, vous devez mettre une méta-étiquette sur la page où l'URL renvoie, comme ceci:

<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>

J'ai eu le même problème, ajouté og: image et cela n'a pas fonctionné alors que l'URL se terminait par un signe barre oblique (/). Après avoir supprimé la barre oblique de l'URL - l'image est chargée .. Bug intéressant ...

Les actions suivantes ont aidé dans mon cas.

Mettre l'image sous le même hôte .

<meta property="og:url" content="https://www.same-host.com/whatsapp-image.png" />

Passer l'image nécessaire à WhatsApp spécifiquement en détectant son agent utilisateur par la sous-chaîne principale, exemple

WhatsApp/2.18.380 A

Attendre quelques secondes avant d'appuyer sur le bouton d'envoi, afin que WhatsApp ait le temps de récupérer l'image et la description à partir des métadonnées og.

Même après ces essais. Les images de mon site Web ont été récupérées quelques fois et parfois non. Après validation avec https://developers.facebook.com/tools/debug/sharing

réalisé que mon framework django (python) rend le chemin de l'image relativement. J'ai dû apporter des modifications au chemin de l'image avec l'URL complète. (y compris http: //). puis ça a commencé à fonctionner

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

<meta property="og:image" content="https://www.link.com/facebook.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />


<meta property="og:image" content="https://www.link.com/whatsapp.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />

https://roei.stream/2018/11/18/ideal-open-graph-image-size-for-whatsapp-link-share/

https://css-tricks.com/essential-meta-tags-social-media/