Générateur de carte sociale
Social Card Generator
Compose une image de partage de 1200×630 à partir d’un titre, d’un sous-titre, d’une ligne de marque et d’un logo facultatif sur un modèle au choix, et écrit les balises meta qui vont avec.
Compose une carte de partage de 1200 × 630 à partir d’un titre, d’un sous-titre, d’une ligne de marque et d’un logo facultatif, et émet les balises meta à coller avec. Le texte est dessiné directement dans un canvas avec la police coréenne de l’appareil, en coupant le hangeul par syllabe et le latin par mot, et le titre se réduit tout seul plutôt que de déborder.
Aperçu (1200 × 630)
Contenu
Déposez une image de logo (facultatif)
Un PNG ou un SVG carré convient le mieux. Sans logo, un bloc de la couleur d’accent prend sa place.
Allure
Balises meta pour la page
Pourquoi 1200 × 630, et un mot sur la police
Open Graph, X (summary_large_image), KakaoTalk et Slack rognent tous vers un rapport proche de 1,91:1 : c’est donc cette taille qui perd le moins. Le texte est dessiné directement sur le canvas avec la police coréenne de l’appareil — Pretendard si elle est installée, sinon Apple SD Gothic Neo, Malgun Gothic ou Noto Sans KR — et le hangul est coupé par syllabes, ce qui explique que les mêmes réglages rendent un peu différemment sur une autre machine. Exporté en 2×, cela donne 2400 × 1260, qui reste net sur un écran haute résolution.
Pour voir comment la carte se déplie vraiment, l’aperçu de partage de lien va chercher la page ; et pour une texture de fond, le générateur de motifs en fabrique une.
Comment s’en servir
Écrivez le titre tel qu’il sera lu
Une carte de partage se lit en vignette dans un fil, donc un titre court en grands caractères bat une phrase complète en petits. La ligne sous l’aperçu dit combien de lignes il a fallu et si la taille a été réduite pour tenir.
Ajoutez la ligne de marque et le pied
Ils sont mémorisés d’une visite à l’autre, parce que ce sont les parties qui restent les mêmes d’une carte à l’autre. Le titre et le sous-titre, non.
Choisissez un gabarit et les deux couleurs
Dégradé, uni, partagé ou contour. La couleur de fond et l’accent font tout le travail ; l’interrupteur de texte clair est là parce qu’un fond de ton moyen peut aller dans les deux sens et que c’est l’œil qui doit décider, pas un seuil.
Ajoutez un logo si vous en avez un carré
Un PNG ou un SVG carré s’intègre le mieux. Sans logo, un bloc de la couleur d’accent prend sa place, ce qui suffit souvent à la taille d’une vignette.
Exportez le PNG et copiez les balises meta
Les balises portent la largeur et la hauteur en plus de l’URL, ce qui permet à un robot de mettre la carte en page avant que l’image ne soit chargée. Remplacez l’URL d’exemple par l’endroit où vous déposez réellement le fichier.
Questions fréquentes
Pourquoi 1200 × 630 ?
Parce qu’Open Graph, le summary_large_image de X, KakaoTalk et Slack recadrent tous vers quelque chose de proche de 1,91:1, et que cette taille perd le moins chez tous. Plus grand n’aide pas — chaque consommateur la rééchantillonne vers le bas — et plus petit donne une carte floue sur un écran retina.
La carte est un peu différente sur la machine de mon collègue.
Le texte est dessiné avec la police coréenne dont dispose cet appareil — Pretendard si elle est installée, sinon Apple SD Gothic Neo, Malgun Gothic ou Noto Sans KR —, si bien que les mêmes réglages produisent des lettres et des coupures de ligne un peu différentes selon la machine. Le PNG exporté est figé une fois téléchargé ; seul l’aperçu varie.
Mon titre a rapetissé tout seul.
Il dépassait quatre lignes à la taille que vous aviez réglée, donc la taille a été réduite jusqu’à ce qu’il tienne — et la ligne sous l’aperçu le dit. Un texte qui déborde serait pire : il serait coupé en silence à l’export. Raccourcissez le titre si vous voulez retrouver la grande taille.
Comment vérifier que la carte s’affiche vraiment ?
Mettez d’abord le fichier en ligne à l’URL des balises meta, puis servez-vous de l’outil d’aperçu OG, qui charge la page et montre ce que chaque plateforme construira à partir de ses balises. Cette page ne fait que dessiner l’image : elle ne peut pas savoir si les balises sont sur la page ni si l’URL se résout.
À alimenter depuis
Aperçu de partage de lien
Link Preview Debugger
Lit les balises Open Graph et Twitter card d’une adresse et montre l’allure qu’aura le lien une fois partagé.
Générateur de motifs de fond
Background Pattern Generator
Produit des motifs SVG raccordables — rayures, pois, quadrillages, grain — avec réglage des couleurs et de l’échelle.
Mise en situation sur appareil
Device Mockup
Place une capture d’écran dans un cadre de téléphone, de tablette, d’ordinateur portable ou de navigateur, avec fond et ombre.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Mise en situation sur appareil
Device Mockup
Place une capture d’écran dans un cadre de téléphone, de tablette, d’ordinateur portable ou de navigateur, avec fond et ombre.
Aperçu de partage de lien
Link Preview Debugger
Lit les balises Open Graph et Twitter card d’une adresse et montre l’allure qu’aura le lien une fois partagé.
Générateur de motifs de fond
Background Pattern Generator
Produit des motifs SVG raccordables — rayures, pois, quadrillages, grain — avec réglage des couleurs et de l’échelle.
Compresseur PNG
PNG Compressor
Quantifie la palette et réécrit le flux deflate pour alléger un PNG sans toucher à ses dimensions, sans envoi de fichier, tout dans votre navigateur.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Calculateur de format d’image
Aspect Ratio Calculator
Trouve la dimension manquante pour un rapport visé et liste les tailles normalisées qui lui correspondent.