# Template : image Open Graph | Design Catalyseur > Template d’image Open Graph 1200 × 630 en HTML et CSS : marque, titre avec accent orange, annotation manuscrite, publics et symbole. Extrait de Catalyseur IA. Source : https://design.catalyseurnumerique.com/templates/image-og/ Template · Partage # Image Open Graph La carte qui accompagne chaque lien partagé : une promesse en deux lignes, un mot en accent et le symbole de la marque. Extrait de Catalyseur IA. 01 · Aperçu ## Votre expertise, amplifiée Exemple tiré de [catalyseuria.com](https://catalyseuria.com/) , reproduit en HTML et CSS à partir de l’image d’origine. Catalyseur IA Par Gregory Borelli Votre expertise, vous, aux commandes amplifiée par l’IA. Formateurs · Coachs · Enseignants · Solopreneurs 02 · Règles ## Composition Format 1200 × 630 px, la taille attendue par Open Graph et les cartes sociales Fond Nuit #00051A avec un quadrillage discret, sans dégradé ni image Marque Trait orange puis nom en capitales Oswald, en haut à gauche Titre Deux lignes en Oswald grasse, un seul mot en orange marqué par des astérisques Annotation Caveat orange clair, légèrement inclinée, reliée au titre par une flèche courbe Publics Liste en Roboto séparée par des points médians, sous le titre, sans domaine Symbole Logo de la marque à droite, centré sur le titre, sans cadre Échelle Mesures en unités de la carte : rendu identique à toute largeur Découpe Repères facultatifs (cropMarks) dans la marge, hors de l’image capturée 03 · Utilisation ## Exemple réutilisable Le composant charge lui-même sa feuille de style. Pour un site, déclarer l’image dans src/config/og.ts : elle apparaît dans la [galerie](https://design.catalyseurnumerique.com/og/) et pnpm og la capture en PNG. --- import OgImage from '../../shared/design-system/components/OgImage.astro'; ---