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 ! 🙂

2986 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
166 vues
Sélection d'éléments HTML
Sélection d'Éléments HTML en JavaScriptLa sélection d'éléments HTML est une opération fondamentale en JavaScript. Cela permet d'interagir avec les éléments de la page web, de modifier leur...
JS
156 vues
Création de tableaux avec <table>.
Création de tableaux avec <table>La balise <table> est utilisée pour créer des tableaux dans une page HTML. Elle permet de structurer les données tabulaires en lignes et colonnes....
HTML
2 789 vues
Comprendre les différentes catégories de commandes SQL
SQL, ou Structured Query Language, est composé de plusieurs catégories de commandes, chacune ayant un rôle spécifique dans la manipulation et la gestion des bases de données relationnelles. Les...
SQL
193 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
14 944 vues
Connexion PHP
Après avoir créé notre formulaire d'inscription il nous faut créer un formulaire de connexion afin que nos futurs utilisateurs puissent se connecter au site une fois...
Créer son site
241 vues
Pourquoi utiliser PHP ?
Introduction à l'utilisation de PHPPHP est un langage de programmation extrêmement populaire pour le développement web. Voici quelques-unes des raisons principales pour lesquelles PHP est...
PHP
3 594 vues
Différencier HTML (structure) de CSS (présentation)
Différencier HTML (structure) de CSS (présentation)HTML (HyperText Markup Language) et CSS (Cascading Style Sheets) sont deux langages complémentaires utilisés pour créer des sites Web, mais ils...
CSS
4 957 vues
Afficher la liste des catégories
Pour commencer nous allons créer la page maître de notre forum. C'est cette page qui contiendra les différentes catégories.Tout d'abord nous allons créer un dossier que nous...
Créer son site
Publicité
Cette pub permet au site de vivre ...