Fournir une image pour le partage de lien WhatsApp


186

Comment pouvons-nous inclure une image sur notre site Web à afficher dans WhatsApp lorsque nous partageons un lien comme celui-ci?

entrez la description de l'image ici


s'il s'agit de plusieurs pages pour différentes personnes, vous pouvez également essayer shareocial.in
Tirthraj Rao

1
Vous pouvez tester le dom de vos pages sur iframely.com/embed
Piotr Kowalski

Testez comment Facebook le rend: développeurs.facebook.com
tools

Réponses:


368

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 .


11
Notez que cela peut ne pas fonctionner si votre site s'exécute sur https avec un certificat auto-signé. Vérifié sur Facebook et WhatsApp
Indraraj

2
@Indraraj merci pour le partage, cela peut également être trouvé dans la documentation de Facebook pour les développeurs
Derk Jan Speelman

2
<meta charset = "utf-8"> <meta http-equiv = "X-UA-Compatible" content = "IE = edge"> <meta name = "viewport" content = "width = device-width, initial-scale = 1, maximum-scale = 1, user-scalable = no "> <title> </title> <meta name =" description "content =" "> <meta property =" og: title "content =" "/> <meta property = "og: url" content = "" /> <meta property = "og: description" content = ""> <meta property = "og: image" content = "mappointer.png"> <meta property = "og: image: width" content = "" /> <meta property = "og: image: height" content = "" /> J'ai mis toutes les balises ci-dessus.
BALU KB

2
@DerkJanSpeelman maintenant ça marche bien. Merci. J'ai oublié de conserver la dimension de l'image à 300 * 200.
BALU KB le

1
@DerkJanSpeelman Je ne comprends pas, ce site: jornada.unam.mx/ultimas/2018/06/19/… a plus de 35 caractères et l'aperçu de l'image fonctionne. où puis-je trouver la spécification correcte?
elios264

19

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


3
+1 pour les informations de limite de taille, mais ce n'est pas correct. L'application Whatsapp récupère les 300 000 premiers octets (en-tête Http: "Range: bytes = 0-299999")
Adriano Tornatore

7
Comment les gens connaissent-ils la limite de taille de 300 000 octets ou 300 Ko (petit k)? Je recherchais une source sur Internet , mais n'a pas pu trouver cette limite de taille sur le site WhatsApp ou sur le site Web du Protocole Open Graph ogp.me .
ʕ ᵔᴥᵔ ʔ

url_image doit être servie https
tito.icreativos

12

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!


l'image ne s'affiche pas pour moi, avez-vous une autre solution?
Keyur Shah

1
C'est également possible avec des images plus grandes! Dans la réponse de @Cedriga , les images ne peuvent pas dépasser 300 Ko, il a raison.
Derk Jan Speelman

1
Ce n'est certainement pas le nom. Et je peux confirmer que JPG fonctionne.
workwise

1
Le lien vers WhatsApp n'est pas ce qui nous manque, je crois et oui, comme @workwise l'a dit, le PNG et le JPG fonctionnent bien.
aashima

9

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.


Réponse parfaite à ce que je recherche C'est très imp: og:image : Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised.
Amol

Ces paramètres sont cruciaux et je pense que l'accent devrait être mis sur la balise og: image. La limite de taille de 300 Ko et le minimum de 300 px x 200 px sont recommandés. N'oubliez pas que les dimensions sont en pixels.
aashima

7

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


Je pense qu'il vaut mieux donner le chemin qualifié que de recourir à des chemins relatifs. La suggestion de votre réponse a fonctionné pour moi.
aashima

Je pense que vous devez utiliser une image .jpg, une image .png ne fonctionnera tout simplement pas avec WhatsApp.
Andrew Voir le

4

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.


Fonctionne bien pour moi .. Merci!
Abhishek Kumbhani

4

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>

Mes 2 cents et j'espère que cela aide quelqu'un. Dans mon cas, il est twitter:imagevide, ce qui empêche WhatsApp d'obtenir og:image. Essayer de supprimer d'autres <meta>balises pourrait aider à déboguer les fonctions de partage social.
Sunny Pun

Je suppose que WhatsApp lit de haut en bas et s'arrête après avoir trouvé quelque chose d'inattendu (div, twitter vide: image). L'idée ici était de dire aux gens de mettre la méta og:imageau-dessus et de s'assurer qu'elle est lue
Kim Sant

3
Pourquoi placeriez-vous un <div> dans la section <head>?
Tomas Gonzalez

J'ai travaillé pour une entreprise qui gratte et "remodèle" votre contenu Web avec une belle UX, SEO, etc. Si vous grattez la tête du client et ajoutez juste les métadonnées og: ci-dessous, cela ne fonctionne pas. J'ai aimé faire de la rétro-ingénierie mentale de la façon dont WhatsApp traite le HTML, sans plus faire de débogage de yala yala yala!
Kim Sant

4

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


De nombreuses personnes utilisent Yoast SEO dans Wordpress. Il ajoute og: image sur les articles uniquement si vous ajoutez l'image facebook dans l'onglet Yoast SEO sur chaque article.
Braconnot_P

2

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.


2

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.


2

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

J'espère que cela t'aides.

NS


1

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


Dans mon cas, j'ai 1200 * 628 pixels d'image, ce qui signifie que je dois fournir comme <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="628" />Ai-je raison? Avons-nous besoin de donner la largeur et la hauteur de l'image (cette image a) dans les balises ou bien pour tout ce que les pilxels d'image feraient Si nous mentionnons la largeur et la hauteur dans les balises méta, cela s'affichera dans ces dimensions? Veuillez clarifier @moreirapontocom
siluveru kiran kumar

0

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

3
Salut! J'ai essayé cela et fonctionne parfaitement avec le débogueur d'URL de Facebook, mais le message WhatsApp n'affiche toujours pas ma vignette. Voici quelqu'un d'autre, qui a le même problème: stackoverflow.com/questions/25100917/…
Lepi

@AkhilSekharan, la bonne réponse peut être trouvée ici: stackoverflow.com/a/32154775/501206
stevenw00

Merci Steve. J'ai déjà essayé de cette façon et suis arrivé à la conclusion que WhatsApp dispose d'une liste blanche interne de domaines pouvant afficher la vignette. Par exemple youtube
Akhil Sekharan

2
Je suis arrivé à la même conclusion ... 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

l'image ne s'affiche pas pour moi, quelqu'un peut-il avoir une solution @Juanjo
Keyur Shah

0

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


0

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.


Si je tape l'URL et j'attends un certain temps, l'aperçu sera ensuite obtenu.Si je clique sur le bouton d'envoi, il s'affiche.Si je tape l'URL et clique sur le bouton d'envoi sans aucun délai (avant de récupérer les informations des balises méta), le l'aperçu ne s'affiche pas.
siluveru kiran kumar

0

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


0

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/

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.