Comment ajouter des intégrations de médias sociaux à votre site Web (Open Graph Meta Tags) –
Vous avez probablement rencontré ces intégrations très souvent sans y penser. Chaque fois que vous envoyez à quelqu’un un lien sur une plate-forme de médias sociaux ou une application de messagerie, le lien se développe pour inclure le contenu du site Web, généralement une image, un titre et une description. Voici comment configurer cela.
Sommaire
Que sont les balises méta Open Graph ?
La configuration de ces embeds se fait à l’aide de <meta> balises, généralement dans l’en-tête de votre site. Il existe une norme pour eux, créée à l’origine sur Facebook, appelée « Open Graph Protocol ».
Les balises utiliseront toujours le format suivant, avec une valeur « property » définie sur « og : » suivie du type de balise, et une valeur « content » définie sur la valeur du contenu de la page :
<meta property="og:type" content="value" />
Par exemple, une configuration de base pour la plupart des sites Web ressemble à ce qui suit :
<meta property="og:image" content="https://i.imgur.com/imagelink.jpg"> <meta property="og:title" content="Website Title" /> <meta property="og:description" content="Website Description" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://example.com/" />
Cela définit l’image, le titre et le lien, la description et indique aux sites qu’il s’agit d’un site Web. Il en résulte une intégration simple comme suit :
C’est un format simple, mais il existe de nombreuses options que la plupart des sites Web reconnaîtront. Vous pouvez trouver la liste complète d’entre eux sur le site Web d’Open Graph, mais nous couvrirons les plus importants ici.
Twitter reconnaîtra les tags OG, mais il convient de noter qu’ils ont également leurs propres tags qui auront la priorité.
<meta name="twitter:title" content="Website Title"> <meta name="twitter:description" content="Website Description"> <meta name="twitter:image" content="https://i.imgur.com/imagelink.jpg">
Utiliser les balises méta OG
Tout d’abord, le titre. c’est un tag extrêmement simple, mais nécessaire à tout le monde. Même si votre intégration représente un objet au lieu d’une page, elle doit toujours avoir un titre expliquant de quoi il s’agit.
<meta property="og:title" content="Website Title" />
En option, si votre titre ne fait pas le travail, vous pouvez ajouter une description détaillée :
<meta property="og:description" content="Website Description" />
le og:type La balise est également très importante, car elle indique aux sites quel type de contenu vous liez et comment il doit être formaté. Il permet également différents types de paramètres facultatifs selon le type. Il y a plusieurs options différentes :
website, qui est une valeur par défaut de base.article, qui représente un article d’actualité/de blog, et a les paramètres facultatifs depublished_time,modified_time,author,section, ettag.profile, qui représente un utilisateur, et a des options pourfirst_name,last_name,username, etgender.video.other, qui représente une vidéo. Il existe également des balises pour les films et les émissions de télévision, avec leurs propres paramètres.- Divers
musicbalises associées, dont certaines sont en liste blanche sur des sites comme Facebook.
Pour les paramètres facultatifs, vous devez ajouter une méta-propriété distincte avec le nom du paramètre. Par exemple, le réglage music:duration:
<meta property="music:duration" content="60" />
Vous voudrez également définir la balise URL pour renvoyer à votre site.
<meta property="og:url" content="https://example.com/" />
Si vous voulez qu’une image s’affiche avec votre intégration, vous devrez également le définir. Les images ont beaucoup d’options de configuration :
<meta property="og:image" content="https://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" /> <meta property="og:image:alt" content="A shiny red apple with a bite taken out" />
Il y a aussi og:video et og:audio balises qui fonctionnent de la même manière, mais pour la vidéo et l’audio respectivement.
Vous pouvez également définir le nom du site manuellement, si le titre ne le révèle pas.
<meta property="og:site_name" content="CloudSavvy IT" />
Débogage des balises méta
Les envoyer à vous-même pour déboguer n’est pas la meilleure idée – de nombreuses plates-formes mettront en cache la réponse, ce qui rendra plus difficile les modifications rapides.
Heureusement, il existe quelques excellents outils comme opengraph.xyz, où vous pouvez mettre votre lien et afficher la réponse d’intégration pour différentes plates-formes.
Vous voudrez bien sûr toujours envoyer le lien sur chaque plate-forme pour vérifier qu’il fonctionne.
Pouvez-vous générer des balises dynamiquement ?
Bien sûr! Les balises ne sont que du HTML, et la plupart des frameworks Web modernes consistent à rendre du HTML dynamique. Cependant, il doit être dans l’en-tête, ce qui peut compliquer les choses pour certains frameworks axés sur l’écriture dans le corps de la page.
Dans React, vous pouvez le faire facilement avec un package appelé react-helmet, qui va dans votre composant principal App(). Vous pouvez bien sûr utiliser la syntaxe JSX standard pour remplacer l’une des valeurs par des valeurs de l’état de votre page.
import React from "react";
import Helmet from "react-helmet";
function App() {
return (
<main>
<Helmet>
<title>Example</title>
<meta itemprop="name" content="Example" />
<meta property="og:title" content="Example" />
<meta itemprop="description" content="A description" />
<meta name="description" content="A description" />
<meta property="og:description" content="A description" />
<meta itemprop="image" content="http://example.com/example.png" />
<meta property="og:image" content="http://example.com/example.png" />
<meta property="og:url" content="https://example.com" />
<meta property="og:type" content="website" />
</Helmet>
</main>
);
}
Pour WordPress, vous pouvez le configurer avec un plugin, ou ajouter du PHP à votre header.php déposer.
<meta name="description" content="<?php if ( is_single() ) {
single_post_title('', true);
} else {
bloginfo('name'); echo " - "; bloginfo('description');
}
?>" />
Pour les autres frameworks, ils prendront probablement en charge les balises META d’une manière ou d’une autre, vous voudrez donc vérifier comment cela fonctionne pour votre application.
