Créer une image de partage pour votre site web

Qu’est-ce qu’une image d’aperçu de lien?

Vous envoyez un article à quelqu’un. Il peut voir une simple adresse, une mauvaise image ou une carte avec une image et un titre explicites. L’image de cette carte s’appelle image de partage, image d’aperçu de lien ou image Open Graph.

Elle accompagne le lien d’une page web. Elle a un autre rôle qu’une publication Instagram, la petite icône de l’onglet du navigateur (favicon) ou la couverture visible de l’article. Vous pouvez partir du même visuel, mais adaptez le cadrage, le texte et les réglages à chaque usage.

Pour créer l’aperçu, un service lit le titre, la description et l’adresse de l’image enregistrés sur la page. Ces informations sont les métadonnées. Open Graph permet de les identifier. Vous pouvez généralement les renseigner dans les réglages du site, sans écrire de code. Le guide MDN sur les métadonnées explique leur différence avec le contenu visible de la page.

Les applications n’affichent pas toutes le même aperçu. Elles peuvent recadrer l’image, raccourcir le titre ou ne rien afficher. Votre site ne contrôle donc pas entièrement la carte. Vérifiez le résultat dans le service où vous comptez partager le lien.

Quelle taille choisir pour l’image de partage?

Commencez par une image de 1200 × 630 pixels, sauf indication différente de votre site. Cela signifie 1200 petits points de large et 630 de haut: l’image est presque deux fois plus large que haute. C’est une recommandation pratique, pas une obligation universelle.

Par exemple, les conseils de LinkedIn recommandent 1200 × 627 pixels pour l’aperçu d’une publication de Page. Ne déformez pas une image pour quelques pixels d’écart. Suivez les consignes du service lorsque vous préparez une version pour un emplacement précis.

Les dimensions et le poids sont différents: les pixels indiquent la taille de l’image, les kilo-octets (Ko) ou mégaoctets (Mo) son poids. Il n’existe pas de poids idéal universel. Comparez les copies et gardez la plus légère si elle reste nette. Vérifiez aussi la limite du service.

Si l’original mesure 1600 × 1600, prévoyez d’abord un cadrage horizontal. Passer directement à 1200 × 630 peut déformer le sujet si l’outil ne conserve pas les proportions. Notre guide du redimensionnement sans déformation explique la différence entre recadrer et changer les dimensions.

Concevez une image lisible en petit

L’aperçu apparaît souvent sur un téléphone, au milieu d’autres contenus. Les petits détails peuvent disparaître. Choisissez ce que la personne doit comprendre tout de suite: le thème de l’article, le type d’événement ou le produit derrière le lien.

« De meilleures photos produit » peut mieux fonctionner sur l’image que le titre complet avec son sous-titre. Le titre apparaît souvent aussi sous l’image. N’essayez pas de tout y mettre; les informations essentielles doivent également figurer dans le texte de la page.

Choisissez des couleurs qui font bien ressortir le texte. Laissez de l’espace autour du sujet et éloignez les visages, produits et mots importants des bords. Il n’existe pas de zone sûre identique partout. Regardez l’image entière, puis un cadrage plus serré au centre.

Affichez le brouillon à environ 300 pixels de large ou en petit sur votre téléphone. C’est un test de lisibilité, pas une exigence technique. Peut-on lire sans zoomer et reconnaître le sujet? Sinon, raccourcissez le texte, agrandissez les lettres ou simplifiez les détails.

Pour une boutique, le produit doit être identifiable. Pour un événement, l’image peut donner le ton, mais la date et l’inscription doivent aussi être écrites sur la page. Un logo facilite la reconnaissance; le même grand logo sur chaque article renseigne peu sur son sujet.

Choisissez le format et allégez une copie

Le JPG est un point de départ pratique pour une photo. Le PNG convient quand le JPG rend les lettres ou les contours moins nets. Choisissez délibérément le fond: une image transparente dépend de l’interface qui l’affiche, et un logo clair peut devenir invisible.

Le WebP et l’AVIF peuvent convenir aux images du site. Leur prise en charge par le navigateur ne garantit pas celle du service qui crée les aperçus. Commencez ici par JPG ou PNG. Pour un autre format, vérifiez sa prise en charge et le résultat réel.

Préparez la composition dans votre logiciel de création. Utilisez l’outil de recadrage de Pixilo pour le cadrage, puis l’outil de redimensionnement pour les dimensions. Si le fichier doit respecter une limite, essayez la réduction à un poids maximal. Vérifiez le fichier téléchargé: ces outils ne configurent pas l’image de partage sur votre site.

La compression réduit le poids du fichier. Gardez l’original et travaillez sur une copie. Comparez la netteté des lettres, les contours du logo et les dégradés. Si la qualité baisse, repartez de l’original avec une compression plus légère. Retraiter une copie floue ne restaure pas les détails. Notre comparatif JPG et PNG aide à choisir pour les textes et les photos.

Ajouter l’image dans WordPress ou un créateur de sites

