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). Siautoest 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 formatlanguage_TERRITORY. Défaut esten_US.og:locale:alternate- Une gamme d'autres endroits locaux où cette page est disponibleog: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. Les
og: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
og:type valeurs: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:song- music.song - La chanson sur cet album.music:song:disc- entier > = 1 - La même chose quemusic:album:discmais en sens inverse.music:song:track- entier > = 1 - La même chose quemusic:album:trackmais 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:song- identiques à ceux sur music.albummusic:song:discmusic:song:trackmusic:creator- profil - Le créateur de cette playlist.
music:creator- profil - Le créateur de cette station.
Vidéo
og:type valeurs: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:actor- Identique à video.movievideo:actor:rolevideo:directorvideo:writervideo:durationvideo:release_datevideo:tagvideo:series- video.tv_show - Quelle série cet épisode appartient.
Une émission de télévision plusieurs épisodes. Les métadonnées est identique à video.movie .
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 technologiearticle: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 ISBNbook: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:// |
De plus en plus de sociétés offrent des services d'hébergement de sites au Maroc avec des prix avantageux contrairement à ce qui était le cas auparavant. Toutefois, les hébergeurs de sites marocains offrent moins d'espace disque pour le stockage des fichiers en comparaison aux autres services d'hébergement internationaux.
Voici une comparaison de services d'hébergement de sites au Maroc. Cette comparaison concerne des sociétés desquelles j'ai personnellement essayé les services.
