Aperçus de liens : la taille d'image OG qui fonctionne partout

Les balises qui font le travail

Quatre balises Open Graph font presque tout, et X lit les mêmes à moins que vous ne les remplaciez. Le reste relève du réglage fin facultatif.

• `og:image` — une URL absolue, protocole et domaine compris. Un chemin relatif est la raison la plus fréquente pour laquelle un aperçu n'affiche aucune image.
• `og:title` — le titre de la carte. Environ 60 caractères avant troncature, et il n'a pas à être identique au titre de votre page.
• `og:description` — une ou deux phrases, environ 150 à 160 caractères. Les plateformes tronquent à des endroits différents : placez donc le sens en tête.
• `og:url` — l'URL canonique. Cela évite qu'une même page partagée avec différents paramètres de suivi soit mise en cache comme plusieurs aperçus distincts.
• `twitter:card` avec la valeur summary_large_image — sans elle, X peut afficher une petite vignette carrée à côté du texte au lieu de la carte pleine largeur.

Deux détails expliquent quantité d'aperçus cassés. L'URL de l'image doit être accessible publiquement sans connexion, car le robot de la plateforme la récupère en visiteur anonyme : une image derrière une authentification, ou sur un serveur de préproduction protégé, échoue purement et simplement. Et la page elle-même doit être joignable par ce même robot, ce qui explique que des aperçus fonctionnent souvent dans un navigateur et échouent dans une application de messagerie.

Poids et format du fichier

Les images de carte ont des plafonds, et les dépasser fait silencieusement retomber l'aperçu sur « aucune image » plutôt que d'afficher une erreur. Visez moins de 1 Mo pour une image OG : le maximum absolu tourne autour de 8 Mo, et la limite propre de X pour les images de carte est de 5 Mo, avec un minimum de 300 × 157 pixels et un maximum de 4096 × 4096.

Le WebP mérite une mise en garde. La plupart des plateformes le gèrent désormais, mais quelques anciens générateurs d'aperçus non, et l'échec se traduit par une image manquante plutôt que par un repli. Si un lien compte commercialement, le JPEG ou le PNG restent le choix sûr ; compresser correctement un JPEG vous apporte de toute façon l'essentiel de l'économie. La transparence est l'autre piège : un PNG transparent sera composé sur le fond retenu par la plateforme, ce qui, en mode sombre, peut rendre un texte sombre invisible.

Concevoir une carte lisible en vignette

Un aperçu de lien est rarement vu en pleine taille. Dans Slack, il fait quelques centaines de pixels de large ; sur un téléphone, il rivalise avec tout le reste du fil. Les designs qui fonctionnent sur un écran d'ordinateur échouent systématiquement à cette échelle, et les échecs sont assez constants pour être évitables.

• Six à huit mots au maximum. Une carte est une affiche, pas un paragraphe. Si le titre tient sur trois lignes à 1200 pixels de large, il est illisible à 400.
• Réglez la typographie bien plus grande que votre intuition. 60 à 90 pixels pour un titre sur un plan de travail de 1200 pixels. En dessous d'environ 40 pixels, tout disparaît.
• Contraste élevé, toujours. Du texte sur une photographie a besoin d'un voile ou d'un aplat derrière lui ; du gris clair sur blanc disparaît complètement en petite taille.
• Ne répétez pas le titre. Sur Facebook, LinkedIn et Slack, la carte affiche déjà votre og:title en texte sous l'image (X affiche tout au plus un petit titre). Reprendre les mêmes mots dans l'image gâche l'espace : servez-vous-en pour un logo, une rubrique ou une seule idée visuelle.
• Testez en petit. Réduisez la maquette à 400 pixels de large et regardez-la. C'est plus proche de ce que verront la plupart des gens que le plan de travail sur lequel vous avez conçu.
• Gardez un gabarit. Une fois qu'une mise en page fonctionne, réutilisez-la avec un autre texte. Des cartes reconnaissables valent mieux que des cartes individuellement astucieuses.

Quand l'aperçu affiche la mauvaise chose

Vous corrigez l'image, vous partagez le lien, et l'ancienne image apparaît quand même. C'est la mise en cache, non une erreur dans vos balises. Chaque plateforme conserve l'aperçu fabriqué la première fois que quelqu'un a partagé cette URL, parfois pendant des semaines, et elle ne la récupérera pas à nouveau simplement parce que la page a changé.

Une remarque pratique sur la fabrication des images : le design de cartes est exactement le genre de petite tâche répétée que l'on confie à un générateur en ligne sans trop y penser, et ces générateurs téléversent tout ce qu'on leur donne — y compris des captures de produits non annoncés et des titres sous embargo. Les outils de design et d'image présentés ici — le créateur d'affiches, le redimensionneur et le compresseur — s'exécutent entièrement sur votre appareil : une carte pour quelque chose de confidentiel est donc conçue et exportée en local, sans rien transmettre.