Le Protocole Open Graph ~ Le Max du Web

Introduction

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

Bien qu'il existe de nombreuses technologies et des schémas différents qui peuvent être combinés ensemble, il n'y a pas une seule technologie qui fournit suffisamment d'informations pour représenter richement n'importe quelle page web dans la graphe social. Le protocole Open Graph s'appuie sur ces technologies existantes et donne aux développeurs une chose à mettre en œuvre. La simplicité d'intégration est un objectif clé du protocole Open Graph qui a mis en œuvre beaucoup de décisions de conception technique .

Métadonnées de base

Pour activer vos pages web dans les objets de graphique, vous devez ajouter les métadonnées de base de votre page. Nous avons basé la version initiale du protocole sur RDFa qui signifie que vous allez placer des métas supplémentaires <meta> mots-clés dans le <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 apparaît dans le graphique, par exemple, "La Terre".
og:type - Le type de votre objet, par exemple, "video.movie". Selon le type que vous spécifiez, d'autres propriétés peuvent également être nécessaires.
og:image - Une URL de l'image qui devrait représenter votre objet dans le graphique.
og:url - URL canonique de votre objet qui sera utilisée comme identifiant permanent dans le graphique, par exemple, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgahK5IWrjKXyOi1saGYowarz0TsBgshSdTGT1jWJ73Ukssm_2cGruSQto3agjspQn3livxufCwr2ls5c5GjwToI2n96okC6Zpq61Ax3YSmVPDhqBpq26hL11kNmpsmfwLg_Tzuk6hO5uE/s1600/googlebot2.png".

A titre d'exemple, voici le balisage du protocole Open Graph pour un site :

 <html prefix="og: http://ogp.me/ns#"> <head> <title>La Terre (1996)</title> <meta property="og:title" content="La Terre" /> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="http://webmaxup.blogspot.com" /> <meta property="og:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgahK5IWrjKXyOi1saGYowarz0TsBgshSdTGT1jWJ73Ukssm_2cGruSQto3agjspQn3livxufCwr2ls5c5GjwToI2n96okC6Zpq61Ax3YSmVPDhqBpq26hL11kNmpsmfwLg_Tzuk6hO5uE/s1600/googlebot2.png" /> ... </head> ... </html>

Options des Métadonnées

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

og:audio - URL d'un fichier audio pour accompagner cet objet.
og:description - un à deux phrases de descriptions de de votre objet.
og:determiner - Le mot qui apparaît avant le titre de cet objet dans une phrase. Une énumération de (un, une, le, "", auto). Si auto est choisi, l'utilisateur de vos données doit choisir entre "un" ou "une". Par défaut "" (vide).
og:locale - La locale ces balises sont marqués po de format language_TERRITORY . Défaut est en_US .
og:locale:alternate - Une gamme d'autres endroits locaux où cette page est disponible
og:site_name - Si votre objet fait partie d'un site web grand, le nom qui doit être affiché pour l'ensemble du site. par exemple, "Univers".
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="http://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="http://example.com/bond/trailer.swf" />

Propriétés structurées

Certaines propriétés peuvent avoir des métadonnées supplémentaires qui leur sont rattachés. Ceux-ci sont spécifiées de la même manière que d'autres métadonnées avec property et content , mais la property a pour informations supplémentaires: .

Le og:image des biens a des propriétés structurées en option:

og:image:url - Identique à og:image .
og:image:secure_url - Un autre URL à utiliser si la page Web requiert le protocole HTTPS.
og:image:type - Un type MIME pour cette image.
og:image:width - Le nombre de pixels de large.
og:image:height - Le nombre de pixels en hauteur.

Un exemple complet de l'image:

 <meta property="og:image" content="http://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" />

Le og:video balise a les balises identiques à og:image . Voici un exemple:

 <meta property="og:video" content="http://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" />

Le og:audio tag n'a que les 3 premières propriétés disponibles (depuis la taille n'a pas de sens pour le son):

 <meta property="og:audio" content="http://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 <meta> tag sur votre page.La première balise (de haut en bas) est privilégié lors des conflits.

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

Mettez propriétés structurés après vous déclarez leur balise racine. Chaque fois qu'un autre élément racine est analysée, que la propriété structuré est considéré comme fait et une autre commence.

Par exemple:

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

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

Types d'objet

Pour que votre objet à représenter dans le graphique, vous devez spécifier son type. Ceci est fait en utilisant le og:typebien:

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

Lorsque la communauté est d'accord sur le schéma pour un type, il est ajouté à la liste des types mondiaux. Tous les autres objets dans le système de type sont curies de la forme

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

Les types mondiaux sont regroupés en marchés verticaux. Chaque verticale a son propre espace de noms. Lesog:type de valeurs pour un espace de noms sont toujours précédés de l'espace de noms, puis une période. Cela permet de réduire la confusion avec les types d'espaces de noms définis par l'utilisateur qui ont toujours deux points en eux.

