Vous avez un site WordPress, vous écrivez des articles ou des fiches produits, vous partagez sur X, sur Facebook, sur LinkedIn.
Et vous voyez à chaque fois : pas d’image, ou pire, une image mal cadrée à côté d’un titre qui ressemble à l'Almanet dé....
Vous avez vu ça aussi sur l’aperçu de votre site dans Google ?
Bienvenue dans le club des sites qui ont 10 ans et qui ont jamais nettoyé leurs meta-tags réseaux sociaux.

J’ai fait le ménage sur dolys.fr la semaine dernière.
Je vous note ce que j’ai fait, étape par étape, parce que les mêmes corrections marchent pour n’importe quel site WordPress.

Ce tuto n’est pas pour les développeurs.
Si vous savez tenir une souris et accéder à votre admin WordPress, vous savez tout faire.
Au pire on passe par SSH ou WP-CLI mais c’est rare.

Ce qu’il vous faut

• Un site WordPress avec accès admin
• Le plugin SEOPress en version gratuite (largement suffisante). Yoast fait pareil avec d’autres noms de champs
• Un éditeur d’image, GIMP fait l’affaire
• 30 minutes la première fois

Ce qu’on va régler

Quatre choses, par ordre d’impact :

1. Le favicon (l’icône dans les onglets navigateur et les favoris)
2. L’Open Graph (l’image et le texte qui apparaissent quand on partage un lien sur Facebook, LinkedIn, Slack, Discord, Mastodon, etc.)
3. La Twitter Card (idem mais pour X, avec ses propres règles)
4. Le Knowledge Graph Google (les infos qui s’affichent dans le Knowledge Panel à droite des résultats de recherche quand quelqu’un cherche votre marque)

Étape 1 : préparer trois images sources

Trois fichiers à créer ou retrouver, c’est la base.

Le logo carré 512×512 pour le Knowledge Graph

Google demande un logo carré, avec marge propre autour, et au moins 512×512 pixels.
Pas de texte autour, juste le logo.
Si vous avez votre logo en SVG ou PNG haute résolution, vous l’ouvrez dans GIMP, vous l’agrandissez ou réduisez en 512×512 avec une marge blanche d’environ 10% tout autour, vous exportez en PNG.

Si vous n’avez que votre vieux favicon en 194×194 ou 310×310, vous pouvez l’agrandir avec ImageMagick (ligne de commande, mais c’est puissant) :

convert mon-logo.png \
  -filter Catrom \
  -resize 460x460 \
  -background white \
  -gravity center \
  -extent 512x512 \
  logo-knowledge.png

Le Catrom est un filtre d’agrandissement qui préserve les courbes mieux que le défaut.
Le -extent 512x512 ajoute la marge blanche pour atteindre la taille exacte demandée par Google.

Le favicon 512×512 (logo serré, pour les onglets)

Différent du précédent : pas de marge, le logo remplit toute l’image.
WordPress va ensuite le réduire à 32×32 pour l’afficher dans l’onglet du navigateur.
S’il y a de la marge dans l’image source, le logo réduit n’aura plus que 18-20 pixels utiles et perdra ses détails.

Donc dans GIMP : votre logo recadré au plus juste, exporté en PNG 512×512 avec transparence si possible (le fichier .png peut contenir un canal alpha, ça rend mieux sur les fonds gris des onglets).

Le visuel Open Graph 1200×630 (l’image qui s’affiche dans les partages)

C’est le visuel qu’on voit quand on partage votre site sans qu’une page particulière n’ait été ciblée.
Pour la page d’accueil, les pages génériques, les fiches sans image dédiée.
Le ratio standard est 1200×630 pixels.

Composition recommandée :

• Votre logo en haut centre (200×200 pixels environ)
• Sous le logo : le nom de votre site en gros (taille ~120px)
• Sous le nom : votre punchline en 2 lignes
• En bas : votre nom de domaine en petit

