Le protocole Open Graph

Publié par admin le

Introduction

Le protocole Open Graph permet à toute page web de devenir un objet dans un graphe social. Par exemple, il est utilisé sur Facebook pour permettre à toute page web d’avoir les mêmes fonctionnalités que n’importe quel autre objet sur Facebook.

Bien que de nombreuses technologies et schémas différents existent et pourraient être combinés entre eux, il n’existe pas de technologie unique qui fournisse suffisamment d’informations pour représenter de manière fidèle toute page web au sein du graphe social. Le protocole Open Graph s’appuie sur ces technologies existantes et donne aux développeurs une seule chose à mettre en œuvre. La simplicité pour les développeurs est un objectif clé du protocole Open Graph qui a informé de nombreuses décisions de conception technique.

Métadonnées de base

Pour transformer vos pages web en objets de graphe, vous devez ajouter des métadonnées de base toyour votre page. Nous avons basé la version initiale du protocole sur leRDFa ce qui signifie que vous placerez des balises supplémentaires <meta> dans la <head> de votre page web. Les quatre propriétés requises pour chaque page sont :

  • og:title – Le titre de votre objet tel qu’il doit apparaître dans le graphique, par exemple, « The Rock ».
  • og:type – Le type de votre objet, par exemple, « vidéo.movie ». Selon le type que vous spécifiez, d’autres propriétés peuvent également être requises.
  • og:image – Une URL d’image qui doit représenter votre objet dans le graphe.
  • og:url – L’URL canonique de votre objet qui sera utilisée comme son ID permanent dans le graphe, par ex, « https://www.imdb.com/title/tt0117500/ ».

À titre d’exemple, voici le balisage du protocole Open Graph pour The Rock surIMDB :

<html prefix="og: https://ogp.me/ns#"><head><title>The Rock (1996)</title><meta property="og:title" content="The Rock" /><meta property="og:type" content="video.movie" /><meta property="og:url" content="https://www.imdb.com/title/tt0117500/" /><meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />...</head>...</html>

Métadonnées facultatives

Les propriétés suivantes sont facultatives pour tout objet et sont généralementrecommandées :

  • og:audio – Une URL vers un fichier audio pour accompagner cet objet.
  • og:description – Une description d’une à deux phrases de votre objet.
  • og:determiner – Le mot qui apparaît avant le titre de cet objet dans une phrase. Une énumération de (a, an, the, «  », auto). Si auto est choisi, le consommateur de vos données doit choisir entre « a » ou « an ».La valeur par défaut est «  » (blanc).
  • og:locale – La locale dans laquelle ces balises sont marquées.Du format language_TERRITORY. La valeur par défaut est en_US.
  • og:locale:alternate – Un tableau d’autres locales dans lesquelles cette page est disponible.
  • og:site_name – Si votre objet fait partie d’un site web plus vaste, le nom qui doit être affiché pour le site global. par ex, « IMDb ».

    • og:video – Une URL vers un fichier vidéo qui complète cet objet.

Par exemple (saut de ligne uniquement à des fins d’affichage):

<meta property="og:audio" content="https://example.com/bond/theme.mp3" /><meta property="og:description" content="Sean Connery found fame and fortune as the suave, sophisticated British agent, James Bond." /><meta property="og:determiner" content="the" /><meta property="og:locale" content="en_GB" /><meta property="og:locale:alternate" content="fr_FR" /><meta property="og:locale:alternate" content="es_ES" /><meta property="og:site_name" content="IMDb" /><meta property="og:video" content="https://example.com/bond/trailer.swf" />

Le schéma RDF (en tortue) se trouve à l’adresse ogp.me/ns.

Propriétés structurées

Certaines propriétés peuvent avoir des métadonnées supplémentaires qui leur sont attachées.Celles-ci sont spécifiées de la même manière que les autres métadonnées avec property etcontent, mais la property aura en plus :.

La propriété og:image possède quelques propriétés structurées facultatives :

  • og:image:url – Identique à og:image.
  • og:image:secure_url – Une url alternative à utiliser si la page web nécessiteHTTPS.
  • og:image:type – Un type MIME pour cette image.
  • og:image:width – Le nombre de pixels de largeur.
  • og:image:height – Le nombre de pixels de hauteur.
  • og:image:alt – Une description de ce que contient l’image (pas une légende). Si la page spécifie un og:image, elle doit spécifier og:image:alt.

Un exemple d’image complète:

<meta property="og:image" content="https://example.com/ogp.jpg" /><meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /><meta property="og:image:type" content="image/jpeg" /><meta property="og:image:width" content="400" /><meta property="og:image:height" content="300" /><meta property="og:image:alt" content="A shiny red apple with a bite taken out" />

La balise og:video possède les mêmes balises que og:image. Voici un exemple:

<meta property="og:video" content="https://example.com/movie.swf" /><meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" /><meta property="og:video:type" content="application/x-shockwave-flash" /><meta property="og:video:width" content="400" /><meta property="og:video:height" content="300" />