Musique

URI: http://ogp.me/ns/music#

og:type valeurs:

music.song

music:duration - entier > = 1 - La longueur de la chanson en quelques secondes.
music:album - music.album tableau - L'album cette chanson est de.
music:album:disc - entier > = 1 - Quel disque de l'album cette chanson est sur.
music:album:track - entier > = 1 - Quels suivre cette chanson est.
music:musician - profil tableau - Le musicien qui a fait cette chanson.

music.album

music:song - music.song - La chanson sur cet album.
music:song:disc - entier > = 1 - La même chose que music:album:disc mais en sens inverse.
music:song:track - entier > = 1 - La même chose que music:album:track mais en sens inverse.
music:musician - profil - Le musicien qui a fait cette chanson.
music:release_date - datetime - La date de l'album a été libéré.

music.playlist

music:song - identiques à ceux sur music.album
music:song:disc
music:song:track
music:creator - profil - Le créateur de cette playlist.

music.radio_station

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

Vidéo

URI: http://ogp.me/ns/video#

og:type valeurs:

video.movie

video:actor - profil réseau - Les acteurs du film.
video:actor:role - chaîne - Le rôle qu'ils ont joué.
video:director - profil réseau - Administration du film.
video:writer - profil tableau - Écrivains du film.
video:duration - entier > = 1 - La longueur du film en quelques secondes.
video:release_date - datetime - La date à laquelle le film a été libéré.
video:tag - chaîne réseau - mots Tag associés à ce film.

video.episode

video:actor - Identique à video.movie
video:actor:role
video:director
video:writer
video:duration
video:release_date
video:tag
video:series - video.tv_show - Quelle série cet épisode appartient.

video.tv_show

Une émission de télévision plusieurs épisodes. Les métadonnées est identique à video.movie .

video.other

Une vidéo qui n'appartient pas à une autre catégorie. Les métadonnées est identique à video.movie .

Pas Vertical

Ceux-ci sont globalement les objets qui juste ne rentrent pas dans un plan vertical, mais encore sont largement utilisés et convenus définis.

og:type valeurs:

article - espace de noms URI: http://ogp.me/ns/article#

article:published_time - datetime - Lorsque l'article a été publié.
article:modified_time - datetime - Lorsque l'article a été modifiée en dernier.
article:expiration_time - datetime - Lorsque l'article est mis à jour après.
article:author - profil réseau - Les auteurs de l'article.
article:section - chaîne - Un nom de section de haut niveau. Par exemple, la technologie
article:tag - chaîne réseau - mots Tag associé à cet article.

book - espace de noms URI: http://ogp.me/ns/book#

book:author - profil tableau - Qui a écrit ce livre.
book:isbn - chaîne - La ISBN
book:release_date - datetime - La date à laquelle le livre a été publié.
book:tag - chaîne réseau - mots Tag associés à ce livre.

profile - espace de noms URI: http://ogp.me/ns/profile#

profile:first_name - chaîne - Un nom normalement donnée à une personne par un parent ou un auto-choisi.
profile:last_name - chaîne - Un nom hérité d'une famille ou le mariage et par lequel l'individu est communément connu.
profile:username - chaîne - Une chaîne courte unique pour les identifier.
profile:gender - énumération (mâle, femelle) - Leur sexe.

website - espace de noms URI: http://ogp.me/ns/website#

Pas de propriétés supplémentaires autres que ceux de base. N'importe quelle page Web non-balisé doit être traitée comme og:type site.

Types

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

Type	Description	Littéraux
Boolean	Booléenne représente une valeur vrai ou faux	vrai, faux, 1, 0
DateTime	DateTime représente une valeur temporelle composée d'une date (année, mois, jour) et une composante de temps en option (heures, minutes)	ISO 8601
Enum	Un type constituée d'un ensemble borné de valeurs de chaîne constantes (membres de dénombrement).	Une valeur de chaîne qui est un membre de l'énumération
Float	A 64-bit nombre à virgule flottante signé	Tous les littéraux qui sont conformes aux formats suivants: 1.234 -1,234 1.2e3 -1.2e3 7E-10
Entier	Un nombre entier 32 bits signé. Dans de nombreuses langues entiers sur 32 bits deviennent flotteurs, donc nous limiter protocole Open Graph pour une utilisation facile multi-langue.	Tous les littéraux qui sont conformes aux formats suivants: 1234 -123
Chaîne	Une séquence de caractères Unicode	Tous les littéraux composés de caractères Unicode avec aucun des caractères d'échappement
URL	Une séquence de caractères Unicode qui identifient une ressource Internet.	Toutes les URL valides qui utilisent les protocoles http:// ou https://

Le Max du Web

Libellés

samedi 18 janvier 2014