Ouvrez l’article dans l’administration du site. Cherchez « image de partage », « Social image » ou « Open Graph image ». Ce champ peut se trouver dans les réglages de référencement, souvent appelés SEO. Procédez ainsi:

1. Ouvrez la bonne page. Modifiez précisément la page ou l’article dont vous allez partager le lien.
2. Choisissez son image. Importez le fichier préparé ou sélectionnez-le dans la médiathèque, qui contient les images déjà ajoutées au site.
3. Vérifiez le titre et l’image par défaut. Le changement doit concerner cette page, sans remplacer l’image commune à tout le site.
4. Enregistrez et publiez. Importer un fichier dans la médiathèque ne suffit pas à changer les informations d’aperçu.
5. Testez le lien public. Utilisez les vérifications ci-dessous avant de le partager.

Dans WordPress, votre extension de référencement peut proposer ce réglage. Une extension ajoute des fonctions à WordPress. Par exemple, le guide de Yoast présente ses réglages d’images sociales. Les menus et aperçus dépendent de la version et de l’abonnement. Regardez d’abord ce qui existe avant d’installer une autre extension.

L’image de couverture peut servir d’image de partage, selon le thème et les extensions. La documentation technique de Yoast explique sa sélection. L’image par défaut est une solution de repli pour les pages sans image propre. Préférez un visuel spécifique pour les articles importants si cette image générale ne représente pas leur sujet.

Si vous ne trouvez pas le réglage, donnez l’adresse de la page et le fichier à la personne qui gère le site. Demandez-lui de configurer l’image et de vérifier les informations publiées. Coller les métadonnées dans le texte visible de l’article ne les place pas au bon endroit.

Facultatif: ajouter l’image dans le code de la page

Passez cette partie si vous avez choisi l’image dans les réglages du site. Elle concerne la modification directe du code. Le HTML décrit la structure d’une page; sa partie head contient les informations de fond, invisibles dans le texte de l’article. Ajoutez les indications suivantes à cet endroit. og:image indique l’adresse de l’image; les autres champs Open Graph décrivent la page. La spécification Open Graph explique ces champs. Cet exemple concerne un article. Pour une page générale, utilisez website comme type.

Remplacez le domaine, les adresses, le titre, la description et l’image par vos propres valeurs. Si vous indiquez 1200 × 630, le fichier doit réellement avoir ces dimensions.

<meta property="og:type" content="article">
<meta property="og:title" content="De meilleures photos pour votre boutique">
<meta property="og:description" content="Préparez des images claires et vérifiez-les sur votre fiche produit.">
<meta property="og:url" content="https://example.com/guides/product-photos/">
<meta property="og:image" content="https://example.com/images/product-photos-social.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Une tasse bleue sur fond clair avec le texte De meilleures photos.">

Utilisez une adresse HTTPS complète, avec le nom du site et le chemin du fichier. L’adresse de la page va dans og:url et celle de l’image dans og:image. L’adresse de la page doit correspondre à son adresse principale prévue. Pour un site multilingue, vérifiez que chaque version a le bon titre et la bonne adresse.

Décrivez le sujet et le texte important de l’image dans og:image:alt. Cette description alternative ne remplace pas celle d’une image visible dans l’article. Si le même visuel s’y trouve, renseignez aussi son texte alternatif, appelé alt, dans les réglages de cette image.

Vérifiez si le thème ou une extension fournit déjà ces champs et modifiez le réglage existant. Plusieurs images peuvent être voulues, mais des indications anciennes et nouvelles contradictoires rendent le choix incertain. Gardez l’image principale et ses dimensions ensemble.

Ces informations doivent être présentes dans le HTML publié lorsque le service consulte la page. Un ajout effectué plus tard dans le navigateur peut passer inaperçu. Si le site a des réglages distincts pour l’aperçu sur X, vérifiez également leur image.

Testez le lien publié avant le partage

Collez l’adresse publique dans le brouillon d’une publication ou d’un message. Attendez l’aperçu. L’image et le titre sont-ils corrects? Le texte est-il lisible? Testez dans le service prévu, sans envoyer le brouillon. Si l’image manque ou est incorrecte, poursuivez les vérifications.

Affichez ensuite le code source de la page publiée dans votre navigateur et cherchez og:image. Le nom de cette commande varie selon le navigateur. Vérifiez l’adresse de l’image, le titre et l’adresse de la page, ou demandez au responsable du site de le faire. Une adresse de brouillon ne teste pas le lien public.

Pour LinkedIn, utilisez Post Inspector. Pour Facebook, l’outil correspondant est Sharing Debugger. Collez l’adresse de la page et lancez l’inspection; une connexion peut être nécessaire. Vérifiez ensuite un nouveau brouillon. Rien ne doit être publié pour faire le test.

Notez l’adresse de la page, celle de l’image et le service testé. Si le lien marche à un endroit mais pas ailleurs, ces informations aident davantage que des changements d’image répétés. L’aide LinkedIn sur le cache précise que l’actualisation avec Post Inspector concerne les nouvelles publications; les aperçus existants restent inchangés.

