web-dev-qa-db-fra.com

Problème de cache de méta-balises Facebook et Whatsapp

Déclaration de problème

Je partage des URL via Facebook et Whatsapp. Ces applications de messagerie ont tendance à générer un "aperçu riche" sous la forme d'une miniature pour le lien partagé. Tout semble bien fonctionner jusqu'à présent

Mais si je modifie le contenu vers lequel pointe mon lien, la prochaine fois que je partagerai le même lien avec une personne complètement différente, les modifications ne seront pas reflétées! Cela s'applique aux miniatures de prévisualisation riches à la fois sur Facebook et sur WhatsApp. La nouvelle personne à qui j'ai envoyé un message voit toujours l'ancienne vignette que l'utilisateur précédent a reçue de moi.

Par exemple, voici un instantané de la vignette rendue par les applications de messagerie après l'envoi d'un message contenant un lien à ALICE:  Facebook thumbnail before editing content

Et voici un instantané d'une autre vignette rendue par les applications de messagerie après avoir modifié le contenu vers lequel mon lien pointe. J'ai changé le nom en Pro3 et le prix en 549 et envoyé un nouveau message à BOB ... mais BOB voit la même prévisualisation en miniature qu'ALICE!  thumbnail after editing content

Pas de bonnes solutions

  1. Changer légèrement l'URL n'est pas une solution qui me convient parfaitement.
  2. L'option de raclage sur le débogueur Facebook ne fonctionnerait que pour cette plate-forme et ce n'est pas un bon ajustement, car elle doit être effectuée manuellement, ce qui signifie qu'elle ne peut pas être mise à l'échelle!

Qu'est-ce que j'ai besoin d'aide avec

Ma solution préférée consiste à utiliser les balises Cache-Control et Pragma (conformément aux normes Web) pour désactiver le cache, mais cela ne semble pas fonctionner.

Voici mon code

 '<title>' + metaData.title + '</title>' +
    '<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">\n' +
    '<meta http-equiv="Pragma" content="no-cache">\n' +
    '<meta http-equiv="Expires" content="0">\n' +
    '<meta http-equiv="refresh" content="0; url=http://my.site.com/my/products">' +
    '<meta name="description" content="' + metaData.description + '" />\n' +
    '<meta property="og:type" content="product" />\n' +
    '<meta property="og:title" content="' + metaData.title + '" />\n' +
    '<meta property="og:description" content="' + metaData.description + '" />\n' +
    '<meta property="og:image" content="' + metaData.imageUrl + '" />\n' +
    '<meta property="og:image:width" content="' + metaData.imgWidth + '"/>\n' +
    '<meta property="og:image:height" content="' + metaData.imgHeight + '" />\n' +
    '<meta property="og:image:alt" content="' + metaData.imgAlt + '"/>' +
    '<meta property="og:url" content="' + metaData.url + '" />\n' +
    '<meta name="og_site_name" property="og:site_name" content="' + metaData.domainName + '" />' +
    '<meta name="keywords" content="' + metaData.keywords + '">' +

Quelqu'un peut-il s'il vous plaît suggérer une autre approche qui vaille la peine d'essayer ou m'aider à corriger tout ce que je peux faire de mal avec l'approche actuelle?

cachingmetadatafacebook-opengraphmeta-tagsopen-graph-protocol
8
Varun Sukheja

Je pense que ce problème est relatif à Facebook et à Whatsapp CDN ...

Apparemment, sur Facebook, vous pouvez utiliser l'outil de débogage et forcer Facebook à actualiser l'URL mise en cache. (peut-être utiliser l'API pour forcer l'actualisation), mais je n'ai pas trouvé cette option sur Whatsapp ...

La meilleure solution est l'une de vos "pas bonnes solutions": 

Changer l'URL

qui oblige implicitement le CDN à re-mettre en cache/mettre à jour le nouveau contenu.

2
A STEFANI

Vous n'avez pas besoin d'ajouter la balise méta no-cache dans vos codes pour contrôler la méthode de mise en cache, c'est en quelque sorte une mauvaise solution liée aux performances en standard (doit mettre en cache ce dont nous avons besoin pour mettre en cache).

Dans ce cas, je pense que vous devriez empêcher les caches juste pour ce dont vous avez besoin seulement. Vous pouvez enfin ajouter le contrôle de version comme horodatage. Quelque chose comme ça:

<meta property="og:image" content="' + metaData.imageUrl + '?v=' + timestamp + '" />\n

Allez-y de cette façon, le fichier sera re-téléchargé chaque fois que votre application sera chargée car, pour le comprendre, le fichier est toujours nouveau. Comme je l'ai dit ci-dessus, ajoutez simplement dans votre balise méta ce dont vous avez besoin pour éviter la mise en cache.

2
Sakata Gintoki

Il n'y a pas de solution simple à cela. Cela revient à contrôler ce que quelqu'un d'autre fait avec votre URL. Vous voulez qu'ils vous grattent chaque fois que vous partagez une URL, mais que le service de partage souhaite mettre en cache des informations, afin que les ressources soient sauvegardées de leur côté pour pouvoir les récupérer.

Alors que peux-tu faire?

  • Vous pouvez changer l'URL quand vous le partagez. J'ajoute généralement un ?_=<epochtim> pour le faire. Cela fonctionnera aussi sur votre URL raccourcie
  • Vous pourriez voir d’un 302 Temporary Redirect décourager le service de mettre l’URL en cache. Donc, dans ce cas, vous aurez l'URL http://site/r/<path> et il devrait en résulter un 302 withhttp: // site/ ? _ = `. Si l’on examine les 302 sites qui décident de recommencer, l’approche pourrait aider

Il n’ya pas de solution infaillible ici et je ne pense pas que l’on puisse en attendre une

1
Tarun Lalwani