La balise og:audio n’a que les 3 premières propriétés disponibles(puisque la taille n’a pas de sens pour le son) :

<meta property="og:audio" content="https://example.com/sound.mp3" /><meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" /><meta property="og:audio:type" content="audio/mpeg" />

Tableaux

Si une balise peut avoir plusieurs valeurs, il suffit de mettre plusieurs versions de la même balise<meta> sur votre page. La première balise (de haut en bas) est privilégiée lors des conflits.

<meta property="og:image" content="https://example.com/rock.jpg" /><meta property="og:image" content="https://example.com/rock2.jpg" />

Mettez les propriétés structurées après avoir déclaré leur balise racine. Chaque fois qu’un autre élément racine est analysé, cette propriété structurée est considérée comme terminée et une autre est lancée.

Par exemple :

<meta property="og:image" content="https://example.com/rock.jpg" /><meta property="og:image:width" content="300" /><meta property="og:image:height" content="300" /><meta property="og:image" content="https://example.com/rock2.jpg" /><meta property="og:image" content="https://example.com/rock3.jpg" /><meta property="og:image:height" content="1000" />

Cela signifie qu’il y a 3 images sur cette page, la première image est 300x300, celle du milieu a des dimensions non spécifiées, et la dernière est 1000px de hauteur.

Types d’objets

Pour que votre objet soit représenté au sein du graphique, vous devezspécifier son type. Cela se fait à l’aide de la propriété og:type:

<meta property="og:type" content="website" />

Lorsque la communauté s’accorde sur le schéma d’un type, celui-ci est ajouté à la liste des types globaux. Tous les autres objets du système de types sont desCURIE de la forme

<head prefix="my_namespace: https://example.com/ns#"><meta property="og:type" content="my_namespace:my_type" />

Les types globaux sont regroupés en verticales. Chaque verticale possède son propre espace de nom. Les og:type valeurs d’un espace de nom sont toujours préfixées par l’espace de nom puis un point.Ceci afin de réduire la confusion avec les types d’espace de nom définis par l’utilisateur qui comportent toujours des deux-points.

Musique

  • URI d’espace de nom : https://ogp.me/ns/music#

og:type valeurs :

music.song

  • music:duration – nombre entier >=1 – La durée de la chanson en secondes.
  • music:album – tableau music.album -L’album dont est issue cette chanson.
  • music:album:disc – nombre entier >=1 -Sur quel disque de l’album se trouve cette chanson.
  • music:album:track – integer >=1 -De quelle piste est cette chanson.
  • music:musician – profile array -Le musicien qui a fait cette chanson.

music.album

  • music:song – music.song – La chanson de cet album.
  • music:song:disc – integer >=1 – La même chose que music:album:disc mais en sens inverse.
  • music:song:track – integer >=1 -Le même que music:album:track mais en sens inverse.
  • music:musician – profile -Le musicien qui a fait cette chanson.
  • music:release_date – datetime – La date de sortie de l’album.

music.playlist

  • music:song – Identiques à celles de la musique.album
  • music:song:disc
  • music:song:track
  • music:creator – profile – Le créateur de cette playlist.

music.radio_station

  • music:creator – profil – Le créateur de cette station.

Vidéo

  • URI de l’espace de nom : https://ogp.me/ns/video#

og:type values:

video.movie

  • video:actor – tableau de profils -Acteurs dans le film.
  • video:actor:role – chaîne de caractères – Le rôle qu’ils ont joué.
  • video:director – tableau de profil -Directeurs du film.
  • video:writer – tableau de profil -Écrivains du film.
  • video:duration – entier >=1 – La durée du film en secondes.
  • video:release_date – datetime – La date de sortie du film.
  • video:tag – string array -Mots de balises associés à ce film.

video.episode

  • video:actor – Identique à la vidéo.movie
  • video:actor:role
  • video:director
  • video:writer
  • video:duration
  • video:release_date
  • video:tag
  • video:series – video.tv_show -La série à laquelle appartient cet épisode.

video.tv_show

Une série télévisée à plusieurs épisodes.Les métadonnées sont identiques à video.movie.

video.other

Une vidéo qui n’appartient à aucune autre catégorie.Les métadonnées sont identiques à video.movie.

No Vertical

Il s’agit d’objets définis globalement qui ne rentrent tout simplement pas dans une verticale mais qui sont pourtant largement utilisés et acceptés.

og:type valeurs:

article – URI de l’espace de nom : https://ogp.me/ns/article#

  • article:published_time – datetime – Quand l’article a été publié pour la première fois.
  • article:modified_time – datetime – Quand l’article a été modifié pour la dernière fois.
  • article:expiration_time – datetime – Quand l’article est périmé après.
  • article:author – tableau de profils -Les rédacteurs de l’article.
  • article:section – chaîne – Un nom de section de haut niveau. Par exemple, Technologie
  • article:tag – tableau de chaînes -Mots balises associés à cet article.

