Facebook a publié Open Graph en 2010 afin de permettre une meilleure présentation des sites Internet externes sur sa propre plate-forme. À cette fin, les développeurs du réseau social ont développé une technologie intéressante : Open Graph (Open Graph Protocol ; OGP) transforme les sites Internet en objets. Cette technologie aide les utilisateurs de la plate-forme à partager des contenus de sources externes sur le réseau. Une fonctionnalité particulièrement intéressante pour de nombreux exploitants de sites Internet puisque la plupart de ces derniers souhaitent accroître la notoriété de leur site Internet.
D’autres réseaux comme Twitter, LinkedIn ou Xing ont suivi les traces de Facebook et ont implémenté Open Graph sur leurs plateformes. Ce protocole est aujourd’hui un outil essentiel dans le webdesign.
Lorsqu’un utilisateur partage un site Internet sur les réseaux sociaux, celui-ci doit apparaître d’une façon ou d’une autre sur la plateforme. Une vignette et un texte d’accompagnement représentant le site Internet sont en effet mis en place de manière aussi efficace que possible pour inviter les internautes à visiter le site en question. Mais pour que le contenu de la vignette soit le plus pertinent possible, les webdesigners utilisent Open Graph.
Ils peuvent insérer des balises Open Graph dans le texte source du site Internet, et déterminer ainsi la manière dont ce site doit être présenté sur les réseaux sociaux. Open Graph est donc un outil intéressant dans le domaine du marketing en ligne. Ce protocole permet aux propriétaires de contenus de mieux gérer la manière dont ils partagent leurs contenus et leurs informations avec les internautes.
Les balises correspondantes sont placées dans l’en-tête du document HTML sous forme de meta property :
<meta property="og:title" content="Titre du site Internet tel qu’il doit apparaître sur Facebook."/>On définit donc tout d’abord le type de balise et on lui attribue une valeur ou un contenu.
Twitter a inventé ses propres balises. Toutefois, lorsque le robot Twitter ne trouve pas ces dernières en analysant la page, il a recours à Open Graph.
Avant de commencer à insérer les différentes meta properties, on définit le vocabulaire au moyen d’un préfixe.
<html prefix="og: http://ogp.me/ns#">Vient ensuite l’en-tête du document.
Les balises Open Graph que l’on peut placer sur un site Internet sont nombreuses. Nous avons détaillé pour vous les principales ci-après. Elles doivent impérativement être placées sur tous les sites Internet destinés à être partagés sur les réseaux sociaux.
Quel sera le titre affiché en cas de partage du site Internet sur les réseaux sociaux ? La balise title permet de définir un nom. Sur Facebook, elle ne doit pas dépasser les 95 caractères. Un saut de ligne est effectué après environ 50 caractères. Ceci impacte également la façon dont les utilisateurs réagiront à la présentation du site.
<meta property="og:title" content="Titre du site Internet"/>Chaque document Web dispose dans tous les cas d’une balise title qui intervient par exemple pour l’affichage dans un navigateur ou un moteur de recherche. En principe, il est possible de la reprendre dans la balise Open Graph, mais le protocole Facebook permet également aux exploitants de sites Internet de définir une option plus adaptée au réseau social. Il est par exemple possible de mieux exploiter la longueur mise à disposition par Facebook avec une alternative adaptée plutôt qu’avec une balise standard qui sera également utilisée pour les moteurs de recherche. Une autre balise title permet par ailleurs d’adapter plus précisément le titre au groupe cible sur le réseau social.
Tout comme le titre, la description fait déjà partie intégrante de tout document HTML. Une balise Open Graph appropriée permet aux webdesigners d’adapter la description du contenu aux réseaux sociaux. Pour ce faire, Facebook prévoit une longueur d’environ 300 caractères. Selon le titre ou l’URL, l’espace peut également être plus court. On recommande donc de limiter la longueur à 200 caractères au maximum pour des raisons de sécurité.
<meta property="og:description" content="Description du site Internet"/>Contrairement à la description HTML, la variante proposée par Open Graph n’est pas concernée par la SEO. Les mots-clés ne jouent donc aucun rôle.
L’image constitue une autre composante de l’aperçu du site Internet avec le titre et le texte de description. Cette balise Open Graph permet aux exploitants de sites Internet d’empêcher Facebook et les autres plateformes de réseaux sociaux de récupérer une vignette du site plus ou moins aléatoirement. En effet, le résultat peut être dramatique si l’image affichée est celle d’une bannière publicitaire plutôt que celle de l’article à proprement parler.
<meta property="og:image" content="http://www.example.org/images/image.jpeg" />Il est recommandé de concevoir une image dédiée à cet aperçu afin de susciter le meilleur nombre de clics. Pour y parvenir, il faudra non seulement soigner le contenu de l’image, mais aussi veiller à son format. Les vignettes qui fonctionnent bien sont celles qui associent un visuel à un texte. Pensez à positionner le texte au centre de l’image, car il arrive à Facebook de rogner les bords. Le format 1200 x 627 pixels s’avère être le format optimal. Si l’on choisit ces paramètres, Facebook affiche l’image au-dessus du titre et de la description. En cas de format plus petit, l’image passe en miniature à côté du texte.
Il est possible de fournir de plus amples informations à la balise image afin de garantir son bon fonctionnement :
<meta property="og:image" content=" http://www.example.org/images/prévisualisation.jpeg" />
<meta property="og:image:secure_url" content="https://www.example.org/images/prévisualisation.jpeg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:image:alt" content="Une cascade tropicale" />La balise URL permet de définir l’adresse Web du site Internet partagé. Cela peut sembler quelque peu redondant puisque l’URL est de toute façon connue. Cependant, certains exploitants de sites Internet disposent de plusieurs URL pour le même contenu dans le but, par exemple, de favoriser un meilleur traçage. La balise Open Graph veille à ce que le bon site Internet soit toujours mis en lien.
<meta property="og:url" content="http://www.example.org/articles/id3498/" />Facebook n’affiche pas l’URL complète dans l’aperçu, mais uniquement le domaine.
Le type indique la nature exacte du contenu. Les types « website », « blog » ou « article » conviennent à la plupart des sites Internet. Mais il existe d’autres options :
Afin de pouvoir utiliser correctement le type music, Facebook doit tout d’abord valider l’exploitant du site Internet correspondant. La « liste blanche » de Facebook contient toutefois en premier lieu des grandes entreprises telles que Spotify.
En pratique, on peut rencontrer d’autres types que l’on peut trouver sur la liste de schema.org. Les types présentés dans cet article sont tous spécifiés sur le site Internet officiel d’Open Graph.
Plusieurs types acceptent d’autres spécifications que vous pourrez enregistrer en tant que meta properties spécifiques, une fois que vous aurez défini le type. Le cas d’un article est détaillé ici à titre d’exemple. D’autres spécifications sont disponibles pour les autres types sur le site Internet d’Open Graph.
<meta property="og:type" content="article">
<meta property="article:published_time" content="2019-04-25">
<meta property="article:section" content="Multimedia">Dans cet exemple, le code indique donc non seulement aux réseaux sociaux que l’objet est un article, mais précise aussi quand il a été publié et dans quelle catégorie il apparaît.
Outre les principales balises Open Graph présentées plus haut, d’autres balises peuvent être placées dans le texte source de votre site Internet. Elles permettent de pousser encore plus loin l’adaptation du contenu aux réseaux sociaux.
Chaque balise Open Graph dispose d’un contenu qui doit apparaître au bon endroit sur le réseau social et doit respecter le bon format. La balise og:title requiert par exemple un ou plusieurs mots, c’est-à-dire une chaîne de caractères. Les valeurs suivantes sont également possibles :
| Balise | Description | Contenu |
|---|---|---|
| og:title | Titre du site Internet | String |
| og:determiner | Article grammatical précédant le titre | Enum |
| og:description | Description du site Internet | String |
| og:site_name | Nom du site Internet | String |
| og:url | URL canonique | URL |
| og:locale | Pays et langue | String (language_TERRITORY) |
| og:locale:alternate | Pays alternatif | Array |
| og:type | Type de contenu | String |
| og:image | Source d’une image | URL |
| og:image:secure_url | URL sécurisée alternative (HTTPS) | URL |
| og:image:type | Type de média de l’image | String |
| og:image:width | Largeur en pixels | Integer |
| og:image:height | Hauteur en pixels | Integer |
| og:image:alt | Texte alternatif de l’image | String |
| og:audio | Source d’un fichier audio | URL |
| og:audio:secure_url | URL sécurisée alternative (HTTPS) | URL |
| og:audio:type | Type de média du fichier audio | String |
| og:audio:alt | Texte alternatif du fichier audio | String |
| og:video | Source d’une vidéo | URL |
| og:video:secure_url | URL sécurisée alternative (HTTPS) | URL |
| og:video:type | Type de média de la vidéo | String |
| og:video:width | Largeur de la vidéo en pixels | Integer |
| og:video:height | Hauteur de la vidéo en pixels | Integer |
Balises Open Graph concernant différents types d’objets :
| Balise | Description | Contenu |
|---|---|---|
| music:duration | Durée de la chanson en secondes | Integer (>=1) |
| music:album | Album de la chanson | Array (music.album) |
| music:album:disc | Disc (CD, page LP) de la chanson | Integer (>=1) |
| music:album:track | Numéro de la chanson sur l’album | Integer (>=1) |
| music:musician | Nom du compositeur | Array (profile) |
| music:song | Chanson sur l’album | String (music.song) |
| music:song:disc | Disque (CD, page LP) de la chanson | Integer (>=1) |
| music:song:track | Numéro de la chanson sur l’album | Integer (>=1) |
| music:release_date | Date de publication de l’album | DateTime |
| music:creator | Créateur de la playlist ou de la station de radio | Array (profile) |
| video:actor | Acteur dans le film | Array (profile) |
| video:actor:role | Rôle de l’acteur | String |
| video:director | Metteur en scène du film | Array (profile) |
| video:writer | Scénariste du film | Array (profile) |
| video:duration | Durée du film en secondes | Integer (>=1) |
| video:release_date | Date de publication du film | DateTime |
| video:tag | Mots-clés sur la vidéo | Array (String) |
| video:series | Série à laquelle l’épisode appartient | String (video.tv_show) |
| article:published_time | Date de publication de l’article | DateTime |
| article:modified_time | Dernière modification de l’article | DateTime |
| article:expiration_time | Date limite de l’article | DateTime |
| article:author | Auteurs de l’article | Array (profile) |
| article:section | Catégorie de l’article | String |
| article:tag | Mots-clés concernant l’article | Array (String) |
| book:author | Auteurs du livre | Array (profile) |
| book:isbn | ISBN du livre | String |
| book:release_date | Date de publication du livre | DateTime |
| book:tag | Mots-clés du livre | Array (String) |
| profile:first_name | Prénom de la personne | String |
| profile:last_name | Nom de la personne | String |
| profile:username | Pseudonyme de la personne | String |
| profile:gender | Sexe de la personne | Enum |
L’exemple suivant présente un document HTML très simple qui a été préparé pour les réseaux sociaux avec des balises Open Graph :
<!DOCTYPE html>
<html>
<html prefix="og: http://ogp.me/ns#">
<head>
<title>First Article</title>
<meta property="og:type" content="article">
<meta property="og:title" content="My first article">
<meta property="og:description" content="This is a very cool article.">
<meta property="og:site_name" content="Our Website">
<meta property="og:url" content="http://www.example.org/ogp_test.html">
<meta property="og:image" content="http://www.example.org/teddy.png">
<meta property="og:image:type" content="image/jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:image:alt" content="A teddy bear" />
<meta property="article:published_time" content="2019-04-25">
<meta property="article:author" content="Carl">
</head>
<body>
<h1>My First Article</h1>
<p>This is a test.</p>
</body>
</html>Dans les balises Open Graph, on spécifie le document en tant qu’article, on définit le titre, la description et l’URL et on propose une image adaptée. On fournit également des informations supplémentaires sur l’article, mais aussi sur l’image.
Il n’est pas nécessaire d’attendre que quelqu’un partage le contenu pour vérifier si le code est bien compris par Facebook : avec le Sharing Debugger, Facebook propose un outil qui vérifie que le code source est exempt d’erreur et présente toutes les informations collectées sous une forme préparée. L’outil montre également à quoi ressemblera le rendu final sur Facebook.
Pour utiliser le Debugger, il est nécessaire de disposer d’un compte Facebook. Toutefois, le site Internet à contrôler doit déjà être en ligne.
Un like par ci, un contenu partagé par-là, et perpétuellement de nouveaux followers sur le compte Twitter : les responsables des réseaux sociaux doivent gérer de nombreuses informations qui peuvent avoir une grande importance pour le succès d’une entreprise. De plus, le contenu présenté doit être adapté à la cible et posté régulièrement pour entretenir l’intérêt de la communauté de fans. Grâce à...
Il y a bien plus d’opportunités que l’on pourrait le croire sur les réseaux sociaux, qui ne servent pas seulement à poster ses photos de vacances ou se divertir avec des vidéos. Ces dernières années, les responsables marketing on pleinement découvert l’énorme potentiel de ces différents canaux. Désormais, presque toutes les entreprises sont actives sur Facebook et utilisent cette plateforme comme...
Les applications Web ont besoin d’interfaces pour pouvoir échanger des données. Si vous gérez un projet Web, et que vous souhaitez accorder à d’autres programmes un accès à certaines de vos données, une API () est indispensable. De nombreux développeurs ont alors recours à des concepts bien établis comme REST ou SOAP. Il existe cependant d’autres options, comme par exemple GraphQL.
Le Google Knowledge Graph rassemble de façon visible et transparente des informations pertinentes et des liens supplémentaires sur une recherche. Ces informations complémentaires sur les résultats de recherche sont mises à disposition dans un widget séparé. Dans ce guide, nous vous expliquons comment fonctionne le Knowledge Graph et d’où viennent les informations.
Offrez un service performant et fiable à vos clients avec l'hébergement web de IONOS.
