Comment «Facebook Publisher» sélectionne-t-il l'image, le titre et le contenu d'un site Web partagé?

12

Il s'agit d'une question sur Facebook Publisher . Lorsque je partage un lien, Facebook récupère du texte, le titre une image du site et crée un aperçu pour l'utilisateur. L'utilisateur peut ensuite modifier l'aperçu, choisir parmi plusieurs miniatures différentes, puis l'afficher sur son profil Facebook.

Voici une capture d'écran pour illustrer le point:

Capture d'écran de Facebook

Comment l'application Publisher récupère-t-elle les images et le texte du lien? Existe-t-il des applications similaires qui fonctionnent pour d'autres applications Web populaires, les applications Google, les blogs Wordpress, etc.?

J'ai posé une question similaire il y a quelques mois, et il semble que Facebook utilise oEmbed , mais il semble que oEmbed n'incorpore que du contenu. J'ai également lu que oEmbed ne fonctionne qu'avec des fournisseurs oEmbed. L'éditeur Facebook fonctionne avec presque tous les sites Web.

Stefan Lasiewski
la source
@phwd: Il semble que @Edward parle d'un bug dans son article. Cela fonctionnait jusqu'à "Mais depuis environ deux semaines, ..."
Stefan Lasiewski

Réponses:

10

Facebook utilisera toutes les balises META graphiques ouvertes si elles sont présentes pour le titre, l'image, etc. (par exemple, og: title). La documentation facebook pour Open Graph Protocol explique cela plus en détail:

Le protocole Open Graph définit quatre propriétés requises:

og: title - Le titre de votre objet tel qu'il devrait apparaître dans le graphique, par exemple, "The Rock".

og: type - Le type de votre objet, par exemple, "film". Consultez la liste complète des types pris en charge.

og: image - Une URL d'image qui devrait représenter votre objet dans le graphique. L'image doit mesurer au moins 50 pixels sur 50 pixels et avoir un rapport hauteur / largeur maximal de 3: 1.

og: url - L'URL canonique de votre objet qui sera utilisé comme son ID permanent dans le graphique, par exemple, http://www.imdb.com/title/tt0117500/ .

De plus, nous avons étendu les métadonnées de base pour ajouter deux champs obligatoires pour connecter votre page à Facebook:

og: site_name - Un 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 ID utilisateur Facebook ou d'un ID d'application Facebook Platform qui gère cette page. Il est valide d'inclure à la fois fb: admins et fb: app_id sur votre page.

Il est également recommandé d'inclure la propriété suivante ainsi que ces propriétés en plusieurs parties.

og: description - Une description d'une à deux phrases de votre page.

Je ne sais pas comment ils le font pour les pages sans ces balises. Si vous essayez de dupliquer cette fonctionnalité, ce n'est pas utile, désolé. Mais si vous essayez de vous assurer que vos pages s'affichent dans Publisher comme vous le souhaitez, ce sera peut-être le cas.

Vous pouvez également utiliser le débogueur d'opengraph facebook, qui fournira des informations sur votre aperçu ainsi que (super pratique) de mettre à jour leur lien en cache si vous apportez des modifications. Sinon, vous pouvez modifier un lien que vous souhaitez partager et les modifications ne s'afficheront pas pendant des jours:

https://developers.facebook.com/tools/debug

Marc
la source
Ils utiliseront les balises META si vous n'avez pas fourni les balises graphiques ouvertes. Les balises OG sont plus utiles lorsque vous aimez une page Web, car elle crée une page Facebook puis pour le site / URL
Umair Jabbar
4

Pour dire à Facebook quel texte et quelles images récupérer, vous devez ajouter des méta-clés spécifiques dans la tête de votre page.

    <meta name="title" content="title" />
    <meta name="description" content="description " />
    <link rel="image_src" href="thumbnail_image" / >

J'ai posté ses détails ici http://umairj.com/2010/10/modify-how-the-shared-item-appears-on-facebook/

Umair Jabbar
la source
1
C'est intéressant, et ces balises META sont une pratique recommandée pour de nombreux webmasters (cela aide les moteurs de recherche, etc.). Cependant, regardez la source de flowingdata.com/2010/09/15/… . Cette page n'a pas ces balises et n'a pas non plus de <link rel=balise image image.
Stefan Lasiewski
@ Stefan, c'est une très bonne question, eh bien ce que FB fait, s'il ne trouve pas les balises META des nouvelles balises OpenGraph OG, il récupère toutes les images et montre une partie du texte depuis le début du html de cette page . Ainsi, l'utilisateur a le choix pour les images mais le texte est le même. De plus, seules les images affichées sont conformes aux critères spécifiés par Facebook. le ratio d'aspet
Umair Jabbar
1

Ce qui a fonctionné pour moi, c'était de placer l'image miniature souhaitée sur la page juste après la balise et de la rendre trop petite pour la voir.

<img src="imagename.jpg" width="1" height="1" />

Je ne l'ai pas testé avec la hauteur 0 et la largeur 0 mais cela fonctionnera probablement toujours .. Cela ne garantit pas que l'utilisateur sélectionnera cette image ..

AUSSI, il semble que Facebook met en cache les vignettes de votre page et ne vérifie pas toujours les nouvelles .. essayez d'ajouter ceci à une autre page de votre site et vous verrez que cela fonctionne.

J'espère que cela t'aides.

Daniel Bernal
la source
0

Facebook utilise des balises META sur la page que vous partagez pour déterminer l'image, le titre et la description à afficher lors de la publication d'un lien. La syntaxe de la balise META suit la spécification OpenGraph de Facebook .

Les balises META les plus importantes que vous devez définir sont:

  • <meta property="og:title" content="The title of the sharing preview" />
  • $<meta property="og:description" content="The first few lines of content below the title" />
  • <meta property="og:image" content="http://site.com/your-image-1200x630px.jpg" />

Bien sûr, cela ne fonctionne que si vous avez un contrôle total sur le site que vous partagez. Si vous partagez un lien externe (comme un article d'actualité), vous n'avez pas accès à leur site et ne pouvez donc pas modifier les balises META. J'utilise ShareKit.io , qui vous permet de modifier le titre, la description et l'image de tout lien que vous partagez sans avoir à jouer avec les balises META.

AndroidGuy
la source
-1

Je dirais que la réponse à votre question est assez complexe, et aussi probablement un secret commercial pour Facebook. Leur capacité à scanner une URL et à récupérer le contenu / média pertinent à afficher dans le flux d'actualités est l'une des choses qui rendent leur service si unique et utile à la personne ordinaire qui utilise Facebook.

Cela étant dit, je dirais que l'algorithme ne serait pas terriblement complexe, il utilise probablement beaucoup des mêmes règles que Google utilise pour extraire le contenu des sites Web (ils ont quelques détails généraux publiés ici ). Je pense que le pouvoir derrière l'éditeur vient de beaucoup d'essais et d'erreurs et de tests par les ingénieurs de Facebook.

Sam Day
la source
1
Je suis totalement en désaccord!
Umair Jabbar