Le plus simple pour générer ça est d’écrire un SVG une fois pour toutes, puis de le convertir en PNG :

rsvg-convert -w 1200 -h 630 -o og-fallback.png og-fallback.svg

Et voilà : 3 fichiers PNG dans un dossier logo/ quelque part sur votre disque, prêts à uploader.

Étape 2 : uploader les fichiers dans WordPress

Médias > Ajouter, vous uploadez les 3 PNG.
Profitez-en pour remplir le Texte alternatif de chacun (Logo nom-du-site, Aperçu social nom-du-site), c’est lu par les lecteurs d’écran et indexé par Google.

Étape 3 : définir l’icône du site

Réglages > Général > Icône du site > Choisir une icône de site > sélectionnez votre favicon 512×512 (le logo serré) > Enregistrer.

WordPress va automatiquement générer les balises <link rel="icon">, <link rel="apple-touch-icon">, <meta name="msapplication-TileImage"> et tout le pataclanque qu’il faut pour que votre logo s’affiche partout : onglets Firefox/Chrome, icônes Safari iOS, tuiles Windows.
Plus besoin de générer 25 versions du favicon à la main, WordPress fait le boulot.

Au passage, si vous avez de vieux fichiers apple-touch-icon-*.png, android-chrome-*.png, mstile-*.png à la racine de votre site (héritage d’une époque où on les générait à la main avec realfavicongenerator.net et compagnie), vous pouvez les supprimer.
Ils ne servent plus à rien, WordPress sert tout via les balises dans le <head>.
Vérifiez d’abord que rien dans votre thème ne les référence en dur :

grep -rni "favicon\|apple-touch-icon\|msapplication" wp-content/themes/votre-theme/

Si la commande ne retourne rien, vous pouvez nettoyer la racine sans risque.

Étape 4 : remplir le Knowledge Graph dans SEOPress

SEO > Réseaux sociaux > onglet Knowledge Graph.

Pour un site personnel ou un blog, choisissez « Personne ».
Pour une entreprise, une boutique, un média, une organisation, choisissez « Organisation ».

Champs à remplir :

• Nom : votre marque, courte. Pas la phrase complète de votre titre de site.
• URL de la photo / du logo : votre fichier 512×512 avec marge (celui de l’étape 1, pas le favicon serré).
• Description : une à deux phrases qui décrivent ce que vous faites.
• Tout le reste (email, téléphone, TVA, adresse) : laissez vide sauf si vous voulez que ces infos apparaissent publiquement dans le Knowledge Panel Google. Pour un site perso, laissez vide. Pour une entreprise avec une vraie présence physique et un service client, remplissez.

Sauvegardez.
Ces infos seront utilisées par Google pour construire votre Knowledge Panel sur le long terme.
Patience : ça peut prendre des semaines avant que Google ne synthétise ces données.

Étape 5 : configurer l’Open Graph (Facebook et autres)

Toujours dans SEO > Réseaux sociaux, onglet Facebook (Open Graph) :

• Activer les données Open Graph : ON
• URL par défaut de l’image OG : sélectionnez votre visuel 1200×630 (og-fallback.png)
• Override og:image globally : OFF, sinon les images custom de chaque article sont écrasées
• ID d’admin Facebook, d’app, fb:pages : laissez vide sauf si vous gérez activement votre page Facebook via Meta Business Suite (rarissime pour un blog ou un petit e-commerce)

Si votre site a des forums ou des sujets bbPress, il y a aussi des champs pour spécifier l’image par défaut des forums et des sujets : sélectionnez le même fichier og-fallback.png.

Étape 6 : configurer la Twitter Card

Onglet X (Twitter) :

• Activer les X Cards : ON
• Utilisez les données Open Graph comme solution de secours : ON (ça évite de tout redéclarer)
• URL par défaut de l’image de la carte X : le même og-fallback.png
• Image size for summary card : Grande (en anglais : summary_large_image). Sans ça, X affiche une petite vignette carrée à peine visible. Avec, X affiche une grande image qui prend toute la largeur de la carte. La différence visuelle est énorme.

