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

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:

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.

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

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/

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.

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.

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.