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

3569 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
2 327 vues
Afficher et envoyer les messages
Dans cette nouvelle vidéo nous allons afficher les messages entre vous et un autre utilisateur.Nous allons également créer un formulaire afin d'envoyer de nouveaux messages à l'utilisateur avec...
Créer son site de rencontres
4 359 vues
Créer un article
Créer un articleNous allons créer une nouvelle page que l'on nommera creer_article.php. Cette page permettra de créer un article qui sera visible sur le blog.Nous allons modifier notre...
Créer son site
4 352 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
3 107 vues
Utilisation de l'élément <html>, <head> et <body>
Utilisation de l'élément <html>, <head> et <body>Dans un fichier HTML, l'élément <html> est la racine de tout le document et enveloppe tout le contenu HTML. À...
HTML
8 720 vues
Utilisation de Bootstrap
Maintenant que nous avons un site qui commence à être opérationnel, il va falloir que nous nous occupions du design de celui-ci pour le rendre plus agréable à voir pour vos...
Créer son site
550 vues
Syntaxe des Directives
Chaque directive dans le fichier .htaccess suit une syntaxe spécifique pour fonctionner correctement. Comprendre cette syntaxe est essentiel pour utiliser efficacement les directives dans votre...
HTACCESS
2 037 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
2 537 vues
Envoyer un message sans recharger la page (2/2)
Comme nous avons mis en place notre système en JavaScript / Ajax pour envoyer un message sans recharger notre page en cours nous allons maintenant enregistrer le message + afficher ce dernier dans...
Créer son site de rencontres
Publicité
Cette pub permet au site de vivre ...