Pourquoi l’image manque-t-elle ou reste-t-elle incorrecte?

Distinguez trois causes: la page indique la mauvaise image, le service n’accède pas au fichier ou il montre un ancien aperçu enregistré. Une meilleure qualité ne répare pas une mauvaise adresse. Actualiser votre navigateur ne vide pas le cache d’un autre service.

Si l’adresse de l’image ouvre une page web, le chemin peut être incorrect ou le fichier absent. Certains sites renvoient alors à l’accueil. Donnez les deux adresses au responsable et demandez-lui de vérifier l’accès au véritable fichier sans connexion.

Le cache est une copie enregistrée d’une page ou d’une image. Il accélère l’affichage mais peut vieillir. Un CDN distribue les fichiers depuis plusieurs serveurs et peut aussi garder des copies. Faites actualiser les copies du site si nécessaire. Vérifiez d’abord la page et l’image publiques, puis relancez l’inspection du service. Vider le cache de votre navigateur ne met pas les autres copies à jour.

Vous pouvez enregistrer la nouvelle image sous un nom distinct, par exemple product-photos-social-v2.jpg, puis modifier sa référence sur la page. Cela distingue les fichiers, mais ne force ni une nouvelle lecture de la page ni l’actualisation des anciens messages.

Ne changez pas inutilement l’adresse permanente de l’article et ne désactivez pas les protections pour essayer. Transmettez l’adresse et le message d’erreur au responsable. Il pourra examiner ce qui bloque l’accès à ce contenu public précis.

Exemple: l’aperçu d’un guide de photos produit

Imaginez un guide pour une boutique: sa couverture est une photo carrée de tasse, avec un titre long sur les images adaptées aux appareils. Le cadrage horizontal automatique coupe l’anse. Voici une démarche illustrative, pas un résultat mesuré.

1. Créez une version horizontale. Partez de 1200 × 630, montrez la tasse entière et laissez de l’espace autour.
2. Raccourcissez le texte de l’image. Essayez « De meilleures photos produit ». Gardez le titre complet dans l’article et le réglage du titre de l’aperçu.
3. Enregistrez et vérifiez. Comparez JPG et PNG: poids, lisibilité et contours du produit dans un petit aperçu.
4. Configurez l’image de la page. Choisissez le fichier dans les réglages de partage de l’article. Enregistrez et publiez.
5. Testez le lien. Vérifiez le fichier public, les informations de la page et un nouvel aperçu dans le service prévu.

Cette version peut convenir au lien sans être idéale pour Instagram ou une grande couverture de site. Gardez le fichier de création original pour produire d’autres variantes sans retoucher sans cesse le JPG final.

Quel rapport avec le référencement?

L’image aide une personne à comprendre le lien partagé. Ajouter og:image ne garantit pas de meilleures positions dans les résultats de recherche. Image de recherche, image visible sur la page et aperçu social sont des usages distincts; un réglage ne contrôle pas tout.

Choisissez un nom de fichier descriptif et un titre fidèle à la page. Décrivez l’image pour une personne, sans accumuler les mots-clés. Le guide SEO de Google parle de contenu utile et d’images compréhensibles. Notre guide des textes alternatifs et des noms de fichiers aide à décrire les images visibles sur une page.

Alléger l’image de partage ne rend pas automatiquement la couverture visible plus rapide. Si la page utilise un autre fichier, optimisez-le séparément. Évaluez la vitesse à partir des images réellement chargées.

Questions fréquentes sur les images de partage

1200 × 630 est-il obligatoire pour Open Graph?

Non. C’est ici une taille de départ pratique. Open Graph définit comment indiquer l’adresse et les dimensions; le service destinataire fixe l’affichage et les limites.

La couverture peut-elle servir d’image de partage?

Oui, si sa composition convient et si le site indique le bon fichier. Une version distincte aide pour une couverture verticale, carrée ou dont le texte devient trop petit.

Faut-il une image différente pour chaque page?

Pas forcément. Une image générale est un bon dépannage. Un visuel spécifique aide surtout pour les guides, produits et événements souvent partagés dont le logo seul n’explique pas le sujet.

Pourquoi l’ancienne image reste-t-elle dans une publication?

Le service peut conserver l’aperçu d’origine. Vérifiez un nouveau brouillon et ses consignes de mise à jour. Changer le fichier du site ne garantit pas la modification d’un message déjà envoyé.

Un bouton Partager ajoute-t-il l’image à l’aperçu?

Non. Il facilite l’envoi du lien, mais ne remplace pas les informations de la page. Le service destinataire décide de charger et d’afficher une carte. Partager directement le fichier image est une autre action.

Résumer avecChatGPT (s’ouvre dans un nouvel onglet)Grok (s’ouvre dans un nouvel onglet)Google (s’ouvre dans un nouvel onglet)Perplexity (s’ouvre dans un nouvel onglet)Claude (s’ouvre dans un nouvel onglet)