Comment utiliser la balise meta 'og' (Open Graph) pour le partage Facebook

118

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

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

J'ai entendu parler de la ogbalise meta, mais je ne sais pas comment la mettre.

facebook-opengraph meta Vignesh Babu MD
la source

Réponses:

355

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 18 balises Meta que chaque page Web devrait avoir en 2013 .

CarlosPinedaT
la source

Savez-vous si la authorbalise doit avoir le nom de l'auteur ou un lien vers une URL de profil?

tobek

Je pense que les deux sont possibles. Si vous souhaitez que votre image de profil se trouve à gauche de votre message sur la page de recherche Google, vous devez fournir le lien vers votre profil google +.

jurihandl

balise meta authorsignifie auteur du site Web ou auteur de l'article actuel (exemple d'utilisation sur l'article de blog)?

LuiGi

Est-ce une bonne exécution? Google / Facebook / Twitter ne trouvera-t-il aucune erreur à ce sujet?

Jeromie Devera

1) Facebook lira la balise <meta name = "author"> et l'affichera dans l'aperçu lorsque quelqu'un partage une page 2) Facebook prend désormais en charge <meta property = "article: author"> (détails sur giannopoulos.net/ 2015/06/20 /… ) et affichera un lien vers votre profil Facebook (si vous avez effectivement mis un lien vers celui-ci dans l'article: auteur) 3) Google recherche désormais des données riches sous la forme de ce qu'il appelle des "Rich Snippets" ( developer.google.com/structured-data )

MarkG

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

Nous faisons cela avec des og:metabalises.

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

Pour plus d'informations, vous pouvez tout savoir sur la manière dont Facebook utilise ces balises méta dans sa 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 à gérer ces balises méta - vous pouvez utiliser le débogueur pour voir comment Facebook voit votre URL, et il vous dira même s'il y a des problèmes avec elle.

Une chose à noter ici est que chaque fois que vous apportez une modification aux balises méta, vous devrez à nouveau alimenter l'URL via le débogueur afin que Facebook efface toutes les données mises en cache sur leurs serveurs à propos de votre URL.

Lix
la source

Je vois des balises html dans ma description, savez-vous comment contourner ce problème?

Neil

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 OGbalises balises (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. Consultez les meilleures pratiques de Facebook pour plus d'informations sur l'utilisation efficace des balises OG.

Louis Otto
la source

Merci @Mogsdad J'ai développé ma réponse en conséquence.

Louis Otto

Lien cassé, malheureusement!

Vincent Sels