web-dev-qa-db-fra.com

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

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

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

J'ai entendu parler de la balise méta og, mais je ne sais pas comment la mettre.

115
Vignesh Babu M D

Utilisation:

<!-- 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 le site 18 balises méta que chaque page Web devrait avoir en 201.

348
CarlosPinedaT

Facebook utilise ce qu'on appelle Open Graph Protocol pour décider des éléments à afficher lorsque vous partagez un lien. L'OGP examine votre page et essaie de décider du contenu à afficher. Nous pouvons donner un coup de main et dire à Facebook ce qu'il faut prendre sur notre page.

Nous procédons de la sorte avec les balises og:meta.

Les tags ressemblent à quelque chose comme ça -

  <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 Meta ou des balises META similaires dans le <head> de votre fichier HTML. N'oubliez pas de substituer les valeurs aux vôtres!

Pour plus d'informations, vous pouvez en savoir plus sur l'utilisation de ces balises méta par Facebook dans leur documentation. Voici l'un des tutoriels à partir de là - https://developers.facebook.com/docs/opengraph/tutorial/


Facebook nous donne un excellent petit outil pour nous aider dans le traitement de ces balises méta. Vous pouvez utiliser le débogueur pour voir comment Facebook voit votre URL et vous avertira même en cas de problème. .

Une chose à noter ici est que chaque fois que vous modifiez les balises méta, vous devez insérer l'URL dans le débogueur de manière à ce que Facebook efface toutes les données mises en cache sur leurs serveurs sur votre URL.

41
Lix

J'ai construit un outil pour la méta génération. 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, les balises 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 Meilleures pratiques de Facebook pour plus d'informations sur l'utilisation efficace des balises OG.

28
Louis Otto