Qu'est-ce qu'une image OpenGraph ?

Les images OpenGraph sont des images utilisées pour les balises OpenGraph, qui s'affichent dans les aperçus Twitter, Facebook et Open Graph.

Les images OpenGraph peuvent être statiques ou dynamiques. Cela dépend si elles sont générées à l'aide d'un générateur OpenGraph ou d'autres outils.

Les images générées à l'aide d'un générateur OpenGraph sont généralement statiques car elles sont générées à partir des métadonnées que vous fournissez, qui sont généralement statiques. Par exemple, si vous fournissez des métadonnées pour un article de blog, le générateur OpenGraph créera une image OpenGraph statique basée sur ces métadonnées.

Les images générées à l'aide d'autres outils peuvent être dynamiques. Par exemple, si vous utilisez un framework de rendu côté serveur pour générer des images OpenGraph, ces images peuvent être générées en fonction du comportement de l'utilisateur, de l'heure, de la météo ou d'autres informations dynamiques.

Créer des images OpenGraph avec des outils

Code HTML OpenGraph

<meta property="og:url" content="https://example.com/article">
<meta property="og:title" content="My Article Title">
<meta property="og:description" content="This is my article description">
<meta property="og:type" content="article">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:image:alt" content="OpenGraph">

Avec ce code HTML, la page affichera l'image https://example.com/og-image.png dans OpenGraph.

Effets d'aperçu

Après avoir créé une image OG, de nombreux sites Web fournissent des outils d'aperçu et de débogage en ligne pour vous aider à diagnostiquer les problèmes. Voici quelques outils courants :