Piège classique : dans l’onglet Comptes sociaux, le champ « Nom X » attend juste votre username, par exemple e_dolys, pas l’URL complète https://twitter.com/e_dolys.
Si vous y mettez l’URL, SEOPress génère twitter:site="@https://twitter.com/e_dolys" qui est invalide et casse complètement la prévisualisation de la carte sur X.
C’est probablement la cause d’une grande partie des cartes X qui ne s’affichent pas correctement sur les sites WordPress.

Étape 7 : tests et purge des caches

Sauvegardez tout, puis purgez le cache de votre site (LiteSpeed, WP Rocket, W3 Total Cache, peu importe).
Pour LiteSpeed Cache en SSH :

wp litespeed-purge all

Vérifiez ce que voit un crawler en allant sur votre site et en regardant le code source HTML (Ctrl+U dans Firefox), ou en ligne de commande :

curl -s https://votresite.com/ | grep -oE "og:image[^>]+|twitter:image[^>]+|twitter:card[^>]+|twitter:site[^>]+"

Vous devez voir :

• og:image qui pointe vers votre og-fallback.png
• twitter:card content= »summary_large_image »
• twitter:site content= »@votre_handle » (avec une vraie arobase, sans URL)

Étape 8 : forcer Facebook et X à recrawler

Les réseaux sociaux gardent en cache les meta-tags qu’ils ont lus lors de votre premier partage.
Si vous avez partagé votre site avant d’avoir tout configuré, ils ont mémorisé une version cassée.
Pour forcer un re-crawl :

• Facebook : developers.facebook.com/tools/debug/ > entrez votre URL > bouton « Scrape Again »
• LinkedIn : linkedin.com/post-inspector/ > entrez votre URL > « Inspect »
• X (Twitter) : pas de validateur officiel depuis Musk. Méthode bourrine : ajoutez ?v=2 à la fin de votre URL dans le tweet (X traite ça comme une nouvelle URL, recrawle, et ignore le ?v=2 qui n’a pas de sens pour WordPress). Si vous postez le même lien 3 fois, vous incrémentez : ?v=3, ?v=4, etc. Inélégant mais efficace.

Pour aller plus loin

• Bing : Bing utilise une partie des données OG, donc votre travail est déjà bénéfique. Au passage, si vous voulez apparaître proprement dans Bing Search, créez un compte sur Bing Webmaster Tools et vérifiez la propriété de votre site (souvent par un fichier BingSiteAuth.xml à la racine).
• Schema.org : SEOPress génère déjà du JSON-LD basique (WebSite schema). Pour aller plus loin, vous pouvez ajouter des schemas spécifiques (Product, Recipe, Article, FAQPage) via le plugin SEOPress lui-même ou via un plugin dédié comme Schema.
• Mastodon et Bluesky : ils lisent l’Open Graph standard, donc votre travail est immédiatement utile. Aucune config supplémentaire nécessaire.

Pourquoi c’est rentable

Pour une boutique e-commerce ou un site qui génère des leads, c’est probablement une des optimisations avec le meilleur retour sur investissement (en temps) que vous puissiez faire.
Plus impactant qu’une refonte graphique, moins coûteux qu’une campagne pub.
Quand quelqu’un partage votre fiche produit sur Slack ou WhatsApp et qu’on voit le titre tout sec sans visuel, ce sont des clics qui partent en fumée.
Une belle photo de votre produit en gros plan, une typo lisible, un titre engageant : c’est dix fois plus de chances qu’on clique.
Sur un volume de partages mensuels, ça se chiffre.

Récap des fichiers à produire une fois pour toutes

Trois fichiers, trois minutes par fichier dans GIMP, vingt minutes de config dans WordPress, et votre site arrête de ressembler à un fantôme sur les réseaux sociaux.

Bon nettoyage !