Open Graph ProtocolLorsque vous partagez une page sur les réseaux sociaux, un aperçu est généré. Vous, vous êtes peut-être déjà demandé pourquoi certains sites ont un aperçu de qualité, donnant le goût de cliquer sur leur lien alors que d'autres ont un aperçu décevant avec une image, un texte et une description quelconque.
Par défaut, ces informations sont déterminées par le réseau social les affichant. Cependant, il est possible de spécifier les informations à utiliser afin de contrôler le résultat obtenu grâce à l'Open Graph Protocol.
Ce protocole est notamment utilisé par:
- Facebook (Créateurs du protocole)
- Et la majorité des applications de discussions (Messenger, Slack, etc.)
Il est important de remplir certaines métadonnées de base afin d'éviter un affichage disgracieux.
Voici par exemple le même site, à gauche sans métadonnées et à droite avec des métadonnées de base.
Définis le titre du site. Si la balise n'est pas renseignée, la valeur de la balise <title> sera utilisée.
Idéalement, le titre devrait être attrayant et avoir une longueur variant entre 60 et 90 caractères.
Définis le type de contenu partagé, notamment:
- Website (par défaut)
- Music
- Video
- Article
- Book
- Profile
- Etc.
Pour voir la liste complète des options.
Courte description du site devant tenir en une ou deux phrases. Contrairement à la balise <meta name="description"> la balise <meta property="og:description"> n'affecte pas le référence du site. Néanmoins, faites attention à son contenu puisqu'il sera affiché sous le titre de l'aperçu dans la majorité des réseaux sociaux.
Définis l'url de l'image 🖼️ à utiliser pour l'aperçu du site. Cette balise est importante afin d'éviter qu'un carré noir ⬛ ou pire une image aléatoire sur la page soit promue l'image d'aperçu officielle. Par exemple, le cas inopportun où une publicité devient l'aperçu d'une page 😱.
Au minimum, l'image doit avoir 600px de large, mais idéalement une largeur de 1080px ou plus est désirée afin d'afficher convenablement sur les appareils munis d'un écran de type haute définition et un ratio 16:9 est encouragé.
Idéalement, cette balise est complétée par les balises og:image:width et og:image:height afin de spécifier la dimension de l'image d'aperçu.
Définis l'url devant être utilisée pour les partages.
Ainsi, si une page répond à plus d'une adresse, par exemple:
Il est possible de spécifier que lors d'un partage l'adresse utilisée devrait être https://tim-montmorency.com
- og:audio L'URL d'un fichier audio accompagnant la publication.
- og:locale La langue et la culture de la publication (Par défaut: en_US).
- og:site_name Le nom du site web.
- og:video L'URL d'un fichier vidéo accompagnant la publication.