Introduction


Le protocole Open Graph permet à n'importe quelle page Web de devenir un objet riche dans un graphe social. Par exemple, ceci est utilisé sur Facebook pour permettre à n'importe quelle page Web d'avoir la même fonctionnalité que n'importe quel autre objet sur Facebook.


Métadonnées de base


Pour transformer vos pages Web en objets graphiques, vous devez ajouter des métadonnées de base à votre page. Cela signifie que vous devrez mettre des balises <meta> supplémentaires à l'intérieur de votre balise <head>.



Les quatre propriétés requises pour chaque page sont :

  • og:title - Le titre de votre objet tel qu'il devrait apparaître dans le graphique, par exemple, "The Rock".
  • 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 requises.
  • og:image - Une URL d'image qui devrait représenter votre objet dans le graphique.
  • og:url - L'URL canonique de votre objet qui sera utilisé comme identifiant permanent dans le graphique, par exemple, "http://www.imdb.com/title/tt0117500/".



Comme d'exemple, voici le balisage du protocole Open Graph pour The Rock on IMDB :

<html prefix="og: http://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="http://www.imdb.com/title/tt0117500/" />
    <meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
    ...
  </head>
  ...
</html>



Pour avoir plus d'informations je vous invite à aller sur le site opg.me, qui vous donnera plus d'explication pour utiliser ce protocole qui peut-être réellement utile pour votre site ! 🙂

3386 vues
Modifié le 05 novembre 2019
Publicité Sitedudev
Cette pub permet au site de vivre ...
Publicité
Cette pub permet au site de vivre ...
Voir d'autres articles
659 vues
Grid : organiser les éléments dans un système de grille
Grid : Organiser les Éléments dans un Système de GrilleCSS Grid est une méthode de disposition en CSS qui permet de créer des systèmes de grille complexes pour organiser les éléments sur une...
CSS
1 000 vues
CSS externe : l'utilisation de fichiers CSS séparés pour styliser plusieurs pages HTML
CSS Externe : L'utilisation de fichiers CSS séparés pour styliser plusieurs pages HTMLLe CSS externe est une méthode de stylisation où les styles sont définis dans des fichiers CSS distincts et...
CSS
1 884 vues
Demande d'amis en PHP (3/3)
Pour cette troisième vidéo nous allons revoir notre système afin de conserver le statut de la relation lorsqu'on bloque et débloque un utilisateur.
Créer son site de rencontres
3 059 vues
Comment faire connaitre son site ?
L'un des derniers points qui n'est pas sans conséquence est la promotion de son site après l'avoir mis en ligne sur un hébergeur (OVH, 1and1, Hostinger, etc.).L'une des questions que...
Créer son site
574 vues
Utilisation des directives @if, @for, @each, @while pour un contrôle de flux avancé
Utilisation des directives pour un contrôle de flux avancé en SASS1. Directive @if :La directive @if permet d'exécuter un bloc de code conditionnellement en fonction d'une expression booléenne....
Sass
1 863 vues
Mixins : Créer des mixins pour réutiliser des blocs de styles
Mixins en SASS : Créer et Utiliser1. Déclaration de mixins :En SASS, les mixins sont déclarés à l'aide du mot-clé @mixin, suivi du nom du mixin et des paramètres entre parenthèses. Les styles...
Sass
4 540 vues
Le langage CSS
Le CSS permet de concevoir le design de votre site web. Le CSS agit sur des éléments HTML.On peut intégrer le CSS de deux façons :Directement sur les éléments de votre HTML,Mettre le...
Créer son site
1 802 vues
Explorer les fonctions de manipulation de couleur, de texte, etc.
Exploration des fonctions de manipulation en SASS1. Manipulation de couleurs :SASS propose un ensemble de fonctions intégrées pour manipuler les couleurs. Vous pouvez ajuster la luminosité, la...
Sass
Publicité
Cette pub permet au site de vivre ...