Image du lien de publication Facebook

95

Lorsque quelqu'un publie un lien sur Facebook, un script scanne généralement ce lien à la recherche d'images et affiche une vignette rapide à côté de la publication. Cependant, pour certaines URL (y compris la mienne), FB ne semble rien saisir, bien qu'il y ait un certain nombre d'images sur cette page.

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 n'imagine pas que cela pourrait être le problème non plus.

Quelqu'un a-t-il une idée de la raison pour laquelle FB ne peut pas générer de vignettes à partir de mon site?

facebook thumbnails GEOCHET
la source
Cela aiderait si vous nous donniez un lien vers votre site (ou un autre qui ne fonctionne pas) - cela pourrait provoquer des idées.
Nick Fortescue
Ici vous pouvez voir comment cela fonctionne! Je le construis en utilisant PHP + jQuery. Le code source est disponible au téléchargement. Espérons que vous apprécierez! lab.leocardz.com/facebook-link-preview-php--jquery
Leonardo Cardoso
et si vous voulez faire de même sur google plus, voici le meilleur lien référencé que j'ai pu trouver: stackoverflow.com/questions/7985398
...
duplicata possible de Comment Facebook Sharer sélectionne-t-il les images?
dcorking le

Réponses:

119

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

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

Mais il y a d'autres choses que vous pouvez ajouter à votre site pour le rendre plus convivial pour les médias sociaux:

Balises de graphique ouvertes

Les balises Open Graph sont des balises que vous ajoutez à <head>votre site Web pour décrire l'entité que votre page représente, qu'il s'agisse d'un groupe, d'un restaurant, d'un blog ou 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 mesurer au moins 50 pixels sur 50 pixels. Les images carrées fonctionnent mieux, mais vous êtes autorisé à utiliser des images jusqu'à trois fois plus larges que hautes.
  • og:url- L'URL canonique permanente de la page représentant l'entité. Lorsque vous utilisez des balises Open Graph, le bouton J'aime publie un lien vers la og:urlplace de l'URL dans le code du bouton J'aime.
  • og:site_name - Un nom lisible par l'homme pour votre site, par exemple "IMDb".
  • fb:adminsou fb:app_id- Une liste séparée par des virgules des identifiants Facebook des administrateurs de page ou d'un identifiant d'application de la plateforme Facebook. Au minimum, n'incluez que votre propre identifiant Facebook.

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

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

WyrdNEXUS
la source
5
J'ai reçu cette erreur de l'outil de charpie. All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification.. Just an fyi
Trevor
J'ai ajouté des balises og dans mon code et lorsque je l'ai testé avec l'outil de débogage d'objet og de facebook, il me montre des informations correctes comme j'ai enregistré dans les balises og, mais lorsque j'essaye de lier la page sur mon compte fb, cela montre le copie mise en cache uniquement. Combien de temps fb conserve la copie en cache? Existe-t-il un autre moyen de vider la copie mise en cache?
KAsh
Juste pour vous le faire savoir, la seule façon d'ajouter une image à un message lorsque vous utilisez AppLinks ( applinks.org ) dans l'application Facebook est d'utiliser la balise <link>, en utilisant une balise <meta> avec og: image ne fonctionnera PAS .
emerino
Ceci a une liste de types, etc., et d'autres informations utiles.
Wilf
61

