Carte d'Aperçu Social GitHub | Exportez une image Open Graph 1280x640
Saisissez un nom au format owner/repo, une description d'une ligne et une étiquette de langage telle que TypeScript, Rust ou Python, et l'outil compose le PNG recommandé par GitHub pour l'emplacement Social preview d'un dépôt. Trois thèmes (Sombre, Clair, Accent) et un sélecteur de couleur pour l'accent vous permettent de finaliser la carte sans ouvrir Figma ni Photoshop.
💡 À propos de cet outil
Quand quelqu'un colle l'URL de votre dépôt dans un message X, un salon Slack, un fil Discord ou un commentaire Hacker News, la carte enrichie est la première impression. Sans Social preview personnalisée, GitHub affiche une carte générique avec le nom du dépôt et un extrait du README ; avec une image dédiée, le lien apparaît sous forme d'une carte large et lisible qui indique en un coup d'œil de quoi parle le projet.
Le frein, c'est l'étape de mise en forme. Il faut se souvenir des dimensions recommandées, ouvrir un éditeur vectoriel, placer un nom, une accroche, éventuellement une étiquette de langage, puis exporter à la bonne taille. Cet outil supprime cette boucle. Vous saisissez quatre champs, le Canvas dessine une image de 1280x640 dans la page, et vous enregistrez le PNG. Les trois thèmes couvrent les choix évidents : une carte sombre pour les projets orientés terminal, une carte claire pour les bibliothèques au rendu sobre, et une carte entièrement teintée quand vous voulez ressortir dans un fil.
🧐 Questions fréquentes
Q. Quelles dimensions a le PNG exporté ? R. 1280 par 640 pixels. La documentation GitHub recommande au minimum 640 par 320 et 1280 par 640 pour la meilleure qualité d'affichage, donc l'outil retient la dimension la plus grande.
Q. La zone d'aperçu à l'écran paraît plus petite que 1280x640. Est-ce un problème ? R. L'aperçu est réduit à 480 par 240 uniquement pour la mise en page. Le PNG exporté conserve la pleine taille de 1280 par 640, vérifiez donc le cadrage final sur le fichier téléchargé avant de l'envoyer.
Q. Quelle longueur peut atteindre le nom du dépôt et la description ? R. Jusqu'à 50 caractères pour le nom du dépôt, 80 pour la description et 20 pour l'étiquette de langage. Le nom se réduit automatiquement quand il est long, mais les descriptions de plus de 80 caractères sont tronquées : il vaut mieux résumer en une seule phrase.
Q. Où la couleur d'accent est-elle appliquée ? R. Dans les thèmes Sombre et Clair, elle colore le petit point en haut à droite et le fond de la puce contenant l'étiquette de langage. Dans le thème Accent, elle devient la couleur de fond entière de la carte.
Q. Peut-on exporter un PNG transparent ? R. Le PNG est rendu avec le fond du thème, donc l'image n'a pas de transparence. GitHub accepte aussi les PNG transparents pour le Social preview, mais un fond plein se lit en général de manière plus cohérente sur X, Slack et Discord, en mode clair comme en mode sombre.
Q. Quels formats sont produits ? R. PNG uniquement. Le Social preview GitHub accepte les fichiers PNG, JPG et GIF de moins de 1 Mo, convertissez donc le PNG avec un autre outil si vous avez spécifiquement besoin de JPG.
📚 La carte sociale, un signal court avant la lecture du README
L'emplacement Social preview se gère depuis l'écran Settings, Social preview de chaque dépôt GitHub. Quand l'image n'est pas configurée, c'est une carte générique reprenant le nom et un fragment du README qui s'affiche lors d'un partage ; c'est aussi cette carte que voient les lecteurs francophones qui découvrent un dépôt via un lien posté sur un salon Discord d'étude, un canal d'équipe, ou un fil X. La première décision « je clique ou je passe » se prend devant cette carte, avant même d'arriver sur le README.
Quelques régularités méritent d'être notées. La description sur la carte joue un rôle différent du premier paragraphe du README : elle doit tenir sur une seule ligne à taille réduite, donc une formulation qui nomme directement la nature du projet (« CLI pour redimensionner des images en lot », « hooks React pour les raccourcis clavier ») passe mieux qu'une phrase d'accroche marketing. L'étiquette de langage est également informative : dans un fil rempli de liens, beaucoup de personnes lisent le langage avant la description, donc afficher Rust, TypeScript ou Go à l'avant aide les bons lecteurs à s'arrêter. Enfin, choisir une couleur d'accent unique et la réutiliser sur l'ensemble de vos dépôts donne à une collection de projets personnels une cohérence visuelle qui vaut largement le temps investi.