web-dev-qa-db-fra.com

Facebook Post Link Image

Lorsqu'une personne publie un lien sur facebook, un script analyse généralement ce lien pour y rechercher des images et affiche une vignette rapide à côté de la publication. Cependant, pour certaines URL (y compris la mienne), FB ne semble rien avoir, malgré le nombre d'images qu'il contient.

J'ai lu que FB préfère la balise rel "image_src" pour l'image que l'utilisateur souhaite spécifier, mais cela ne génère pas non plus cette vignette pour mon site.

Mon URL va directement au DNS, et n'est pas transmise, donc je ne pense pas que cela puisse être le problème non plus.

Quelqu'un at-il une idée quant à pourquoi FB ne peut pas générer de vignettes à partir de mon site?

95
RudeBoyRock

Le moyen le plus simple est simplement une balise de lien:

<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" />

Toutefois, vous pouvez ajouter d'autres éléments à votre site pour le rendre plus convivial pour les réseaux sociaux:

Ouvrir les tags graphiques

Les balises Open Graph sont des balises que vous ajoutez au <head> de votre site Web pour décrire l'entité représentée par votre page, qu'il s'agisse d'un groupe, d'un restaurant, d'un blog ou de quelque chose d'autre.

Une balise Open Graph ressemble à ceci:

<meta property="og:tag name" content="tag value"/> 

Si vous utilisez des balises Open Graph, les six suivantes sont requises:

  • og:title - Le titre de l'entité.
  • og:type - Le type d'entité. Vous devez sélectionner un type dans la liste des types Open Graph.
  • og:image - L'URL d'une image qui représente l'entité. Les images doivent avoir au moins 50 pixels sur 50 pixels. Les images carrées donnent de meilleurs résultats, mais vous êtes autorisé à utiliser des images trois fois plus larges que grandes.
  • og:url - L'URL canonique et permanente de la page représentant l'entité. Lorsque vous utilisez des balises Open Graph, le bouton J'aime permet de publier un lien vers le og:url au lieu de l'URL dans le code du bouton J'aime.
  • og:site_name - Nom lisible par l’homme pour votre site, par exemple "IMDb".
  • fb:admins ou fb:app_id - Liste séparée par des virgules des identifiants Facebook des administrateurs de la page ou d'un identifiant d'application de la plate-forme Facebook. Au minimum, n'incluez que votre propre identifiant Facebook.

Vous trouverez plus d'informations sur les balises Open Graph et des informations sur l'administration de votre page dans la documentation du protocole Open Graph.

http://developers.facebook.com/docs/reference/plugins/like

119
WyrdNEXUS

Je sais que cette question est ancienne, mais j’ai récemment traité exactement le même problème et j’ai tourné dessus pendant quelques semaines. Plusieurs recherches sur Google ont permis de trouver beaucoup d'informations utiles, mais la plupart d'entre elles étaient centrées sur les tags Open Graph, que je ne souhaitais pas utiliser. Il s'avère que mon site a eu de multiples problèmes, mais voici quelques bases.

  1. Comme l'a dit EightyEight, assurez-vous que votre code HTML est valide - il en va de même pour votre code javascript et votre code côté serveur (PHP, ASP, etc.). J'ai eu une petite erreur PHP dans un morceau de code qui s'exécutait en tant qu'appel séparé au serveur depuis la page principale. En raison d'un certain nombre de coïncidences bizarres, ce code générait une erreur 500 - mais UNIQUEMENT pour IE6 et des moteurs d'analyse stricte comme le validateur W3C et le robot d'exploration de pages Facebook. Le problème n'apparaissait pas dans les navigateurs modernes (Chrome 4, FF 3.5, IE 8, etc.), Je ne l'ai pas vu tout de suite, mais des clients plus âgés/plus stricts montraient les 500 à chaque fois et c'était la raison principale pour laquelle FB n'explorait pas notre page (alors que tout le reste semblait correct).

  2. En ce qui concerne la réponse de Randy, il a raison de dire que Facebook conservera une ancienne copie en cache de votre page longtemps après l'avoir mise à jour. FB affirme que cela n’est maintenu que pendant 24 heures, mais j’ai vécu beaucoup plus de temps que cela. FORTUNATELY, FB a publié son outil "URL Linter" qui vous montrera un aperçu de la façon dont votre page s'affichera lorsqu'elle sera partagée sur un FB, et. Il forcera FB à mettre à jour instantanément le cache de votre page. C'était un outil de sauvetage. Vous pouvez le trouver à http://developers.facebook.com/tools/lint/

  3. En ce qui concerne l'outil Linter d'URL, sachez que chaque variante d'une URL est mise en cache séparément sur Facebook. Par conséquent, "www.example.com" n'est pas identique à "exemple.com". De plus, la capitalisation unique est également stockée. Par conséquent, "ExampleOne.com" n'est pas identique à "exempleone.com". (Cela a conduit à un lot de confusion entre mon client et moi-même quand il m’a semblé que le cache avait été mis à jour parfaitement et que le client affirmait ne pas voir les mises à jour. Il se trouve que je regardais exampleone.com et que j'avais utilisé Linter pour mettre à jour la mémoire cache, mais qu'ils examinaient exempleOne.com que je n'avais pas soumis à Linter. En conséquence, j'ai fini par soumettre quelques variantes de l'URL à Linter, juste pour couvrir les bases.)

  4. Le conseil de WyrdNEXUS d'utiliser la balise de lien image_src est très pertinent. Cela vous permet de vous assurer que FB gratte la meilleure image possible pour votre page. Il existe différentes directives sur les spécifications du fichier image, mais j'ai utilisé avec succès une image carrée de 128 pixels et une image de 130 x 97 l'a également été. Voici la documentation officielle de Facebook de http://developers.facebook.com/docs/reference/plugins/like/ :

    Les images doivent avoir au moins 50 pixels sur 50 pixels. Les images carrées donnent de meilleurs résultats, mais vous êtes autorisé à utiliser des images trois fois plus larges que grandes.

    Évidemment, FB redimensionnera une grande image pour vous, mais vous obtiendrez presque toujours de meilleurs résultats si vous la redimensionnez vous-même au préalable.

  5. En ce qui concerne le lien de Mike Cooper vers l'article eHow, évitez d'utiliser l'étape 1 dans cet article. C’était un conseil valable lors de la rédaction de l’article et de la publication du lien par Mike, mais il est maintenant préférable d’utiliser l’outil URL Linter pour prévisualiser l’affichage de votre page lors du partage. En utilisant Linter, FB ne mettra pas en cache une copie (potentiellement) incorrecte de la page avant que vous ne puissiez la modifier.