book – URI de l’espace de nom : https://ogp.me/ns/book#

  • book:author – tableau de profils – Qui a écrit ce livre.
  • book:isbn – string -L’ISBN
  • book:release_date – datetime – La date de sortie du livre.
  • book:tag – tableau de chaînes -Les mots balises associés à ce livre.

profile – URI de l’espace de nom : https://ogp.me/ns/profile#

  • profile:first_name – Chaîne de caractères – Nom normalement donné à un individu par un parent ou choisi par lui-même.
  • profile:last_name – Chaîne de caractères – Nom hérité d’une famille ou d’un mariage et par lequel l’individu est communément connu.
  • profile:username – Chaîne de caractères – Une courte chaîne unique pour les identifier.
  • profile:gender – enum(male, female) – Leur sexe.

website – URI de l’espace de nom : https://ogp.me/ns/website#

Aucune autre propriété que celles de base.Toute page web non marquée doit être traitée comme og:type site web.

Types

Les types suivants sont utilisés lors de la définition des attributs dans le protocole Open Graph.

Type Description Literals
Boolean Un Boolean représente une valeur vraie ou fausse true, faux, 1, 0
DateTime Une DateTime représente une valeur temporelle composée d’une date (année, mois, jour) et d’une composante temporelle facultative (heures, minutes) ISO 8601
Enum Un type constitué d’un ensemble borné de valeurs de chaînes constantes (membres d’énumération). Une valeur de chaîne de caractères qui est un membre de l’énumération
Float Un nombre à virgule flottante signé de 64 bits Tous les littéraux qui sont conformes aux formats suivants :
1.234
-1,234
1,2e3
-1,2e3
7E-10
Integer Un nombre entier signé de 32 bits. Dans de nombreuses langues, les entiers de plus de 32 bits deviennent des flottants, c’est pourquoi nous limitons le protocole Open Graph pour une utilisation multi-langue facile. Tous les littéraux conformes aux formats suivants :
1234
-123
String Une séquence de caractères Unicode Tous les littéraux composés de caractères Unicode sans caractères d’échappement
URL Une séquence de caractères Unicode qui identifie une ressource Internet. Toutes les URL valides qui utilisent les protocoles https:// ou https://

Discussion et support

Vous pouvez discuter du protocole Open Graph dans le groupe Facebook ou sur la liste de diffusion des développeurs.Il est actuellement consommé par Facebook (voir leur documentation), Google (voir leur documentation), etmixi.Il est publié par IMDb, Microsoft, NHL, Posterous, Rotten Tomatoes,TIME, Yelp, et beaucoup d’autres.

Mise en œuvre

La communauté open source a développé un certain nombre d’analyseurs et d’outils de publication. Faites savoir au groupe Facebook si vous avez aussi construit quelque chose de génial !

  • Facebook Object Debugger -Le parseur et débogueur officiel de Facebook
  • Outil de test Google Rich Snippets -Support du protocole Open Graph dans des verticaux et des moteurs de recherche spécifiques.
  • Validateur et générateur de balisage PHP -Validateur d’entrée OGP 2011 et générateur de balisage en objets PHP5
  • Php Consumer -une petite bibliothèque pour accéder aux données du protocole Open Graph en PHP
  • OpenGraphNode en PHP -un parseur simple pour PHP
  • PyOpenGraph -.une bibliothèque écrite en Python pour analyser les informations du protocole Open Graph à partir de sites web
  • OpenGraph Ruby -Gemme Ruby qui analyse les pages web et extrait le balisage du protocole Open Graph
  • OpenGraph pour Java -petite classe Java utilisée pour représenter le protocole Open Graph
  • RDF ::RDFa::Parser -Perl RDFa parser qui comprend le protocole Open Graph
  • Plugin WordPress -Plugin WordPress officiel de Facebook, qui ajoute les métadonnées Open Graph aux sites alimentés par WordPress.
  • Plugin WordPress alternatif OGP -Un plugin WordPress simple et léger qui ajoute les métadonnées Open Graph aux sites alimentés par WordPress.

Catégories : Articles

0 commentaire

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Articles similaires

Articles

Qu’est-ce que SAP S/4 HANA Cloud ? Un regard plus approfondi

Début février 2017, SAP a annoncé une version cloud public de son produit phare – la suite ERP S/4 HANA – comme un élément clé de son initiative de transformation numérique. Le produit, appelé SAP Lire la suite…

Articles

241 Noms de chiens britanniques

Noms de chiens féminins  » Noms de chiens britanniquesNoms de chiens masculins  » Noms de chiens britanniques Grande liste de 241 noms de chiens britanniques pour s’adapter à n’importe quel bouledogue anglais, épagneul breton, Yorkshire Lire la suite…

Articles

Trouver des appartements pour les chasseurs d’appartements handicapés

Équipe de rédaction du Guide des appartements Publié : 21 juin 2017 Mis à jour : 16 août 2019 Trouver un appartement qui soit accessible et confortable est plus difficile pour les chasseurs d’appartements handicapés Lire la suite…