Logo

Open Graph est un langage open source développé par Facebook afin de structurer les métadonnées des pages d’un site. Open Graph est fortement utilisé pour indiquer à Facebook et à la plupart des autres réseaux sociaux (Google+, pinterest, LinkedIn…) les contenus qu’ils doivent afficher lors d’un partage, à savoir généralement l’url de la page, le titre de la page, la description de la page et l’image de la page. Open Graph est également utilisé pour les API de Facebook permettant de développer des applications sur le réseau social. Il existe dans ce cadre un vocabulaire Open Graph spécifique pour les livres. Seul Twitter n’utilise pas l’Open Graph et propose son propre vocabulaire.

Les balises Open Graph sont identifiables par le prefixe og: Elles se situent dans l’entête des pages web.

Balises Open Graph obligatoires

  • og:title Pour indiquer le titre de la page qui sera reprise sur les réseaux sociaux lors d’un partage. Elle peut être différente du titre que vous avez attribué à votre page.
  • og:type Le type de contenu. S’il s’agit d’un livre le type sera book qu’on indique ainsi : <meta property="og:type" content="book" /> Pour facebook pour son API : <meta property="og:type" content="books.book" />
  • og:image L’url de l’image. Quand l’article n’a pas d’image il faut indiquer une image par défaut. Cela évite que s’affiche une image qui n’est pas liée au contenu lors d’un partage.
  • og:url L’url de la page.

Balises Open Graph optionelles pour les livres

  • og:description Permet d’indiquer un texte court décrivant votre page, votre livre
  • book:author Pour l’auteur du livre
  • book:isbn Pour l’ISBN
  • book:release_date Pour la date de sortie
  • book:tag Pour les thématiques du livre

Balises Open Graph des livres pour Facebook API

Facebook propose des options plus fines de l’Open Graph dans son espace développeur pour ses applications.

En voici certaines :

  • <meta property="og:type" content="books.author" /> Quand le type de la page est un auteur
  • <meta property="books:rating:value" content="Sample Rating: value" /> ou <meta property="books:rating:scale" content="Sample Rating: scale" /> pour noter les livres
  • Et celles vues plus haut où book: est remplacé par books:

Twitter Cards

Twitter propose son propre vocabulaire pour identifier les contenus d’une page lors d’un partage. Twitter reprend certains éléments de l’Open Graph mais si vous souhaitez par exemple qu’une image s’affiche dans votre tweet lors d’un partage vous devez utiliser les Twitter Cards. Il en existe plusieurs types que vous pouvez retrouver sur le site de twitter, la plus basique est la "Summary Card" :

  • <meta name="twitter:card" content="summary" /> ou pour une plus grande image <meta name="twitter:card" content="summary_large_image">
  • <meta name="twitter:site" content="@username" />
  • <meta name="twitter:title" content="Titre" />
  • <meta name="twitter:description" content="Description" />
  • <meta name="twitter:image" content="Url de l’image" />

Open Graph et Twitter Card sur WordPress

Si vous utilisez WordPress vous pouvez utiliser Yoast SEO qui génère automatiquement les balises Open Graph et Twitter Card des pages que vous publiez.

Pour promouvoir son livre

L’Open Graph et les Twitter Card sont donc très utiles pour bien formater les pages de vos livres et vos articles promotionnels. Ils évitent que des mauvaises images soient associées avec vos articles, en particulier lors de partage par des personnes extérieures. Ils permettent d’améliorer la visibilité de vos contenus sur les réseaux sociaux.

Ca permet également à Facebook de mieux comprendre de quel type de contenu il s’agit et il peut le classer dans son fil d’actualité en conséquence.

C’est pourquoi il est conseillé d’utiliser l’Open Graph et les Twitter Card.