61
OneRuler

Utilisez le linteur facebook disponible ici. http://developers.facebook.com/tools/lint/

Cela vérifiera votre lien et récupérera toutes les images. cela efface également tout ancien cache.

Ou essayez ceci - https://developers.facebook.com/tools/debug

11
mohamed azher

Pour changer le titre, la description et l'image, nous devons ajouter des balises méta sous la balise head.

ÉTAPE 1: Ajouter des balises méta sous la balise head

<html>
<head>
<meta property="og:url" content="http://www.test.com/" />
<meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
<meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
<meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />

ÉTAPE SUIVANTE: Cliquez sur le lien ci-dessous https://developers.facebook.com/tools/debug

Ajoutez votre URL dans la zone de texte (par exemple, http://www.test.com/ ) où vous avez mentionné les balises. Cliquez sur le bouton DEBUG.

C'est fait.

Vous pouvez vérifier ici https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

Dans l'URL ci-dessus, votre lien vers votre site Web

PRENDRE PLAISIR !!!!

11
Gaurav123
6
Mike Cooper

Le code HTML du site est-il valide? Exécutez-le via service de validation w3c .

2
EightyEight

En fait, si vous avez déjà essayé de relier cette page sur Facebook AVANT d’ajouter le lien "image_src", Facebook continuera à utiliser l’ancienne copie en cache et ne verra même pas vos modifications. Essayez de modifier l'URL en supprimant ou en ajoutant le "www", ou dupliquez votre page pour la tester.

2
Randy

J'ai remarqué que Facebook ne prend pas les vignettes des sites Web s'ils commencent par https, est-ce que c'est peut-être votre cas?

1
raRaRa

avait le même problème et a compris que ma balise de fermeture de tête était au mauvais endroit

1
Diego

Essayez d'utiliser quelque chose comme ça:

<link rel="image_src" href="http://yoursite.com/graphics/yourimage.jpg" /link>`

Semble fonctionner correctement sur Firefox tant que vous utilisez un chemin complet vers votre image.

Le problème, c'est qu'il est décalé verticalement vers le bas pour une raison quelconque. L'image est de 200 x 200 comme recommandé quelque part j'ai lu.

0
user2494810

Vieille question, mais récemment, il me semblait que je rencontrais le même problème avec des images miniatures de mon lien qui n'apparaissaient pas dans les mises à jour de statut sur Facebook. Je poste pour de nombreux clients et c'est relativement nouveau.

FB ne semble plus aimer les longues URL. Si vous utilisez un raccourci d’URL tel que goo.gl ou bitly.com, la vignette de votre lien/publication apparaîtra dans la mise à jour de votre FB.

0
karen kouf