115 votes

Comment utiliser la balise méta "og" (Open Graph) pour le partage sur Facebook ?

Facebook récupère toutes les photos de mon site.

Je veux partager une seule photo qui se trouve sur cette page.

J'ai entendu parler de la og mais je ne sais pas comment la mettre.

350voto

CarlosPinedaT Points 1591

Utilisez :

<!-- For Google -->
<meta name="description" content="" />
<meta name="keywords" content="" />

<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="application-name" content="" />

<!-- For Facebook -->
<meta property="og:title" content="" />
<meta property="og:type" content="article" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />

<!-- For Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />

Remplissez le contenu =" ... " en fonction du contenu de votre page.

Pour plus d'informations, visitez 18 balises Meta que chaque page Web devrait avoir en 2013 .

41voto

Lix Points 27516

Facebook utilise ce que l'on appelle le Protocole Open Graph pour décider des éléments à afficher lorsque vous partagez un lien. L'OGP examine votre page et tente de décider du contenu à afficher. Nous pouvons donner un coup de main et en fait dire à Facebook ce qu'il faut retenir de notre page.

La façon dont nous le faisons est avec og:meta tags.

Les balises ressemblent à ceci -

  <meta property="og:title" content="Stuffed Cookies" />
  <meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" />
  <meta property="og:description" content="The Turducken of Cookies" />
  <meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">

Vous devrez placer ces balises méta ou d'autres balises similaires dans l'arborescence du site Web de l'entreprise. <head> de votre fichier HTML. N'oubliez pas de remplacer les valeurs par les vôtres !

Pour plus d'informations, vous pouvez lire tout ce qui concerne l'utilisation de ces métabalises par Facebook dans sa documentation. Voici l'un des tutoriels qui s'y trouvent. https://developers.facebook.com/docs/opengraph/tutorial/


Facebook met à notre disposition un petit outil très pratique pour nous aider à gérer ces balises méta - vous pouvez utiliser la balise Débogueur pour voir comment Facebook voit votre URL, et il vous dira même s'il y a des problèmes avec celle-ci.

Il convient de noter qu'à chaque fois que vous modifiez les balises méta, vous devez faire passer l'URL par la fonction Débogueur afin que Facebook efface toutes les données relatives à votre URL qui sont mises en cache sur ses serveurs.

28voto

user3929348 Points 11

J'ai construit un outil pour la génération de méta. Il préconfigure les entrées pour Facebook, Google+ et Twitter, et vous pouvez l'utiliser gratuitement ici : http://www.groovymeta.com

Pour répondre un peu plus à la question, OG (Open Graph) fonctionnent de la même manière que les balises méta, et doivent être placées dans la section HEAD de votre fichier HTML. Voir Les meilleures pratiques de Facebook pour plus d'informations sur la manière d'utiliser efficacement les balises OG.

2voto

Niraj Shah Points 5590

Il suffit d'ajouter le og:image et le faire pointer vers la bonne image.

Vous devriez lire le Protocole OpenGraph pour plus de détails.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X