Générateur d'images OG - Créateur d'images de partage social

Une image Open Graph est l'image qui apparaît lorsqu'un lien est collé dans une discussion, un tweet ou un canal Slack - et chaque plate-forme qui en restitue s'attend à un canevas d'environ 1 200 × 630 pixels, la taille autour de laquelle les cartes og:image de Facebook et summary_large_image de Twitter ont toutes deux été conçues. Si vous vous trompez de taille, l'image apparaît recadrée, floue ou compressée ; vous vous trompez de mise en page et le titre se lit comme un éclat illisible sur une photo chargée. Cet outil compose l'image à la résolution cible réelle à l'aide de l'API Canvas 2D, de sorte que ce que vous voyez dans l'aperçu est la grille de pixels exacte fournie dans le PNG.

Choisissez un arrière-plan : une couleur plate, un dégradé linéaire à deux arrêts construit à partir de deux couleurs de votre choix, ou une photo téléchargée qui est recadrée pour remplir le cadre complet de 1 200 × 630 de la même manière qu'une taille d'arrière-plan CSS : la couverture le ferait, au lieu d'être étirée de manière disproportionnée. Tapez un titre et un sous-titre facultatif : les deux sont mesurés caractère par caractère par rapport aux propres métriques de police du canevas, de sorte qu'un titre trop long pour tenir sur une ligne s'enroule sur une deuxième ou une troisième ligne à une limite de mot réelle plutôt que de déborder du bord ou d'être tronqué de manière invisible. Choisissez un alignement au centre ou à gauche, choisissez une couleur de texte qui se lit sur votre arrière-plan et déposez un logo facultatif dans le coin à une taille fixe et lisible.

Sous le canevas, quatre petites cartes donnent une idée approximative de l'apparence de l'image finale une fois qu'une véritable plate-forme l'enveloppe dans son propre chrome : la carte de Twitter/X affiche uniquement le domaine et un titre en gras sous l'image sans ligne de description, Facebook ajoute une bande de domaine majuscule au-dessus d'un bloc de titre et de description, LinkedIn place le domaine sous le titre sans aucune description, et l'intégration de Discord place le domaine, le titre et la description au-dessus de l'image dans son propre thème sombre. Il s'agit d'approximations stylisées à des fins de planification - clairement étiquetées comme illustratives, avec une ligne de domaine que vous tapez vous-même - et non une récupération en direct ou une capture d'écran des plates-formes réelles, car partager un lien et laisser le robot d'exploration de chaque plate-forme lire les véritables balises méta og: image et og: title de votre page est ce qui produit réellement la carte en direct.

Tout s'affiche localement sur un élément de canevas HTML dans votre navigateur : le titre, le sous-titre, l'arrière-plan téléchargé et le logo ne quittent jamais votre appareil, et le fichier exporté est un canevas.toBlob() PNG propre contenant uniquement ce que vous avez composé - aucune bordure de maquette, aucune fausse barre de navigateur ou logo de plate-forme n'est intégré à l'image téléchargée. Si vous devez également redimensionner ou convertir le PNG exporté par la suite, les outils de redimensionnement d'image et de conversion d'image de ce site reprennent là où celui-ci s'arrête.