Je sais que cette question est ancienne, mais j'ai récemment traité exactement du même problème et j'en ai fait le tour pendant quelques semaines. Plusieurs recherches sur Google ont permis d'obtenir de nombreuses informations utiles, mais la plupart étaient axées sur les balises Open Graph, que je ne souhaitais pas utiliser. Il s'avère que mon site a eu plusieurs problèmes, mais voici quelques notions de base.

  1. Comme l'a dit EightyEight, assurez-vous que votre code HTML est valide - et il en va de même pour votre code javascript et côté serveur (PHP, ASP, etc.). J'ai eu une petite erreur PHP dans un morceau de code qui s'exécutait comme un 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 les moteurs d'analyse stricts comme le validateur W3C et le robot d'exploration de page Facebook. Le problème n'apparaissait pas dans les navigateurs modernes (Chrome 4, FF 3.5, IE 8, etc.) donc je ne l'ai pas vu tout de suite, mais les clients plus anciens / plus stricts affichaient le 500 à chaque fois et c'était la principale raison pour laquelle FB n'était pas ne pas explorer 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 prétend que cela ne dure que 24 heures, mais j'ai vécu des temps beaucoup plus longs que cela. Heureusement, FB a publié son outil "URL Linter" qui vous montrera un aperçu de la façon dont votre page apparaîtra lorsqu'elle sera partagée sur FB, et il forcera FB à mettre à jour instantanément son cache de votre page. C'était un outil de sauvetage. Vous pouvez le trouver sur http://developers.facebook.com/tools/lint/

  3. En ce qui concerne l'outil URL Linter, sachez que chaque variante d'une URL est mise en cache séparément sur Facebook, donc "www.example.com" n'est pas la même chose que "example.com". De plus, une capitalisation unique est également stockée, de sorte que "ExampleOne.com" n'est pas le même que "exampleone.com". (Cela a conduit à beaucoup de confusion entre mon client et moi-même lorsqu'il m'a semblé que le cache avait été mis à jour correctement et que le client a affirmé qu'il ne voyait pas les mises à jour. Il s'avère que je regardais exampleone.com et que j'avais utilisé Linter pour mettre à jour le cache, mais ils regardaient exampleOne.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 parfait. Cela vous permet d'être sûr que FB récupère la meilleure image possible pour votre page. Il existe différentes directives sur les spécifications que le fichier image devrait avoir, mais j'ai utilisé avec succès une image carrée de 128 pixels et j'ai également vu une image de 130x97 passer. Voici la documentation officielle de Facebook sur http://developers.facebook.com/docs/reference/plugins/like/ :

    Les images doivent mesurer au moins 50 pixels sur 50 pixels. Les images carrées fonctionnent mieux, mais vous êtes autorisé à utiliser des images jusqu'à trois fois plus larges que hautes.

    É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 de cet article. C'était un conseil valable lorsque l'article a été écrit et lorsque Mike a publié le lien, mais il est maintenant préférable d'utiliser l'outil URL Linter pour prévisualiser comment votre page apparaîtra lors du partage. En utilisant Linter, vous ne forcerez pas FB à mettre en cache une (potentiellement) mauvaise copie de la page avant d'avoir une chance de la modifier.

OneRuler
la source
J'avais du mal pendant des jours et je n'avais pas ma vignette correctement mise à jour. L'outil Facebook Linter a immédiatement résolu mon problème - Facebook a mis à jour son cache! Hourra!
Hady
Merci beaucoup pour cet outil de linter. Certains articles de mon blog affichaient des images, d'autres non en dépit du fait qu'il s'agissait d'un site basé sur une base de données. Mettre l'URL de la page incriminée dans l'URL Linter l'a forcé à mettre en cache l'image! Woo-HOO!
kristina childs
4
Lint Tool a changé de nom. maintenant c'est juste le débogage : developer.facebook.com/tools/debug - d'après tout ce que je peux dire, c'est la version tl; dr de tout cela: il suffit d'utiliser l'outil!
cregox
11

Pour changer le titre, la description et l'image, nous devons ajouter des balises meta 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." />

PROCHAINE ÉTAPE: 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, u = votre lien vers votre site Web

PRENDRE PLAISIR !!!!

Gaurav123
la source
Veuillez ne pas publier exactement la même réponse à plusieurs questions: soit cela ne convient pas à tous, soit les questions sont des doublons qui doivent être signalés / fermés comme tels.
kleopatra
Bonjour Kleopatra, je pensais poster la réponse pour aider les autres. Je pense que votre argument est tout à fait valable. Je vais prendre soin de ce. Thanks Friend
Gaurav123
@ Gaurav123 le lien de test est mort. Cependant, je l'ai vérifié en m'envoyant un message sur Facebook. Merci beaucoup pour la réponse très utile!
gsamaras
2

En fait, si vous avez déjà essayé de lier 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.

Excité
la source
1

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

raRaRa
la source
1

a eu le même problème et a compris que mon tag de fermeture de tête était au mauvais endroit

Diego
la source
0

Ancienne question, mais récemment, j'ai semblé rencontrer le même problème avec les images miniatures de mon lien ne figurant 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 URL longues - si vous utilisez un raccourcisseur d'URL tel que goo.gl ou bitly.com, la vignette de votre lien / publication apparaîtra dans votre mise à jour FB.

Karen Kouf
la source
0

Essayez d'utiliser quelque chose comme ceci:

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

Semble fonctionner très bien sur Firefox tant que vous utilisez un chemin complet vers votre image.

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

user2494810
la source
J'ai l'intention de publier le code d'une balise de lien qui n'a pas posté parce que je suis stupide. Désolé.
user2494810
-1

Si vous avez utilisé un plugin pour le référencement, vérifiez d'abord les paramètres de votre plugin SEO.Ensuite, découvrez le paramètre Noindex si Activer le média pour Noindex, puis désactivez-le.

Milon Patowary
la source