Une image WordPress mise en avant fonctionne comme une carte de bienvenue visuelle, un signal pour les visiteurs de venir et d’apprécier ce qui se cache derrière un lien. Elle présente souvent des informations utiles sous la forme d’une photographie ou d’une image graphique, permettant à l’utilisateur de jeter un coup d’œil furtif sur les informations qui se cachent derrière ce lien.

De plus, une histoire captivante n’est pas complète sans introduction, et c’est exactement le but d’une image mise en avant. Le site en bénéficie grandement, car elle transforme ce qui pourrait très bien être un site ennuyeux en quelque chose de beau. Elle permet également de rompre la monotonie du texte et d’ajouter de la vie à votre contenu.

Cet article vous montre comment vous pouvez corriger dans WordPress les images mises en avant qui ne s’affichent pas correctement sur votre site. Il y a de nombreuses façons de procéder, et nous allons les couvrir toutes.

Commençons !

Qu’est-ce qu’une image WordPress mise en avant ?

Articles des images mises en avant sur le blog de Kinsta

Images des articles mises en avant sur le blog de Kinsta

Par défaut, WordPress propose une image mise en avant pour tous les articles et toutes les pages.

Cela signifie que vous pouvez téléverser une image qui sert de couverture à l’article ou à la page, comme la couverture d’un livre ou d’un magazine. Vous pouvez téléverser une image mise en avant pour chaque article et chaque page. Elle est alors présentée comme l’image principale de cet article sur le site web lorsque l’article est partagé sur les réseaux sociaux et d’autres sites.

Enfin, l’image mise en avant s’affiche automatiquement lorsque vous créez un flux ou une galerie de vos articles de blog ou d’autres pages web. De cette façon, vous pouvez présenter une sorte de portfolio média pour vos articles au lieu d’un tas de liens avec seulement du texte.

Vous n’avez pas besoin de téléverser une deuxième version de cette même image à chaque fois que vous la partagez – elle est déjà récupérée depuis le contenu original.

Les images mises en avant dans WordPress ne s'affichent pas correctement sur votre site ? 🤷‍♂️ Apprenez comment y remédier une fois pour toutes 👇Click to Tweet

Que faire si l’image mise en avant ne fonctionne pas ?

Les images mises en avant sont merveilleuses, mais il se peut que vous ne puissiez pas voir une image mise en avant pour un article ou une page pour une raison ou une autre. Parfois, il y a un problème avec votre thème, et d’autres fois, vous trouverez qu’une extension est à l’origine du problème.

Il est également fréquent de constater des problèmes d’image à des degrés divers. Par exemple, vous pouvez remarquer que l’image mise en avant apparaît bien sur votre propre site web, mais qu’elle a du mal à être affichée lorsqu’un article est partagé sur un site social comme Facebook.

Quoi qu’il en soit, le fait qu’une image WordPress mise en avant n’apparaisse pas est à la fois frustrant et inquiétant.

Les images mises en avant ont souvent le même poids que l’attrait visuel de votre site web. Sans images mises en avant automatisées, vous vous retrouvez avec des blocs de texte et des liens vers des pages web. Cela peut également empêcher les gens de partager votre travail, car il n’est pas très intéressant de partager sur Facebook un article de blog qui ne comporte pas d’image.

Il existe plusieurs mesures que vous pouvez prendre pour atténuer les problèmes :

  1. Notez le problème exact, comme si l’image n’est pas en cours de téléversement. Ou si l’image mise en avant n’apparaît pas sur les réseaux sociaux, mais qu’elle fonctionne bien sur votre site web.
  2. Considérez tout problème WordPress qui pourrait être à l’origine du problème de votre image mise en avant, comme un conflit entre des extensions ou une erreur de code.
  3. Pensez à installer une extension qui résout les problèmes des images mises en avant sans que vous ayez à beaucoup travailler.

C’est un processus simple en trois étapes, mais il y a beaucoup plus de détails derrière la correction de vos images mises en avant. Les images se cassent pour diverses raisons, et c’est souvent du cas par cas.

Ci-dessous, nous allons aborder tous les problèmes que nous connaissons en ce qui concerne les images mises en avant et vous indiquer les mesures que vous pouvez prendre pour les résoudre.

Pourquoi mon image WordPress mise en avant ne s’affiche-t-elle pas ?

Vous avez remarqué un problème avec une ou plusieurs de vos images. Que faites-vous maintenant ?

Nous avons souligné les problèmes communs et inhabituels des images mises en avant. Commençons par les solutions les plus simples, en veillant à ce que vous téléversiez correctement vos images. Ensuite, nous examinerons plus en détail les autres erreurs.

Assurez-vous que vous savez comment téléverser une image dans WordPress

Cela peut sembler idiot à certains, mais de nombreux débutants sur WordPress ne savent pas comment téléverser une image mise en avant au débutt. Mais c’est très bien, car nous commençons tous à apprendre quelque part.

Nous vous recommandons de suivre ces étapes pour vous assurer que vous le faites de la bonne manière.

Note : Vous pouvez téléverser des images WordPress dans des articles et des pages, mais cette règle de base s’étend une fois que vous commencez à ajouter des éléments comme des pages de produits WooCommerce et des types de publications personnalisés. Par souci de simplicité, nous nous en tiendrons au téléversement d’images mises en avant dans les articles et pages WordPress.

Pour commencer, allez sur votre tableau de bord WordPress. Allez sur Articles > Ajouter pour créer un nouvel article de blog. Vous pouvez également le faire avec des pages ou cliquer sur l’option Tous les articles si vous souhaitez ajouter une image à un article déjà généré.

Lien « Articles > Ajouter » dans le tableau de bord de WordPress

Lien « Articles > Ajouter » dans le tableau de bord de WordPress

Insérez le contenu que vous souhaitez pour l’article de blog. Remplissez le titre, écrivez des paragraphes et téléversez des images dans l’article.

Cependant, n’oubliez pas qu’une image téléversée dans la zone de contenu de votre article de blog n’a rien à voir avec l’image mise en avant, même s’il s’agit de la première image que vous téléversez dans cet article.

Il y a une section complètement différente qui traite de l’image mise en avant.

Ceci n'est pas une image mise en avant

Ceci n’est pas une image mise en avant

Pour trouver et téléverser une image mise en avant, reportez-vous au panneau des Réglages de publication sur le côté droit. Celui-ci liste les différents réglages pour l’ensemble de l’article et peut également révéler les réglages spécifiques au bloc si vous avez un bloc Gutenberg WordPress actuellement sélectionné.

L'onglet « Image mise en avant »

L’onglet « Image mise en avant »

Assurez-vous que l’onglet Document est sélectionné.

Ensuite, faites défiler les réglages vers le bas. Les réglages des images mises en avant sont vers le bas.

Accéder aux réglages de l’article

Accéder aux réglages de l’article

Cliquez sur le panneau Image mise en avant pour ouvrir ses réglages.

Ici, vous verrez un bouton pour définir l’image mise en avant. En cliquant sur ce bouton, vous accédez directement à la médiathèque de WordPress.

Cependant, nous recommandons généralement de cliquer sur le bouton Sélectionner l’image, car il offre quelques choix supplémentaires pour choisir une source pour l’image mise en avant.

Cliquez sur « Sélectionner une image » dans l'onglet Image mise en avant

Cliquez sur « Sélectionner une image » dans l’onglet Image mise en avant

Comme promis, trois choix s’offrent à vous lorsque vous téléversez une image via un site web hébergé par Kinsta :

Choisissez en fonction du fait que vous avez ou non vos propres photos et de l’endroit où elles sont stockées.

Téléverser une image depuis la médiathèque

Téléverser une image depuis la médiathèque

En utilisant la médiathèque, vous pouvez voir les images que vous avez déjà téléversées dans WordPress. Vous avez la possibilité d’en choisir une et de cliquer sur le bouton Définir l’image mise en avant.

La médiathèque dispose également d’un onglet Téléverser des fichiers, où vous pouvez sélectionner des fichiers sur votre ordinateur et les téléverser dans votre médiathèque WordPress.

Choisissez une image pour « Définir l'image mise en avant ».

Choisissez une image pour « Définir l’image mise en avant »

La collection Pexels n’est pas très différente de votre médiathèque, sauf que vous avez le luxe de trouver de belles photos sans avoir à les prendre vous-même. Vous pouvez rechercher des mots-clés spécifiques et les définir comme vos images mises en avant. Là encore, les images de Pexels sont gratuites, mais vous devez donner un lien de crédit au photographe, qui est automatiquement inséré lorsque vous utilisez Pexels par le biais de WordPress.

Choisissez le média et cliquez sur le bouton « Sélectionner »

Choisissez le média et cliquez sur le bouton « Sélectionner »

Une miniature de l’image que vous utilisez apparaît sous le panneau Image mise en avant dans vos réglages de publication.

Cela signifie que tant que vous cliquez sur Enregistrer le brouillon ou Publier, l’image reste active sur cet article jusqu’à ce que vous la supprimiez.

Parmi les autres boutons qui apparaissent, citons les boutons Sélectionner l’image, Remplacer l’image et Supprimer l’image mise en avant. Tous ces boutons vous permettent d’ajuster ou de supprimer l’image actuelle.

Image WordPress mise en avant sous forme de miniature

Image WordPress mise en avant sous forme de miniature

Pour avancer et voir en action l’image mise en avant, cliquez sur le bouton Publier.

Le bouton Prévisualiser permet également de tester une image, mais le public ne peut pas la voir tant que vous n’avez pas cliqué sur Publier.

Cliquez sur le bouton « Publier »

Cliquez sur le bouton « Publier »

En fonction des réglages de votre thème et de divers autres facteurs, comme certaines extensions qui modifient les réglages des images, l’image mise en avant doit apparaître en premier dans l’article publié sur votre blog.

Comme vous pouvez le voir, l’image que nous avons insérée dans le contenu de l’article est affichée en deuxième position puisque l’image mise en avant est prioritaire.

Un exemple d'image mise en avant

Un exemple d’image mise en avant

Une autre façon de voir votre image mise en avant est de créer des galeries d’articles récents ou des flux de votre blog, généralement ailleurs sur votre site web.

Par exemple, nous avons ajouté un flux des Articles récents sur la page d’accueil de notre site test. Les images mises en avant de tous les articles de ce flux apparaissent sous forme de miniatures plus petites, offrant une expérience plus visuelle à ceux qui recherchent du contenu.

Galerie des articles affichant les images mises en avant

Galerie affichant les images mises en avant des articles

Si vos problèmes d’image ne sont pas dus à un malentendu sur le processus de téléversement, continuez à lire cet article.

Choisir accidentellement une image de couverture vs une image mise en avant dans WordPress

Une autre erreur simple mais courante commise par les utilisateurs de WordPress est de mettre en place une image de couverture pour un article ou une page et de supposer qu’elle fonctionne comme une image mise en avant.

Les images de couverture et les images mises en avant fonctionnent de manière similaire, en fournissant de grandes photos en haut des articles et des pages, mais elles présentent quelques différences. WordPress n’a ajouté que récemment le bloc Couverture à son éditeur Gutenberg. Par conséquent, ce problème est réservé à ceux qui l’utilisent.

La différence entre une image de couverture et une image mise en avant

Une image de couverture fournit une section d’image large ou en pleine largeur à ajouter n’importe où sur le site. Elle est utilisée pour montrer le début d’une nouvelle section ou d’un article. Vous pouvez insérer un bloc de couverture n’importe où dans un article ou une page, et pas seulement au début. De ce fait, une image de couverture fait partie de l’article ou de la page, et n’est pas séparée comme une image mise en avant.

Une image mise en avant sert d’image principale de l’article ou de la page représentant l’intégralité de cet article lorsqu’il est partagé ou distribué ailleurs sur votre site web ou en ligne. L’image mise en avant possède sa propre section de téléversement, à l’écart de l’éditeur de contenu. Elle est généralement située en haut de l’article ou de la page.

Le code de votre thème structure souvent l’emplacement et le formatage de l’image mise en avant. Par conséquent, vous devrez peut-être utiliser un code personnalisé pour personnaliser l’apparence de l’image mise en avant.

Enfin, une image de couverture permet des options de personnalisation uniques, comme la possibilité de placer un texte superposé sur l’image ou d’inclure un filtre. En général, une image de couverture est bien plus personnalisable directement à partir du tableau de bord de WordPress qu’une image mise en avant.

Regardez une image de couverture en action (et comment elle diffère d’une image mise en avant)

Examinons les différences fondamentales entre la couverture et les images mises en avant. Les deux peuvent être accessibles et mises en œuvre en allant dans les menus Articles ou Pages et en créant un nouvel élément ou en allant sur une ancienne page ou un ancien article.

Vous pouvez trouver l’image mise en avant dans le panneau des réglages de droite pour tous les articles et toutes les pages. Elle est séparée du contenu principal.

L'image mise en avant en action

L’image mise en avant en action

Un bloc Couverture, en revanche, se trouve dans la bibliothèque de blocs Gutenberg, accessible en cliquant sur un bouton Ajouter un bloc dans l’éditeur. Le bouton Ajouter un bloc ressemble au signe « ».

Cliquez sur le bouton « Ajouter un bloc ».

Cliquez sur le bouton « Ajouter un bloc »

Vous pouvez rechercher le bloc Couverture ou faire défiler la bibliothèque pour le trouver.

Cliquez sur le bloc Couverture pour l’insérer dans votre article ou votre page.

Choisir le bloc « Couverture »

Choisir le bloc « Couverture »

Le bloc de Couverture est placé dans l’éditeur de contenu, loin de la zone dans laquelle nous avons vu l’image mise en avant.

Vous pouvez téléverser une image pour votre couverture en cliquant sur les boutons Sélectionner un média ou Téléverser.

Sélectionner un média pour votre image de couverture

Sélectionner un média pour votre image de couverture

La nouvelle couverture apparaît dans l’aperçu de l’éditeur, et vous pouvez également modifier les réglages du bloc dans le panneau de droite.

Ceci une image de couverture

Ceci une image de couverture

Il est également assez courant d’ajuster la couverture pour remplir toute la largeur de la page, ce qui rend encore plus efficace l’introduction d’un article ou d’un séparateur entre les sections.

Choisissez l'alignement de votre image de couverture

Choisissez l’alignement de votre image de couverture

En général, si vous modifiez une image, comme une couverture ou un élément média standard, vous n’utilisez pas une image mise en avant dans l’article WordPress ou dans les éditeurs de pages.

C’est peut-être la cause de vos problèmes d’image. Une image de couverture, ou toute image placée dans la zone de contenu d’un article, n’apparaîtra pas ailleurs (comme dans une liste des articles récents) comme l’image mise en avant.

Et s’il y a une image mise en avant ?

Certains utilisateurs de WordPress effectuent toutes les étapes nécessaires pour téléverser une image, mais se rendent compte qu’un double de l’image apparaît. Vous verrez généralement ce phénomène se produire sur les listes d’articles ou en haut d’une page ou d’un article, ce qui entraîne l’empilement de deux photos identiques.

C’est très probablement parce que vous avez téléversé une image mise en avant tout en incluant la même image dans votre contenu en tant que couverture ou image normale. Il en résulte un problème de duplication d’images comme celui-ci :

Images dupliquées

Images dupliquées

Il est évident que vous ne voulez pas de cela. Habituellement, les images dupliquées ne sont pas deux images mises en avant, mais une image mise en avant et une photo séparée dans la zone de contenu de l’article.

Pour vérifier, rendez-vous sur l’article ou la page WordPress en question. Localisez le panneau des réglages vers le côté droit de la page. Ensuite, sélectionnez l’onglet Article (ou Page si vous modifiez une page) pour afficher les réglages de l’article.

Aller aux réglages de l’article

Aller aux réglages de l’article

Faites défiler ce panneau vers le bas et ouvrez le menu déroulant Image mise en avant.

Consultez l'onglet « Image mise en avant »

Consultez l’onglet « Image mise en avant »

Si vous voyez la même photo sous l’onglet Image mise en avant et dans votre contenu, c’est la cause du problème !

Il y a deux solutions à cela. Premièrement, vous devez décider de ce que vous essayez de faire. Si l’objectif est de ne pas avoir d’image mise en avant, vous pouvez la supprimer complètement.

Nous rencontrons souvent des gens qui veulent cette image et qui pensent simplement que l’éditeur de contenu est l’endroit où la mettre. Dans ce cas, vous devez conserver la photo sous la zone Image mise en avant et supprimer celle qui se trouve dans l’éditeur de contenu de l’article.

Afficher l'image mise en avant

Afficher l’image mise en avant

Pour supprimer ce bloc d’image, cliquez sur l’icône en trois points après avoir sélectionné le bloc d’image.

Cliquez sur l’option Supprimer le bloc à la toute fin de la liste.

Afficher plus de réglages en cliquant sur l'icône de trois points

Afficher plus de réglages en cliquant sur l’icône des trois points

Il ne doit pas y avoir d’image au début de l’article, mais juste un aperçu des miniatures dans le module Image mise en avant.

Il devrait en être ainsi si vous voulez la fonctionnalité d’une image mise en avant sans duplication !

Correction d'une image WordPress mise en avant ne s'affichant pas correctement

Correction d’une image WordPress mise en avant ne s’affichant pas correctement

Que faire si l’image mise en avant ne semble pas correcte ?

Vous avez trouvé comment téléverser une image mise en avant et complété le contenu de votre article. La seule chose à faire ensuite est d’examiner et de publier l’article.

Malheureusement, vous découvrez que l’image mise en avant n’est pas aussi belle que vous l’espériez.

Vous rencontrerez peut-être l’une des situations suivantes :

Heureusement, WordPress comprend déjà une large gamme d’outils de retouche photo pour vous permettre de garantir un aspect professionnel de l’image mise en avant. Il est également prudent de comprendre quels types de photos fonctionnent bien avec les images mises en avant, car ce sont peut-être les photos originales qui sont à l’origine des problèmes.

Comprendre quelles photos fonctionnent bien en tant qu’images mises en avant

C’est une bonne pratique de savoir quelles photos s’affichent bien sur WordPress. De plus, il est essentiel de réaliser que les images mises en avant s’affichent différemment par rapport à une photo ordinaire téléversée sur un article ou une page.

En commençant par les dimensions, tous les sites web, ou plus précisément les thèmes des sites web, ont des dimensions variables pour les images mises en avant dans les articles. Le fait de déterminer les dimensions optimales avant de téléverser les images vous permet de réduire au minimum les cas où l’image mise en avant est étirée ou rognée de manière étrange.

Bien qu’il n’y ait pas de taille recommandée pour une image mise en avant sous WordPress, nous suggérons de commencer avec 1200 x 628 pixels.

Cela signifie que vous ne pouvez pas simplement prendre n’importe quelle photo et vous attendre à ce qu’elle ait l’air géniale en tant qu’image mise en avant. Il est préférable de modifier une photo pour qu’elle corresponde aux dimensions suggérées avant de la téléverser dans WordPress.

Cependant, la suggestion de 1200 x 628 pixels n’est qu’un point de départ. Vous découvrirez peut-être que votre thème se débrouille bien avec des images légèrement plus larges ou plus petites.

Voici quelques règles générales à suivre avant de téléverser votre image mise en avant :

Une autre tactique pour trouver et définir la taille d’image idéale est de vous rendre sur la section Média de votre tableau de bord WordPress.

Allez dans Réglages > Médias.

Aller aux réglages de la médiathèque

Aller aux réglages des la médias

Voici les réglages généraux des médias pour l’ensemble de votre site WordPress. Les dimensions définies dictent les dimensions maximales que vous verrez sur votre site web pour les tailles d’image données.

Trois tailles d’images sont souvent configurées sur WordPress : Miniature, Moyenne et Grande.

La taille Miniature est l’image mise en avant dans d’autres parties de votre site web, en dehors de l’article lui-même. Par exemple, vous pouvez voir l’image mise en avant apparaître dans une liste d’articles récents ou dans un flux de blog sur votre page d’accueil.

Vous avez la possibilité de recadrer aux dimensions exactes la miniature de l’image mise en avant. Comme alternative, il est souvent préférable de ne pas cocher la case Recadrer la miniature. Les dimensions de la miniature sont donc plutôt utilisées à titre indicatif. De cette façon, les miniatures restent proportionnelles et vous ne voyez pas d’effets inattendus.

La Grande taille dicte souvent les dimensions de l’image mise en avant lorsqu’elle est affichée en haut d’un article ou d’une page. Parfois, d’autres réglages l’emportent, mais ce n’est pas une mauvaise idée de noter les dimensions pour vous assurer que vous connaissez au moins la largeur optimale de l’image.

La hauteur maximale ne devrait pas avoir autant d’importance puisque les images mises en avant ne devraient pas être aussi grandes.

Définir les différentes tailles de médias

Définir les différentes tailles de médias

Comment modifier les images mises en avant dans WordPress

La modification d’une image dans WordPress est souvent le moyen le plus simple et le plus rapide de résoudre un problème avec une image trop grande ou nécessitant un recadrage.

Nous recommandons généralement de modifier une image avant de la téléverser en tant qu’image mise en avant (les outils tiers de modification ont des fonctionnalités plus avancées). Cependant, WordPress propose des fonctions simples de modification qui peuvent s’avérer plus faciles pour certains utilisateurs ou pour ceux qui souhaitent modifier des images déjà téléversées dans WordPress.

Pour modifier des images mises en avant dans WordPress, ouvrez un article et faites défiler jusqu’à la section Images mises en avant dans le panneau Réglages de l’article.

Cliquez sur la miniature de l’image mise en avant pour accéder à ses différents réglages. Il est également possible de localiser toutes les images sur votre site WordPress en allant dans la Médiathèque.

Vous pouvez voir l'image mise en avant sur le côté

Vous pouvez voir l’image mise en avant sur le côté

Assurez-vous que la bonne image est sélectionnée dans la médiathèque.

Cliquez sur le lien Modifier l’image pour procéder à la modification.

Cliquez sur le lien « Modifier l'image ».

Cliquez sur le lien « Modifier l’image ».

Plusieurs outils sont disponibles dans la fenêtre contextuelle Modifier l’image, mais le plus fiable d’entre eux est sur le côté droit, et il s’intitule Nouvelles dimensions.

Cela vous permet de saisir de nouvelles dimensions, en largeur et en hauteur, de sorte que l’image déjà téléversée se rétrécit. Nous vous recommandons de ne pas essayer d’agrandir une image, car cela ne ferait que la rendre floue.

Définir les dimensions de l'image

Définir les dimensions de l’image

Saisissez les nouvelles dimensions et cliquez sur le bouton Redimensionner.

Choisissez les dimensions

Choisissez les dimensions

L’image de prévisualisation doit paraître un peu plus petite qu’auparavant, sauf si le changement est si minuscule que vous ne le remarquez pas.

Vous verrez un message qui vous indique Image enregistrée. Les nouvelles dimensions sont également indiquées sur le côté droit de la fenêtre contextuelle.

Enregistrer l'image modifiée

Enregistrer l’image modifiée

Tous les autres outils d’édition d’images sont situés au-dessus de l’aperçu de l’image présentée.

Parmi les fonctions d’édition d’images intégrées à WordPress, on peut citer

L’outil Recadrer est généralement le plus important, alors cliquez dessus pour activer le module de modification.

Cliquez sur le bouton « Recadrer »

Cliquez sur le bouton « Recadrer »

L’outil Recadrer révèle un carré dans la miniature de prévisualisation, vous demandant de cliquer et de faire glisser la boîte de recadrage pour qu’elle atteigne les dimensions exactes que vous souhaitez.

La boîte de recadrage de l'image

La boîte de recadrage de l’image

Appuyez sur la touche Entrée pour activer le recadrage et voir le résultat dans l’aperçu. Vous avez également la possibilité d’enregistrer le recadrage.

Cliquez sur le bouton « Enregistrer ».

Cliquez sur le bouton « Enregistrer »

La dernière façon de modifier les images mises en avant dans WordPress consiste à recadrer l’image tout en conservant un certain ratio hauteur/largeur. Cela signifie que lorsque vous déplacez la boîte de recadrage, elle reste dans le ratio d’image.

Par exemple, vous pourriez saisir un ratio d’aspect de 2 x 1. Par la suite, chaque fois que vous ferez glisser la boîte de recadrage, elle respectera toujours le ratio 2 x 1, ce qui vous donnera moins de liberté pour recadrer et vous permettra de conserver un rapport constant lors de la création des images mises en avant.

Recadrage de l'image

Recadrage de l’image

Lorsque vous avez fini de modifier une image, vous pouvez cliquer sur Entrée pour activer la modification, puis Enregistrer l’image. Ensuite, vous pouvez insérer la nouvelle version de cette image dans un article, une page, une image mise en avant ou tout autre endroit où vous souhaitez qu’elle soit affichée sur votre site.

En outre, le panneau Modifier l’image comporte une option qui vous permet de revenir aux dimensions d’origine quand vous le souhaitez.

Corriger l’image WordPress mise en avant qui n’apparaît pas dans les pages et les articles

Si vous avez téléversé correctement l’image de votre article ou de votre page et qu’elle n’apparaît toujours pas, il peut y avoir plusieurs raisons. Cependant, cela varie en fonction de la configuration, du thème et des extensions de votre site WordPress. Voici quelques raisons courantes qui conduisent à des problèmes avec les images mises en avant :

Comment corriger une erreur HTTP avec les images mises en avant

Quelques erreurs sont plus fréquentes que d’autres lors du téléversement d’images dans la médiathèque sous WordPress.

Heureusement, avec l’évolution de WordPress, les erreurs sont devenues un peu moins ambiguës, ce qui permet de déterminer plus facilement leur cause.

Cependant, vous pouvez toujours voir une erreur vague, comme le message suivant « erreur HTTP ». Cela signifie généralement qu’il y a un problème avec l’image elle-même, ou que vous devez autoriser des téléversements plus importants sur votre site WordPress.

Erreur HTTP lors du téléversement de nouveaux médias

Erreur HTTP lors du téléversement de nouveaux médias

Il est plus courant de voir quelque chose avec des détails, comme un message qui vous dit qu’une image ou une vidéo « Dépasse la taille maximale de téléversement pour ce site ».

Le fichier dépasse la taille maximale de téléversement

Le fichier dépasse la taille maximale de téléversement

Quoi qu’il en soit, toutes ces erreurs sont frustrantes et déroutantes pour les utilisateurs. Même s’ils vous disent que l’image est trop grande, comment passer à autre chose ?

En général, les solutions suivantes ont tendance à vous aider avec les codes d’erreur vous indiquant qu’une image est soit trop grande, soit non prise en charge pour le téléversement :

Augmenter votre limite de mémoire WordPress

Votre hébergeur fixe souvent les limites de mémoire de WordPress. Vous pouvez contacter votre hébergeur actuel et lui demander d’augmenter la limite PHP.

Erreur de limite de mémoire épuisée telle qu'elle apparaît dans WordPress

Erreur de limite de mémoire épuisée telle qu’elle apparaît dans WordPress

Si cela est autorisé, vous pouvez également modifier vous-même la limite de mémoire PHP en modifiant le fichier wp-config.php de votre site. Dans certains cas, vous devrez passer à un plan d’hébergement plus important qui offre plus de ressources pour votre site.

Nous vous recommandons de consulter ce guide pour vous guider dans ces étapes en détail.

Diminuer la taille du fichier image

Le téléversement de fichiers volumineux sur votre site WordPress entraîne des problèmes de performances et peut surcharger vos serveurs d’hébergement. C’est pourquoi de nombreux hébergeurs, et WordPress lui-même, définissent une taille maximale pour le téléversement de fichiers.

Un autre exemple d'erreur sur la taille maximale de téléversement dans WordPress

Un autre exemple d’erreur sur la taille maximale de téléversement dans WordPress

En outre, toute image que vous utilisez sur votre site, y compris les images mises en avant, ne devrait pas être aussi grande, pour commencer. Vous pouvez toujours conserver la qualité d’une image après compression, recadrage ou redimensionnement. Tant que l’image n’est pas trop petite, vous devriez pouvoir offrir une belle image mise en avant.

Nous vous recommandons donc d’utiliser des outils de recadrage, de compression et de redimensionnement avant d’opter pour une augmentation de votre limite de mémoire PHP.

Parmi les outils de modification d’images non WordPress que vous pouvez utiliser, citons GIMP, Photoshop Express et Paint.NET.

La modification dans WordPress est également une option, mais cela ne résout généralement pas le problème d’obtenir l’image WordPress au départ. Si vous optez pour cette solution, nous recommandons une extension de compression d’image qui réduit et optimise automatiquement toutes les images téléversées dans WordPress, comme Optimole ou Imagify. De cette façon, vous ne limitez pas les ressources de votre site avec trop de grandes photos.

Comment réparer les images dont le code est suspect

Malheureusement, une image contenant un malware ou un virus est déjà compromise. La bonne nouvelle est que WordPress bloquant une image pour cette raison signifie que WordPress a fait son travail !

Bien qu’il existe peu de solutions simples pour supprimer les codes suspects, votre meilleure chance est de vous en tenir aux photos que vous achetez légalement ou de prendre vos propres photos au lieu de les récupérer directement sur Google (ce qui est de toute façon techniquement illégal) ou bien de trouver des images sur des sites web douteux.

Nous vous recommandons également d’héberger votre site auprès d’une entreprise qui prend les logiciels malveillants au sérieux et qui offre une garantie de sécurité.

Comment modifier les autorisations pour permettre la visualisation d’images mise en avant

Les autorisations WordPress déterminent qui peut lire, écrire ou modifier les fichiers du site web. D’autre part, les rôles des utilisateurs dictent quelles zones du tableau de bord WordPress et du site web public sont accessibles à certaines personnes.

Il est possible que votre rôle utilisateur actuel ne vous permette pas de téléverser ou de visualiser les images mises en avant. Un autre problème est qu’une certaine page ou un certain article dans vos fichiers WordPress ne soit pas accessible en raison des autorisations d’utilisateur.

La clé pour résoudre ce problème est de s’assurer que vos rôles et autorisations d’utilisateur sont correctement définis.

Nous vous recommandons de lire notre guide sur les rôles des utilisateurs de WordPress afin de vous assurer que tous les membres de votre équipe puissent visualiser à tout moment les images mises en avant et y accéder.

Comment résoudre un conflit ou un problème avec un thème ou une extension

Les thèmes et les extensions font partie des raisons les plus courantes pour lesquelles les images mises en avant échouent ou sont bloquées.

Tous les thèmes n’ont pas les mêmes réglages d’image. Parfois, les images mises en avant des pages sont complètement bloquées. Dans d’autres cas, vous pouvez remarquer qu’un thème présente une image à un endroit différent de celui prévu.

De plus, vous devrez peut-être configurer un thème spécifique de façon à ce que les images mises en avant soient présentes dans tous les articles.

Malheureusement, nous ne pouvons pas vous présenter les solutions à ces problèmes, car il vous faut soit examiner les réglages du thème, soit contacter le développeur du thème.

Cependant, les conflits d’extensions sont une autre histoire. Les extensions, bien que plutôt utiles pour construire un site WordPress, ont parfois un code douteux. Ou bien elles ne sont tout simplement pas mises à jour, ce qui entraîne toutes sortes de conflits.

Ce n’est pas une règle, mais il est également fréquent de constater des problèmes avec les images mises en avant lorsque certaines extensions ont accès à votre médiathèque ou modifient les fonctionnalités de toutes les images.

Quoi qu’il en soit, la meilleure chose à faire est de suivre ces étapes :

  1. Mettez à jour toutes les extensions installées sur votre site web.
  2. Vérifiez si vous pouvez maintenant téléverser et voir vos images mises en avant.
  3. Si le problème est résolu, alors il s’agit d’une erreur provenant d’une extension obsolète.
  4. Si le problème n’est pas résolu, procédez à la désactivation de toutes les extensions.
  5. Là encore, vérifiez si les images mises en avant apparaissent après la désactivation de toutes les extensions. Si ce n’est pas le cas, réactivez les extensions et passez à une autre cause du problème.
  6. Si les images mises en avant fonctionnent maintenant, c’est qu’une de vos extensions était en cause.
  7. Réactivez chaque extension une par une. Après chaque réinstallation, vous devez vérifier si les images mises en avant fonctionnent et s’affichent correctement.
  8. Si l’image mise en avant ne fonctionne pas, vous savez quelle extension est à l’origine du problème.
  9. Désinstallez cette extension et cherchez une alternative.

Résoudre le problème de prise en charge de l’image mise en avant d’un thème

Une chose intéressante à propos des images mises en avant est que certains thèmes WordPress peuvent ne pas les prendre en charge. Cela est dû à une grande variété de raisons. Le thème n’est pas bien codé, ou le développeur a volontairement supprimé la fonctionnalité par défaut de l’image mise en avant – principalement parce qu’il dispose d’autres réglages pour contrôler l’image mise en avant.

Quelle que soit la raison, vous pouvez constater que votre thème WordPress ne prend pas en charge les images mise en avant. La solution consiste souvent à se rendre dans les réglages du thème et à localiser la zone personnalisée des images mises en avant.

Cependant, vous constaterez peut-être que le thème a supprimé les images mises en avant dans le code, et qu’il ne dispose pas d’outils supplémentaires pour pallier l’absence d’images mises en avant.

Nous vous recommandons donc de vérifier le support de votre thème pour les images mises en avant. Vous pouvez le faire en demandant simplement au développeur du thème, en lisant la documentation, ou en allant dans le fichier functions.php.

Le bloc de code suivant est celui que vous pouvez insérer (ou rechercher) dans le fichier functions.php :

add_theme_support( 'post-thumbnails');

Régler un problème d’image mise en avant à cause d’un chargement différé

Le chargement différé (Lazy Loading) est l’une des nombreuses méthodes utilisées pour optimiser les images afin d’améliorer les performances du site. Elle consiste à interrompre le chargement des images d’une page jusqu’à ce qu’elles apparaissent à l’écran. Par exemple, la dernière image d’un long article ne doit pas nécessairement se charger jusqu’à ce que l’utilisateur descende au bas de la page et arrive à cette image.

Cependant, le chargement différé pose souvent des problèmes avec les images mises en avant car certaines extensions de chargement différé traitent les images mises en avant comme des images normales. Ces extensions ne sont pas toujours la meilleure solution si elles empêchent l’image de figurer dans la liste des derniers articles, ou si elles ralentissent le chargement de l’image – l’image devrait se charger immédiatement pour une expérience utilisateur optimale.

De nombreuses extensions d’optimisation d’images offrent une fonctionnalité de chargement différé en tant que module. Vous devez donc vérifier pour chaque extension si cette fonctionnalité est activée sur votre site.

Une fois que vous avez trouvé le coupable potentiel, arrêtez le chargement différé, videz le cache de votre site et vérifiez si cela résout les problèmes que vous pourriez avoir avec vos images mises en avant.

Activer le chargement différé d'images avec Jetpack

Activer le chargement différé d’images avec Jetpack

Voici quelques extensions qui ont tendance à inclure des fonctionnalités de chargement différé :

L’image WordPress mise en avant n’apparaît pas dans la bonne position

Chaque modèle de page et d’article WordPress précise l’emplacement d’une image. Un thème ou une extension le définit généralement.

Vous trouverez généralement l’image mise en avant juste en dessous du titre et au-dessus de la première ligne. Il est possible qu’un thème ait changé cela. Vous pouvez déplacer l’image mise en avant à un autre endroit, par exemple en dessous de la première ligne du contenu ou au-dessus de la signature avec le nom de l’auteur.

Vous devez déplacer légèrement l'image

Vous devez déplacer légèrement l’image

Pour ajuster l’emplacement d’une image mise en avant, allez au modèle de la page ou de l’article utilisé.

Recherchez ce bout de code dans le fichier :

the_post_thumbnail();

Ce code est une référence à votre image mise en avant. Les miniatures des articles sont le nom que l’on donnait aux images mises en avant dans WordPress à ses débuts. Cela indique à WordPress d’afficher l’image mise en avant à l’endroit exact du modèle. La fonction the_post_thumbnail(); peut se situer avant le titre de la page ou après le contenu – cela dépend de la configuration de votre page et de votre thème.

Pour modifier l’emplacement de l’image mise en avant, coupez ce morceau de code et collez-le ailleurs dans le modèle de page ou d’article. En lui donnant une nouvelle position dans le modèle, vous indiquerez également à WordPress qu’il doit effectuer le rendu ailleurs sur l’interface publique.

Comme toujours, nous vous recommandons de sauvegarder votre site WordPress avant de modifier le code. Il est également conseillé de modifier les thèmes enfants plutôt que les fichiers du cœur de WordPress.

L’image mise en avant ne s’affiche pas en raison des réglages du tableau de bord

L’un des problèmes les plus frustrants avec les images mises en avant qui ne s’affichent pas concerne les réglages du tableau de bord.

Cette situation est frustrante car il s’agit d’un simple réglage dans le tableau de bord qui indique à WordPress d’afficher ou non la section de l’image mise en avant.

Cette situation se présente sous deux formes :

Voici comment réparer les deux.

Le premier problème survient lorsque vous ne pouvez pas voir les miniatures des images mises en avant dans votre liste de pages ou d’articles. Vous pouvez aller dans Articles > Tous les articles pour voir votre liste d’articles. Une colonne intitulée Image mise en avant est censée apparaître après la Date de publication. Cette colonne révèle la miniature de cette image mise en avant pour vous donner une idée rapide de ce qui apparaîtra sur l’interface publique de votre site.

liste des « images mises en avant »

Liste des « images mises en avant »

Mais que faire si ces miniatures sont introuvables ?

Cela signifie que vous avez désactivé un réglage de votre tableau de bord pour faire apparaître la colonne des images mises en avant.

Il n'y a pas de liste d'images pour le moment

Il n’y a pas de liste d’images pour le moment

Pour remédier à la situation, trouvez et cliquez sur l’onglet Options de l’écran dans le coin supérieur droit du tableau de bord.

Vous devez vous trouver dans le panneau des articles ou des pages pour que le panneau des options de l’écran apparaisse à droite.

Cliquez sur l'onglet « Options de l'écran » en haut de la page

Cliquez sur l’onglet « Options de l’écran » en haut de la page

La section Options de l’écran comporte une longue liste de champs à cocher et permet de définir ce que vous voulez dans votre tableau de bord WordPress.

Par exemple, vous pouvez ajouter ou supprimer des éléments tels que les étiquettes, les catégories et l’auteur.

Ici, nous voulons nous assurer que la case de l’image mise en avant est cochée.

La colonne Image mise en avant devrait maintenant apparaître dans votre liste d’articles ou de pages.

Assurez-vous de cocher la case « Image mise en avant »

Assurez-vous de cocher la case « Image mise en avant »

Un autre dilemme des options de l’écran se pose lorsque vous ne voyez pas le champ pour téléverser et insérer une image mise en avant. Ce champ est disponible sur tous les articles et pages WordPress en allant dans le panneau des réglages de l’article ou de la page.

Si vous constatez qu’il est manquant, suivez les étapes suivantes pour l’activer.

L'image mise en avant par WordPress ne s'affiche pas correctement

L’image mise en avant par WordPress ne s’affiche pas correctement

Trouvez et sélectionnez l’icône à trois points (⋮) dans le coin extrême droit du tableau de bord. Faites défiler la liste des réglages pour trouver l’option Préférences.

Cliquez sur Préférences pour faire apparaître une nouvelle fenêtre contextuelle.

L'onglet « Préférences » de l’article

L’onglet des « Préférences » de l’article

Le module des Préférences comprend un large éventail d’options pour un document. Faites défiler vers le bas jusqu’à la section intitulée Réglages du document.

En dessous, vous trouverez un champ appelé Image mise en avant. Assurez-vous que ce champ est coché pour faire apparaître l’option Image mise en avant dans vos articles et vos pages.

Cochez la case « Image mise en avant » sous Préférences

Cochez la case « Image mise en avant » sous Préférences

Vous pouvez également vous retrouver dans l’ancienne version de l’éditeur WordPress. C’est encore le cas pour de nombreuses pages, ou bien vous avez peut-être renoncé à l’éditeur Gutenberg pour utiliser l’ancien éditeur à la place.

Si c’est le cas, ouvrez la page ou l’article en question et cherchez le bloc Image mise en avant sur le côté droit de la page.

S’il n’y est pas, cliquez sur l’onglet Options de l’écran et cochez la case Image mise en avant pour la faire apparaître dans l’éditeur.

L'image mise en avant n'apparaît pas

L’image mise en avant n’apparaît pas

L’image mise en avant n’apparaît pas sur la page de la galerie des articles du blog

Une autre façon d’utiliser les images mises en avant est de mettre en ligne un flux de vos articles de blog sur la page d’accueil de votre site (ou toute autre page).

Mais que se passe-t-il si les images mises en avant ne figurent pas sur la page du blog ?

Articles récents listés sur le site de test

Articles récents listés sur le site de test

Il n’est pas rare que les marques partagent une liste des articles les plus récents, mais une galerie ou un flux avec seulement des liens peut ne pas attirer autant l’attention.

WordPress offre plusieurs façons de lister vos articles de blog ailleurs sur un site web, mais il faut parfois configurer les bons réglages pour qu’ils s’affichent correctement.

Note : De nombreux propriétaires de sites web utilisent des extensions tierces de galerie ou de listes d’articles pour y parvenir. Si c’est votre cas, vous devrez consulter le développeur de l’extension. Pour ce tutoriel, nous ne parlerons que de la manière de corriger les images mises en avant à l’aide des outils intégrés de WordPress.

L’affichage d’une galerie ou d’une liste de vos récents articles de blog se fait en ajoutant un élément de type bloc Gutenberg à la page désignée comme page d’accueil de WordPress.

Cela signifie que vous devez créer une page et l’assigner comme page d’accueil dans les réglages de lecture de WordPress.

Pour rappel, vous pouvez transformer n’importe quelle page WordPress en page d’accueil en allant dans Réglages > Lecture dans le tableau de bord.

Aller à la page des réglages de lecture

Aller à la page des réglages de lecture

Assurez-vous que la zone qui indique votre page d’accueil affiche est réglée sur une page statique. Cela montre que vous aimeriez avoir une page d’accueil personnalisable avec la possibilité d’ajouter et de supprimer des éléments de bloc grâce à des constructeurs de pages comme Gutenberg. C’est le contraire de l’affichage d’une liste de vos derniers articles.

Cliquez sur le champ déroulant de la Page d’accueil pour faire apparaître la liste des pages actuellement actives sur votre site web. Dans ce tutoriel, nous avons une page appelée « Homepage ». La vôtre peut avoir un nom différent selon le nom que vous lui avez donné.

Note : Vous pouvez toujours venir ici et changer la page d’accueil statique. Par exemple, vous pouvez vouloir réorganiser complètement votre page d’accueil, et il est plus facile de créer une nouvelle page au lieu de modifier la page actuelle.

Choisir la page d'accueil statique

Choisir la page d’accueil statique

Il est maintenant temps d’examiner le contenu de cette page pour s’assurer que les images mises en avant sont bien celles qu’elles devraient être.

Pour ajouter du contenu à votre page d’accueil, et pour ajuster les réglages du flux du blog sur cette page, allez sur Pages > Toutes les pages dans le tableau de bord.

Aller sur « Pages > Toutes les pages » dans l'administration de WordPress

Aller sur « Pages > Toutes les pages » dans l’administration de WordPress

Faites défiler la liste des pages pour trouver celle que vous avez assignée comme page d’accueil. Il doit y avoir un libellé Page d’accueil à côté. Là encore, dans ce tutoriel, nous avons nommé la page « Homepage », mais il se peut que vous ayez quelque chose de différent.

Cliquez sur la page spécifiée comme Page d’accueil.

Modifier la « page d'accueil »

Modifier la « page d’accueil »

Ajouter les derniers articles

Il se peut que le bloc Derniers articles soit déjà activé sur votre page d’accueil, mais si ce n’est pas le cas, vous pouvez le trouver en effectuant une recherche dans la bibliothèque des blocs Gutenberg. Ce bloc est appelé Derniers articles. Il vous suffit de cliquer sur l’icône pour l’insérer quelque part sur la page d’accueil.

Après cela, n’hésitez pas à le faire glisser vers le haut ou vers le bas sur la page d’accueil pour qu’il se trouve à la bonne place.

Ajout du bloc « Derniers articles » sur la « page d'accueil »

Ajout du bloc des « Derniers articles » sur la « page d’accueil »

Pour en revenir aux images mises en avant, il n’est pas réglé par défaut pour afficher les images mises en avant des articles de blog lorsque vous mettez le bloc Derniers articles dans une page. Vous pouvez voir une simple liste de liens, ainsi que les descriptions de ces articles.

Pour ajouter les images mises en avant, cliquez sur le bloc des Derniers articles. Cela sélectionne le bloc entier et révèle les réglages de ce bloc dans le panneau de droite.

Assurez-vous qu’il se trouve dans l’onglet des réglages du bloc. Il se peut que vous deviez le faire passer de Page à Bloc.

Accéder à l'onglet des réglages du « bloc »

Accéder à l’onglet des réglages du « bloc »

Faites défiler vers le bas dans l’onglet des réglages du bloc pour voir les options disponibles. Les premiers réglages n’ont rien à voir avec l’image mise en avant, mais ils peuvent affecter la façon dont les articles apparaissent dans le bloc et donner à vos images mises en avant un aspect étrange.

Nous vous recommandons d’expérimenter avec les réglages de contenu, comme contenu de l’article, afficher le nom de l’auteur ou afficher la date de l’article. Tous ces réglages entrent en jeu lorsque vous mettez en évidence vos derniers articles et que vous vous assurez qu’ils sont présentables tout en affichant vos images mises en avant.

L'onglet des « Réglages de contenu d’article »

L’onglet des « Réglages de contenu d’article »

La partie suivante est l’élément le plus important puisqu’elle active les images mises en avant dans le bloc des Derniers articles.

Trouvez la section intitulée Réglages d’image mise en avant.

Ici, activez l’option Afficher l’image mise en avant. Cela permet d’activer les images mises en avant pour tous les derniers articles. Si une image mise en avant n’est pas assignée à un article, elle affichera à la place un espace vide dans son bloc.

L'option « Afficher l'image mise en avant »

L’option « Afficher l’image mise en avant »

De plus, plusieurs réglages sont désormais disponibles pour donner un aspect professionnel aux images mises en avant. Ceci est particulièrement important si vous mettez en avant vos derniers articles sur la page d’accueil.

Par exemple, le champ Taille de l’image indique à votre site web la taille à laquelle doivent être affichées les images mises en avant figurant dans la liste ou la galerie. Si vous passez à l’option Miniature, ces images se réduisent légèrement et deviennent généralement des carrés parfaits.

Définir la taille de l'image mise en avant

Définir la taille de l’image mise en avant

Le passage en mode Grande ou Moyenne permet d’ajuster la taille de toutes les images mises en avant du bloc et d’ajouter une vue en mode paysage en fonction des dimensions de vos images.

Choisir la taille d'image « Grande »

Choisir la taille d’image « Grande »

Nous vous recommandons également d’examiner les dimensions de l’image. Ce réglage contrôle la taille de toutes les images mises en avant dans le bloc des Derniers articles. Vous pouvez saisir une largeur et une hauteur personnalisées, ou décider d’un pourcentage, de sorte que l’outil modifie automatiquement la taille de toutes les images mises en avant en fonction du pourcentage indiqué. Par exemple, vous pouvez réduire la taille de chaque image mise en avant à 25 % de sa taille d’origine.

Il y a également un réglage d’Alignement des images pour indiquer si les images doivent glisser vers la droite, le centre ou la gauche.

Régler les dimensions d'image mise en avant

Régler les dimensions d’image mise en avant

L’un des derniers points à prendre en compte pour la section Image mise en avant (dans le bloc des derniers articles) est le nombre d’articles que vous affichez dans le bloc et le nombre de colonnes qui le composent.

Comme la plupart des réglages de WordPress, ceux-ci ont également tendance à modifier l’apparence de vos images. En effet, un bloc de quatre colonnes nécessite beaucoup plus d’espace (et des images plus petites) qu’un bloc de deux ou trois colonnes.

Testez les champs Nombre d’articles et Colonnes pour vous assurer que vos images mises en avant sont à la fois présentables et attrayantes lorsqu’elles sont publiées sur la page d’accueil.

Définition du « nombre d'articles » et des « colonnes »

Définition du « nombre d’articles » et des « colonnes »

Une fois que tout est configuré, cliquez sur le bouton Publier. Vos derniers articles devraient apparaître à l’endroit où vous avez placé le bloc sur votre page d’accueil. En outre, les images de chaque article doivent être affichées au-dessus du titre de l’article et du lien.

Articles récents avec les images mises en avant

Articles récents avec les images mises en avant

L’image mise en avant de WordPress n’apparaît pas sur Facebook

L’image mise en avant apparaît également dans les intégrations lorsqu’un article ou une page est partagé sur des sites de réseaux sociaux.

Chaque réseau social a son propre affichage pour les contenus partagés, mais Facebook est un point de départ solide étant donné que c’est le plus populaire. Si l’image mise en avant apparaît sur Facebook, il y a de fortes chances qu’elle apparaisse également sur d’autres sites sociaux.

La grande question est de savoir si l’image mise en avant dans un article est correctement affichée quand vous partagez un lien sur Facebook. Si ce n’est pas le cas, comment remédier à ce problème ? Après tout, un article partagé sur Facebook sans image ne sera pas très populaire.

En ce qui concerne les images mises en avant sur Facebook, nous constatons souvent les problèmes suivants :

Toutes les préoccupations listées ci-dessus découlent de problèmes similaires. Elles vous disent toutes que Facebook a des difficultés à accéder aux données Open Graph depuis votre site web, ou qu’il n’y a pas de données Open Graph, pour commencer.

Comment vérifier si votre image apparaît correctement sur Facebook

Il n’y a aucune raison de passer en mode de dépannage si les images et le contenu de votre article sont bien visibles sur Facebook lorsque l’article est partagé.

Nous vous suggérons de faire un test pour voir si les images mises en avant apparaissent réellement sur Facebook ou non.

Une façon d’accomplir cette tâche est d’ouvrir votre compte Facebook et de prétendre que vous êtes sur le point de partager une mise à jour de votre statut.

Il vous suffit de coller le lien de l’article dans le champ de statut de Facebook (vous pouvez également le faire sur des pages personnelles ou professionnelles) et d’attendre de voir si le contenu de l’article est affiché, ainsi que l’image mise en avant.

La capture d’écran suivante montre un article qui fonctionne bien sur Facebook puisqu’il comprend un résumé du contenu de l’article, avec un lien, le titre et l’image mise en avant.

Note : Les images mises en avant sont extraites depuis WordPress et diffusées sur les sites de réseaux sociaux à l’aide d’un outil appelé Open Graph. Kinsta offre déjà la prise en charge d’Open Graph, ainsi que la possibilité de contrôler cela en utilisant Yoast SEO. Par conséquent, Kinsta interdit la majorité des extensions Open Graph car elles peuvent causer des conflits. Cependant, nous vous recommanderons quelques extensions Open Graph pour résoudre les problèmes si l’un de vos sites web utilise un autre hébergeur.

Image mise en avant de WordPress sur Facebook

Image mise en avant de WordPress sur Facebook

Une autre façon de voir si cela fonctionne est de vérifier si vous avez des boutons de partage social sur votre site web. Allez sur l’article en question, cliquez sur le lien Partager sur Facebook, et regardez si l’image en question apparaît dans la fenêtre pop-up.

Enfin, vous avez également la possibilité de visiter le Developers Debug Tool sur Facebook. Cet outil récupère les URL que vous voulez et vous indique si des erreurs se produisent lorsque Facebook accède aux informations. Il fournit également un aperçu clair de ce que vous pouvez vous attendre à voir si vous deviez coller ou partager cette URL sur Facebook.

Une fois sur la page de l’outil de débogage des développeurs, trouvez l’onglet Débogueur de partage et collez l’URL en question.

Cliquez sur le bouton Déboguer pour continuer.

L'onglet « Débogueur de partage » du portail Facebook pour les développeurs

L’onglet « Débogueur de partage » du portail Facebook pour les développeurs

Consultez notre guide pour en savoir plus sur l’outil de débogage de Facebook.

Il existe de nombreuses informations sur la façon dont votre URL interagit avec Facebook, mais il vous suffit de regarder l’aperçu. La zone d’aperçu de lien vous montre exactement à quoi ressemblera votre article si vous, ou quelqu’un d’autre, le partagez sur Facebook.

La capture d’écran ci-dessous nous indique que notre image mise en avant est très bien affichée. Mais que faire si ce n’est pas le cas ? Et si l’image mise en avant n’est pas la bonne, ou si vous ne voyez pas d’image du tout ?

C’est un problème, alors suivez les étapes ci-dessous pour vous assurer que votre image mise en avant est toujours prête à être utilisée pour le partage social.

Vérification de l'aperçu du lien d'une URL sur Facebook

Vérification de l’aperçu du lien d’une URL sur Facebook

Note : Parfois, les sites web plus récents ont des problèmes avec Facebook et d’autres sites sociaux parce que Facebook n’a pas encore parcouru le site. Pour cette raison, coller et déboguer l’URL dans l’outil de débogage de partage de Facebook pourrait en fait résoudre tous vos problèmes.

Un moyen facile de voir si le code Open Graph est activé sur votre site est d’utiliser une extension SEO. Beaucoup d’entre elles fournissent des outils permettant de prévisualiser ce qui apparaît sur Facebook et d’autres réseaux sociaux.

De plus, vous pouvez généralement activer le balisage Open Graph directement à partir des réglages d’une extension SEO.

Dans cette section, nous vous montrerons comment activer le balisage Open Graph avec deux des extensions SEO les plus populaires : AIO (All In One) SEO et Yoast SEO.

Pour l’extension SEO AIO, rendez-vous dans le menu All in One SEO et cliquez sur l’onglet Réseaux sociaux.

Choisissez l’option Facebook et faites défiler vers le bas pour localiser le champ permettant d’activer le marquage Open Graph. Par défaut, cette fonctionnalité devrait être activée, mais il est possible que vous l’ayez désactivée à un moment donné.

Vous pouvez également configurer les réglages pour avoir une source d’image par défaut, comme par exemple récupérer la première image d’un article ou bien l’image mise en avant.

Ensuite, cliquez sur le bouton Enregistrer les modifications et testez pour voir si le partage Facebook permet à l’image mise en avant d’apparaître.

Onglet des réglages Facebook d’AISEO

Onglet des réglages Facebook d’AISEO

Yoast SEO est une autre extension SEO qui comprend des fonctions de partage social et des options pour activer/désactiver la fonctionnalité Open Graph.

Ce qui est formidable avec Yoast SEO, c’est que la simple installation de l’extension peut faire l’affaire pour activer le protocole Open Graph pour le partage social.

Si vous avez toujours des problèmes, allez sur SEO > Social dans le tableau de bord WordPress.

Lien vers les réglages « sociaux » de Yoast SEO

Lien vers les réglages « sociaux » de Yoast SEO

Ici, sélectionnez l’onglet Facebook. Vous pouvez également le tester pour les autres réseaux sociaux comme Twitter et Pinterest.

Trouvez l’interrupteur Ajouter les méta-données Open Graph  et assurez-vous qu’il est réglé sur Activé.

Vous pouvez également définir une URL d’image par défaut qui apparaîtra si une image mise en avant n’est pas assignée à un article.

Veillez à enregistrer les modifications et essayez de partager un autre article pour voir si celui-ci permet maintenant de mettre des images mises en avant dans les articles partagés.

Facebook tab - WordPress featured image not showing

Chaque fois que vous apportez un changement, il est bon de revenir à l’outil de débogage de partage de Facebook pour promouvoir Facebook afin de rechercher plus de données sur l’article.

Vous pouvez cliquer sur le bouton Scrape Again ou simplement actualiser la page et coller à nouveau l’URL de votre article dans le champ.

Déboguer plusieurs URL en même temps sur Facebook

Vous avez peut-être beaucoup d’anciens articles qui ne génèrent pas d’images mises en avant lorsqu’ils sont partagés sur Facebook. C’est un énorme problème.

Si vous vous trouvez dans cette situation, nous vous recommandons de retourner à l’outil de débogage du partage de Facebook et de cliquer sur l’option Batch Invalidator.

paste in bulk - featured image not showing WordPress

Cela vous permet de coller jusqu’à 50 URL et de lancer l’outil pour que Facebook supprime à nouveau correctement ses métadonnées.

Vous avez deux possibilités pour récupérer les URL de votre site. La première consiste à le faire manuellement, en cliquant sur chaque article et chaque page de votre site et en rassemblant les URL dans un document.

Une alternative consiste à installer et à activer une extension comme Export All URLs. Elle prend toutes les URL de votre site et les exporte dans un simple document. De cette façon, vous pouvez les copier et les coller facilement dans l’outil de débogage du partage de Facebook.

Une fois que tout cela est fait, cliquez sur le bouton Déboguer pour traiter toutes les URL de la liste et faire en sorte que les images mises en avant, et toutes les autres données pertinentes, apparaissent lorsqu’elles sont partagées sur Facebook.

Options supplémentaires pour afficher l’image mise en avant de WordPress sur les réseaux sociaux

L’activation d’Open Graph sur votre site WordPress est essentielle pour afficher vos images sur des plateformes comme Facebook.

Si vous rencontrez des problèmes avec les extensions SEO mentionnées ci-dessus, ou si vous n’avez tout simplement pas l’intention d’utiliser une extension SEO (et n’avez donc pas accès à un bouton d’activation rapide d’Open Graph), il existe quelques autres options pour activer Open Graph.

Extension OG

La première est OG, qui est pratique pour ajouter le protocole Open Graph afin de transformer toute page web en objets riches pour les réseaux sociaux. L’extension est légère et n’offre aucune autre fonctionnalité, ce qui la rend idéale pour ceux qui ne sont pas intéressés par autre chose que la résolution du problème d’Open Graph.

Pour commencer, installez et activez l’extension OG sur votre site WordPress.

L’extension OG

L’extension OG

Le véritable avantage d’une extension comme OG est qu’elle ne nécessite aucune configuration après l’installation. Cela signifie qu’il n’y a pas de réglages à regarder ou à modifier avant qu’elle ne fasse son effet.

Le protocole Open Graph est automatiquement activé pour tous les articles et les pages WordPress.

Maintenant, allez sur votre page Facebook (personnelle ou professionnelle) et collez un lien avec une image mise en avant dans le champ Statut.

Image mise en avant sur Facebook

Image mise en avant sur Facebook

Avec l’extension OG activée, vous devriez maintenant voir les informations de l’article et l’image mise en avant dans l’aperçu.

Si vous n’y parvenez toujours pas, pensez à vous rendre sur le Débogueur de partage Facebook pour vous assurer que Facebook sait comment explorer votre site web, car c’est généralement le problème si vous avez déjà activé le protocole Open Graph.

L’extension Open Graph and Twitter Card Tags

Notre dernière option pour activer le protocole Open Graph afin de révéler les images mises en avant est l’extension Open Graph and Twitter Card Tags. En plus d’activer Open Graph pour tous les sites de réseaux sociaux, cette extension a l’avantage d’inclure des balises Twitter pour améliorer vos résultats de partage sur Twitter.

Là encore, Kinsta interdit de nombreuses extensions Open Graph, dont celle-ci. C’est parce qu’il n’est pas nécessaire d’activer une extension Open Graph avec Kinsta. Cependant, si vous utilisez un autre fournisseur d’hébergement, cela peut s’avérer utile.

Pour commencer, installez et activez l’extension Open Graph and Twitter Card Tags sur votre site WordPress.

Extension Open Graph and Twitter Card Tags

Extension Open Graph and Twitter Card Tags

Maintenant, allez dans Réglages > Open Graph and Twitter Card Tags. Cela vous amène aux réglages nécessaires pour activer le protocole Open Graph et calibrer les éléments de contenu que vous souhaitez voir lorsque vos articles et vos pages sont partagés sur des sites de réseaux sociaux.

Réglages d’Open Graph and Twitter Card Tags

Réglages d’Open Graph and Twitter Card Tags

Sélectionnez l’onglet Général et localisez la section Réglages de description. Ici, vous devez remplir des champs comme la longueur de la description, la description de la page d’accueil et la description par défaut. Ils ne contrôlent pas votre image mise en avant, mais ils s’affichent juste en dessous de l’image, ce qui est important pour l’affichage du contenu.

L'onglet « Général » sous Open Graph and Twitter Card Tags

L’onglet « Général » sous Open Graph and Twitter Card Tags

Faites défiler l’écran jusqu’à la zone appelée Réglages d’image. Un champ permet de choisir la provenance de l’image lorsque vous partagez un article ou une page sur les réseaux sociaux.

Cochez les deux premières cases pour obtenir l’image Open Graph, et l’autre pour utiliser l’image de la page ou de l’article.

Ce sont les réglages généraux de tous les partages sur les réseaux sociaux, en veillant à ce que Facebook et Twitter ne sélectionnent pas au hasard des photos de votre article ou d’autres endroits de votre site web.

Définir où utiliser l'image mise en avant

Définir où utiliser l’image mise en avant

Ensuite, cliquez sur l’onglet Facebook Open Graph. Ici, vous pouvez tout régler pour le protocole de partage Open Graph, mais uniquement les caractéristiques uniques spécifiques pour Facebook.

Par exemple, vous pourriez envisager d’inclure des éléments comme le nom du site et le titre de l’article, mais sans l’URL. Il y a une longue liste de réglages à modifier, donc c’est à vous de décider.

L’option la plus importante actuellement est le champ Inclure l’image. Cochez cette case pour que l’image mise en avant d’un article ou d’une page WordPress soit ajoutée lors du partage sur Facebook.

L'onglet des réglages « Open Graph »

L’onglet des réglages « Open Graph »

Un autre module Open Graph spécifique de cette extension est destiné à Twitter. Sélectionnez l’onglet Twitter Cards pour afficher les réglages de configuration de vos Twitter Card Tags.

Les cartes Twitter sont un peu différentes des modules de partage de Facebook, vous pouvez donc passer en revue ces réglages pour vous assurer que tout a l’air bien. Nous vous recommandons de cocher les cases pour le titre, l’URL et la description.

Enfin, vous devez cocher la case Inclure l’image, car c’est la seule façon pour Twitter de récupérer votre image mise en avant dans un article ou une page.

Veillez à enregistrer les réglages après avoir terminé.

L'onglet « Cartes » des réglages

L’onglet « Cartes » des réglages

Globalement, la meilleure façon d’activer le protocole Open Graph pour partager correctement le contenu et les images mises en avant sur les réseaux sociaux est d’installer une extension comme Yoast SEO ou OG. La meilleure méthode suivante consiste à utiliser un hébergeur infogéré comme Kinsta, qui a déjà configuré Open Graph pour vous.

Veiller à ce que les images mises en avant apparaissent toujours dans les articles et les pages

L’image mise en avant est sujette à l’erreur humaine, étant donné que l’auteur de la page ou de l’article doit téléverser manuellement une image mise en avant lors de la création d’une nouvelle page web.

Bien que l’automatisation de processus ne convienne pas à tout le monde, il existe des astuces pour s’assurer qu’une image mise en avant soit toujours affichée pour les articles et les pages, ce qui réduit au minimum le risque qu’un auteur oublie d’en téléverser une.

Comment configurer les images mises en avant par défaut pour l’ensemble de WordPress

Une façon de vous assurer que le champ de votre image mise en avant n’est jamais vide est de définir une image mise en avant par défaut pour tous les articles.

L’avantage de cette extension est qu’elle ne remplace pas les images mises en avant que vous avez déjà sur vos articles. Elle détecte les articles qui ne comportent pas d’image mise en avant et leur attribue une image par défaut.

Commencez par installer et activer l’extension Default Featured Image.

Maintenant, allez dans Réglages > Média dans votre tableau de bord WordPress.

Allez dans « Réglages > Média » dans le tableau de bord WordPress

Allez dans « Réglages > Média » dans le tableau de bord WordPress

C’est la seule section du tableau de bord qui est modifiée par l’extension Default Featured Image.

Faites défiler la page vers le bas pour trouver un nouveau champ appelé Image mise en avant par défaut.

Cliquez sur le bouton Sélectionner l’image mise en avant par défaut.

Sélectionnez l'image mise en avant par défaut

Sélectionnez l’image mise en avant par défaut

Vous accédez alors à la médiathèque, dans laquelle vous pouvez choisir une image qui vous servira d’image mise en avant par défaut.

Après avoir sélectionné une image, cliquez sur le bouton Définir l’image mise en avant par défaut.

Sélectionnez l'image mise en avant par défaut

Sélectionnez l’image mise en avant par défaut

Vous devriez maintenant voir une miniature de cette image pour tous les articles qui ne comportent pas d’images mise en avant déjà téléversées.

Veillez à cliquer sur le bouton Enregistrer les modifications pour activer l’image mise en avant par défaut de votre site.

Définir une image mise en avant par défaut

Définir une image mise en avant par défaut

Il est important de tester le fonctionnement de l’image mise en avant par défaut sur votre site.

Pour ce faire, allez sur Articles > Tous les articles.

Aller sur l'écran « Tous les articles ».

Aller sur l’écran « Tous les articles ».

Sélectionnez l’un de vos articles de blog qui ne comporte pas encore d’image.

Allez dans le panneau des réglages de publication et ouvrez la section Image mise en avant.

Elle doit être vide et vous demander de téléverser une image mise en avant.

Sélectionnez l'image mise en avant

Sélectionnez l’image mise en avant

Cependant, lorsque l’extension Default Featured Image est activée, il suffit de cliquer sur le bouton Mettre à jour de l’article.

Cliquez sur le bouton « Mettre à jour ».

Cliquez sur le bouton « Mettre à jour »

L’image mise en avant par défaut est alors insérée dans le module Image mise en avant de l’article.

La bonne nouvelle, c’est que tous les futurs articles sans image mise en avant ajouteront automatiquement la photo par défaut. Cependant, il se peut que vous deviez mettre à jour des articles déjà publiés pour que l’image mise en avant par défaut apparaisse sur ceux-ci.

L'image mise en avant par défaut est affichée ici

L’image mise en avant par défaut est affichée ici

À titre de test, allons sur un article qui possède déjà une image mise en avant.

Comme vous pouvez le voir, une image différente apparaît dans la section Image mise en avant. Cela nous indique que l’extension fait son travail en ajoutant l’image mise en avant par défaut dans les bons articles et en laissant de côté ceux qui ont déjà des images mises en avant.

L'image mise en avant par défaut n'apparaît pas ici

L’image mise en avant par défaut n’apparaît pas ici

Comment téléverser et modifier de manière groupée toutes les images mises en avant sur votre site

À un moment donné, vous vous rendrez peut-être compte que plusieurs anciens articles pourraient utiliser de nouvelles images mises en avant. Il est également possible que vous souhaitiez remplacer une certaine catégorie d’articles ou de pages pour qu’ils aient tous la même image mise en avant, qu’il s’agisse d’une image professionnelle indiquant que l’article est destiné à un tutoriel ou peut-être pour que votre logo figure sur toutes les pages web.

Quoi qu’il en soit, vous devez modifier en masse ces images pour ne pas passer des heures à les modifier toutes. Certains sites web proposent déjà des centaines, voire des milliers d’images, et il est donc nécessaire de disposer d’un outil de modification groupée.

L’extension Quick Featured Images permet de modifier en masse les images mises en avant, ainsi qu’une myriade d’autres fonctionnalités, comme l’ajout d’une image mise en avant par défaut pour tous les articles ou la définition de pré-réglages pour les images mises en avant par défaut.

Extension Quick Featured Images

Extension Quick Featured Images

Nous sommes surtout intéressés par l’outil de modification groupée pour ce tutoriel. Il vous permet d’échanger plusieurs images mises en avant précédemment téléversées, en les faisant toutes correspondre à la même image.

Une fois l’extension installée et activée, allez sur Featured Images > Modification groupée.

Allez sur « Featured Images > Modification groupée ».

Allez sur « Featured Images > Modification groupée ».

Ici, vous verrez une barre de progression en haut de la page. La barre de progression indique exactement où vous en êtes dans le processus de modification groupée des images mises en avant.

C’est important car la modification groupée est permanente, vous voulez donc être sûr de vos actions à chaque étape.

Pour commencer le processus de modification groupée des images mises en avant, faites défiler la page vers le bas.

Modification groupée des images mises en avant

Modification groupée des images mises en avant

Localisez la section intitulée Actions avec une image unique. Trois options vous sont proposées pour modifier de manière groupée les images mises en avant :

Choisissez la bonne option en fonction de ce que vous essayez de réaliser. Par exemple, vous pouvez simplement supprimer toutes les anciennes images mises en avant ou vous assurer que toutes les nouvelles images mises en avant sont définies comme une image spécifique. Dans ce cas, vous pouvez choisir la première ou la troisième option.

Cependant, vous allez généralement opter pour celle intitulée « Remplacer les images mises en avant par l’image sélectionnée ». Cela vous permet de téléverser une image qui remplacera autant d’images mises en avant actuelles que vous le souhaitez. Vous sélectionnerez ces images plus tard et remplacerez chacune d’entre elles par la nouvelle.

Cliquez sur le bouton Choisir une image pour continuer.

Réglages « Actions avec une image unique »

Réglages « Actions avec une image unique »

Cette étape consiste à choisir l’image que vous aimeriez voir apparaître comme nouvelle image mise en avant pour quelques-uns de vos articles ou pages actuels.

Sélectionnez l’image qui vous plaît, puis cliquez sur le bouton Choisir l’image.

Cliquez sur le bouton « Choisir une image ».

Cliquez sur le bouton « Choisir une image »

Vous verrez cette image s’afficher dans le tableau de bord. Assurez-vous simplement que c’est la bonne image et que l’extension la reconnaît.

Choisissez l'option « Remplacer les images mises en avant par l'image sélectionnée ».

Choisissez l’option « Remplacer les images mises en avant par l’image sélectionnée ».

Faites défiler la page vers le bas pour cliquer sur le bouton Suivant.

Cliquez sur le bouton « Suivant ».

Cliquez sur le bouton « Suivant ».

L’étape suivante consiste à ajouter un filtre, qui vous demande essentiellement de choisir les images que vous voulez remplacer. Pour cela, cliquez sur le bouton Choisir les images sous la section intitulée « Sélectionner les images mises en avant que vous voulez remplacer par l’image sélectionnée ».

Cliquez sur le bouton « Choisir des images »

Cliquez sur le bouton « Choisir les images »

Dans ce module, vous pouvez sélectionner plusieurs images de votre médiathèque. Le seul problème est qu’il ne vous indique pas quelles images de votre médiathèque ont été précédemment téléversées comme images mises en avant.

Quoi qu’il en soit, sélectionnez une ou plusieurs images en maintenant la touche « Maj » enfoncée pendant le choix des images, puis cliquez sur le bouton Choisir les images pour continuer.

Choisissez les images à modifier en masse

Choisissez les images à modifier de manière groupée

Toutes les images sélectionnées apparaissent sous forme de miniatures dans le tableau de bord de l’extension. N’hésitez pas à revenir en arrière et à choisir d’autres images si vous en avez manqué.

Cliquez sur le bouton Prévisualiser le filtre pour voir quels seront les remplacements groupés.

Sélectionnez l'option « Prévisualiser le filtre »

Sélectionnez l’option « Prévisualiser le filtre »

La page suivante explique quelles images mises en avant actuelles seront remplacées par la future image mise en avant que vous avez spécifiée auparavant. Il semble que seules deux des images sélectionnées soient effectivement stockées comme images mises en avant dans nos articles. Cela signifie que seules ces images seront remplacées par la nouvelle image.

Une fois que tout semble en ordre et que vous avez décidé que ces anciennes images mises en avant sont prêtes à être remplacées, cliquez sur le bouton Appliquer pour terminer la modification groupée.

Cliquez sur le bouton « Appliquer »

Cliquez sur le bouton « Appliquer »

La dernière page présente les résultats de la modification groupée, avec des détails sur les articles qui ont maintenant de nouvelles images mises en avant. Vous pouvez voir que deux de mes articles ont maintenant une nouvelle image mise en avant, et ce sont les mêmes images. C’est ce que nous essayions d’accomplir.

Consultez les résultats de la modification groupée

Consultez les résultats de la modification groupée

Vous pouvez maintenant aller dans la section Articles > Tous les articles de votre tableau de bord pour voir les articles dans une liste et vous assurer que les images mises en avant ont vraiment été remplacées dans les articles.

Comme vous pouvez le voir, les deux articles présentés précédemment avaient leurs images en mises en avant échangées par celle que je voulais.

Voir les nouvelles images mises en avant

Voir les nouvelles images mises en avant

N’oubliez pas que la page de sélection initiale de l’extension Quick Featured Images propose un large éventail de mesures à prendre avec vos images mises en avant. Il s’agit d’excellents outils pour remplacer des images mal conçues ou résoudre des problèmes lorsque certaines images mises en avant n’apparaissent pas.

Par exemple, vous pouvez compléter une action avec plusieurs pages. Dans ce cas, vous choisirez au hasard plusieurs images pour vos articles en vous basant sur les photos que vous aurez choisies dans la médiathèque.

Une autre option consiste à prendre des mesures sans image sélectionnée, comme la suppression d’une image mise en avant qui se répète plusieurs fois sur plusieurs articles, ou si vous devez supprimer toutes les images mises en avant sans fichier image existant.

Actions avec une seule image et plusieurs images

Actions avec une seule image et plusieurs images

Les possibilités sont nombreuses avec l’extension Quick Featured Images, nous vous suggérons donc de tester les outils et de voir comment vous pouvez modifier en masse certaines de vos anciennes images mises en avant ou celles qui ne fonctionnent pas afin de nettoyer l’attrait visuel global de votre site web.

Extensions pour corriger les problèmes d’image mise en avant de WordPress

Les problèmes liés aux images mises en avant proviennent de divers problèmes. Parfois, la meilleure solution consiste à installer une extension en espérant qu’elle offre les fonctionnalités nécessaires pour tout régler.

Après tout, un thème ou une extension pourrait être à l’origine du problème. Il est préférable d’utiliser une extension qui peut résoudre le conflit plutôt que de remplacer tout votre thème et de reconcevoir votre site web juste pour corriger les images mises en avant.

Bien que toutes les extensions de correction d’image mise en avant ne remplissent pas les mêmes fonctions, nous vous recommandons d’en examiner quelques-unes avant d’apporter des modifications radicales à votre site web.

Featured Image from URL (FIFU)

Extension FIFU

Extension FIFU

L’extension Featured Image from URL, ou FIFU, vous permet de prendre une image externe et de l’utiliser comme image mise en avant pour un article ou une page. Cela permet de contourner l’idée de téléverser une image dans votre médiathèque WordPress et d’activer cette image en tant qu’image mise en avant.

Par conséquent, cela pourrait vous aider à résoudre les problèmes que vous pourriez rencontrer en ce qui concerne les restrictions de taille de téléversement ou même si vos autorisations ne sont pas correctement définies. Dans l’ensemble, l’extension comporte un champ permettant de coller l’URL d’une image et d’insérer cette image dans l’emplacement d’image mise en avant.

Vous devez héberger l’image dans un lieu tiers et vous assurer qu’elle y sera hébergée à l’avenir. Nous vous recommandons de n’utiliser qu’une plateforme d’hébergement de médias, ou peut-être un autre hébergeur de site web dont vous êtes propriétaire. Il serait troublant et potentiellement illégal de simplement rechercher une image en ligne, de prendre son URL et de l’utiliser pour votre image mise en avant, car vous ne savez pas où l’URL de l’image est hébergée.

L’extension FIFU comprend également des fonctions permettant de définir automatiquement les images mises en avant à partir d’images et de vidéos en utilisant les balises iframe et d’autres éléments. Vous pouvez également définir des images à partir de sources plus uniques, comme une API de livre ou un ISBN, ou même à partir du titre d’un article ou d’un moteur de recherche.

Quick Featured Images

Extension Quick Featured Images

Extension Quick Featured Images

Nous avons couvert l’extension Quick Featured Images ci-dessus dans cet article. Elle est principalement utilisée pour remplacer les images mises en avant en masse. C’est la principale raison pour laquelle vous profiterez de cette extension. Elle élimine une quantité importante de travail de téléversement manuel qui pourrait vous attendre.

Nous apprécions particulièrement sa capacité à établir des règles pour vos images mises en avant passées et futures. Par exemple, vous pouvez choisir la première image de votre contenu et en faire votre image mise en avant pour un article. Il est également possible de générer des images mises en avant en fonction des auteurs, des étiquettes et des types de publication.

Qu’il s’agisse de remplacer des images mises en avant existantes ou d’essayer de réparer des images qui n’existaient pas, l’extension Quick Featured Images fait l’affaire pour tout cela.

Default Featured Image

L’extension Default Featured Image offre un moyen simple de passer outre toutes les situations où une image mise en avant n’est pas définie pour une page ou un article. Elle permet de nettoyer les articles dans lesquels vous avez oublié d’ajouter une image mise en avant ou, à un moment donné, de la supprimer parce que l’image mise en avant originale ne répond pas à vos critères. Dans l’ensemble, l’extension Default Featured Image dispose d’outils simples pour ajouter une image mise en avant par défaut en un clic.

Extension Default featured image

Extension Default featured image

Cette extension recherche tous les champs d’image mises en avant vides et les remplit avec l’option par défaut. Bien qu’il puisse s’agir d’une correction temporaire, elle peut également s’avérer utile pour définir des images mises en avant  permanentes sur des pages et des articles de blog généraux. Il se peut que vous n’ayez besoin que d’une photo basique qui soit pertinente pour votre site web sur ces pages.

Ses réglages sont situés dans les réglages des médias de WordPress, mais vous n’avez qu’un seul champ à remplir. Téléversez l’image ici et cliquez sur le bouton Enregistrer.

Auto Featured Image

L’extension Auto Featured Image offre une option unique pour résoudre les problèmes liés aux images mises en avant. Elle promet de faciliter le processus de téléversement des images mises en avant pour les propriétaires de sites web.

L’extension génère une image mise en avant à partir de la première image d’un article, mais seulement si l’image mise en avant n’est pas déjà configurée. Par conséquent, elle sert de sauvegarde pour le champ de l’image réelle, au cas où vous oublieriez de téléverser l’image mise en avant mais que vous voudriez quand même que quelque chose apparaisse.

Extension Auto Featured Image

Extension Auto Featured Image

L’avantage d’utiliser une telle méthode est qu’il n’est pas nécessaire de se fier à une image mise en avant par défaut qui peut ne pas s’appliquer à l’article. Nous supposons que la première image d’un article est pertinente pour le sujet, il n’y a donc pas besoin de s’inquiéter qu’une image mise en avant par défaut soit récupérée depuis un fichier et duplique la même image sur plusieurs articles.

L’extension dispose également d’un merveilleux moteur de recherche natif qui puise dans des endroits comme Google, Pixabay et Unsplash. Elle fonctionne également bien avec des constructeurs de pages comme Gutenberg et Elementor. Auto Featured Image dispose même d’un outil de génération groupée  d’images.

Multiple Featured Images

L’extension Multiple Featured Images propose plusieurs fonctionnalités qui s’avèrent utiles pour résoudre les problèmes de vos images mises en avant. Tout d’abord, l’extension ouvre la limite par défaut que WordPress fixe à une image mise en avant par article. Cela signifie que vous pouvez téléverser plusieurs images mises en avant et choisir laquelle d’entre elles sera affichée sur différentes parties de votre site web.

Elle utilise un widget et un code court, qui demandent tous deux quelle image vous souhaitez afficher lors de la mise en œuvre de l’un des outils. Par exemple, vous pouvez préférer qu’une image mise en avant apparaisse dans la colonne latérale, mais qu’une autre apparaisse lorsque l’article est dans une liste sur votre page d’accueil.

Extension Multiple Featured Images

Extension Multiple Featured Images

L’extension fonctionne avec les articles et les pages, y compris les publications personnalisées et les produits WooCommerce. Vous pouvez téléverser autant d’images que vous le souhaitez tout en choisissant l’image mise en avant à afficher dans certaines zones et la taille de ces images.

Cette extension convient essentiellement à ceux qui ont du mal à décider quelle image mise en avant utiliser, ou lorsqu’une image a du sens au début de l’article, mais qu’une autre est plus appropriée dans une colonne latérale.

Meilleures pratiques pour les images mises en avant

Pour s’assurer que les images mises en avant ont l’air correctes, il est important de comprendre les meilleures pratiques avant de les téléverser sur votre site WordPress. Vous pouvez dépanner une image mise en avant qui n’apparaît pas ou modifier manuellement chaque image mise en avant.

Néanmoins, il est beaucoup plus facile de connaître les approches principales des images mises en avant afin de minimiser les problèmes au débutt. Ces meilleures pratiques couvrent tous les aspects, des recommandations de design aux tactiques de téléversement, ce qui vous permet de vous sentir en confiance pour toutes les images mises en avant tout en réduisant le temps que vous passez avec ces images.

Rendre pertinentes les images mises en avant

L’inconvénient de définir une image mise en avant par défaut est que vous risquez de vous retrouver avec plusieurs images mises en avant qui ne sont pas pertinentes pour l’article. L’intérêt d’une image mise en avant est de servir d’introduction visuelle à l’article, un peu comme un titre, et le premier paragraphe d’un article donne au lecteur un aperçu de ce qu’il peut s’attendre à lire.

Par exemple, si votre article contient des conseils sur l’utilisation d’Instagram, il est préférable que l’image mise en avant comporte des éléments faisant référence à Instagram (des éléments légaux, bien sûr), ainsi que des éléments créatifs qui rendent l’article attrayant.

Site Buffer

Site Buffer

La pertinence entre également en jeu lorsque vous insérez manuellement une image pour chaque image mise en avant dans un article. Il est facile de saisir une image rapide qui se rapporte à l’article, juste pour gagner du temps. Cependant, nous devrions tous prendre notre temps pour choisir une image mise en avant, car c’est la « couverture du livre » de l’article qui incitera les gens à le lire.

Obtenir des droits légaux avant de publier des images mises en avant

Une façon de vous mettre dans le pétrin avec vos images est d’utiliser des photos et des graphiques que vous trouvez au hasard en ligne. Le propriétaire d’une photo pourrait alors vous demander de retirer un grand nombre de vos images, ou pire, menacer de poursuites judiciaires.

En règle générale, si vous n’avez pas pris la photo vous-même ou si vous n’avez pas payé les droits, vous risquez de ne pas pouvoir l’utiliser.

Il y a des exceptions à cette règle !

La seule fois où vous constaterez qu’il est acceptable de partager gratuitement une image sur votre site web est lorsque vous la récupérez d’un site web comme Pexels ou Unsplash.

Pourtant, même sur ces sites, on vous demande généralement d’indiquer l’origine de toutes les photos (ce qui est difficile car les images mises en avant n’ont souvent pas de légende).

L'attribution des images est cruciale pour éviter les problèmes de droits d'auteur

Le crédit des images est crucial pour éviter les problèmes de droits d’auteur

Suivez ces règles pour vous assurer que vos images mises en avant sont légales :

  1. Prenez une photo avec votre propre appareil. C’est un moyen sûr d’éliminer les problèmes juridiques.
  2. Regardez les sites web de photos avec une licence Creative Commons. Vous y trouverez des options comme Unsplash et Pexels.
  3. Comme les images mises en avant dans WordPress bloquent généralement les légendes, indiquez la source de cette image quelque part dans votre article.
  4. Payez pour des photos sur des sites comme Shutterstock et iStockPhoto.
  5. Réalisez vos propres graphiques avec des outils de conception gratuits comme Canva ou Adobe Spark.
  6. Si vous trouvez une photo que vous aimez vraiment, prenez contact avec le photographe ou l’artiste et demandez-lui si vous pouvez utiliser son travail sur votre site web. Gratuit, payant ou avec attribution. Assurez-vous d’obtenir cet accord par écrit (l’e-mail fonctionne aussi).

Conserver la cohérence de l’image mise en avant avec le thème

C’est une chose de s’assurer que toutes les images mises en avant sont pertinentes pour les articles auxquelles elles sont attachées.

Cependant, vous voulez aussi vous en tenir à un thème cohérent. Cela permet d’accélérer le processus de création de votre image mise en avant tout en aidant votre marque.

Par exemple, toutes vos images mises en avant pourraient être dotées d’un filtre noir et blanc. Ou alors, elles peuvent inclure des animations colorées tout en représentant ce qui se trouve dans les articles.

Maintenez la cohérence de la marque sur vos images mises en avant

Maintenez la cohérence de la marque sur vos images mises en avant

Utiliser des images de haute résolution et à échelle réduite

Une image mise en avant ne diffère pas des autres photos de votre site web. Elle est placée sur un support numérique où la résolution de la photo ne doit pas nécessairement être digne d’être imprimée pour être belle.

Dans l’ensemble, les photos de votre site web occupent une quantité importante d’espace sur le serveur, ce qui peut ralentir le temps de chargement de votre site. Cependant, vous souhaitez également utiliser des photos qui ont vraiment de l’allure, c’est pourquoi vous devez continuer à rechercher autant que possible des photos en haute résolution.

Lorsque vous recherchez une image mise en avant, pensez toujours à commencer par une photo plus grande et en haute résolution. Ainsi, vous pourrez la réduire pour une interface numérique tout en conservant une grande partie de sa résolution.

La mise à l’échelle d’une photo est un grand non. Pourtant, laisser vos photos plus grandes et à haute définition dans leur format d’origine posera certainement des problèmes de chargement.

Utiliser un outil de redimensionnement et d’optimisation rapide des images

Étant donné que vous devriez téléverser des images de haute résolution en tant qu’images mises en avant, il est logique d’automatiser l’optimisation. Après tout, il est difficile de réduire, redimensionner et recadrer manuellement chaque image que vous prévoyez de téléverser.

Optimisation d'image par Imagify

Optimisation d’image par Imagify

Une extension d’optimisation d’images fait une grande partie du travail pour vous, en s’assurant que les images mises en avant apparaissent réellement et ne ralentissent pas votre site web.

Nous avons ici un excellent guide sur l’optimisation de vos images WordPress. Dans l’ensemble, il est préférable d’opter pour une extension qui optimise vos images sur un serveur tiers. Cela évitera de causer des problèmes avec votre propre serveur. Nous recommandons des solutions comme Optimole et Imagify.

Optimiser les images mises en avant pour le SEO

Un autre élément de l’optimisation d’images concerne la manière dont ces images vont apparaître dans les moteurs de recherche. Elles sont essentielles pour aider votre article ou votre page à progresser dans les classements. Chaque image hébergée, y compris les images mises en avant, comporte des métadonnées qui sont explorées par les moteurs de recherche afin de déterminer le contenu de votre article ou de votre page.

Si vous ciblez un mot-clé, ces métadonnées sont une excellente occasion de montrer aux moteurs de recherche que l’image est pertinente. Vous devez éviter de bourrer les mots-clés juste parce que vous le voulez. Expliquez plutôt rapidement ce que contient l’image et ajoutez éventuellement le mot-clé pour améliorer votre classement.

La pièce la plus importante des métadonnées d’image est son Texte d’Alt, qui peut être trouvé en ouvrant votre image mise en avant dans la Médiathèque.

Définir le « Texte d’Alt » pour les images

Définir le « Texte d’Alt » pour les images

Même si la définition d’un texte d’alt approprié pour les images aide le SEO, vous devriez le faire quand même pour des raisons d’accessibilité.

L'accessibilité est cruciale pour tout site web

L’accessibilité est cruciale pour tout site web

De nombreux aveugles utilisent l’internet par le biais de lecteurs d’écran. Rendez votre site accessible à ces personnes.

S’assurer qu’Open Graph est actif pour le partage

Nous avons couvert les points essentiels d’Open Graph dans la section ci-dessus. Mais nous vous rappelons que votre fournisseur d’hébergement doit, soit fournir les outils nécessaires au rendu des images mises en avant, soit trouver une extension qui active le protocole Open Graph.

L’image mise en avant doit apparaître rapidement chaque fois que quelqu’un veut partager un de vos articles ou une de vos pages sur un réseau social. Sinon, vous courez le risque que quelqu’un décide de ne pas partager l’article du tout, ou que votre marque ne paraisse pas professionnelle lorsque les utilisateurs partagent un des liens de votre site.

Envisager une extension qui remplace les champs d’image mises en avant vides

Nous avons déjà abordé cette solution dans la section précédente, mais elle s’inscrit également dans les meilleures pratiques. Vous ne savez jamais quand une erreur humaine peut empêcher le téléversement d’une image mise en avant sur votre site web.

Pensez à utiliser une extension d’image mise en avant par défaut pour remplir les blancs et lister les images mises en avant temporaires ou permanentes lorsque vous oubliez de le faire. Cela vous aidera également lorsque vos anciens articles ne contiennent pas d’images appropriées.

Les images mises en avant sont importantes. Très importantes ! 🌟 Voici le guide définitif pour corriger les problèmes d'affichage des images mises en avant de WordPress sur votre site 👋🏻Click to Tweet

Résumé

Créer un site web avec un contenu étonnant pour découvrir que les images mises en avant ne sont pas visibles est à la fois frustrant et potentiellement nuisible à votre marque. Nous espérons que ce guide vous a aidé à résoudre les problèmes courants liés à l’absence d’images mises en avant sur WordPress. Assurez-vous simplement de tester que vos images mises en avant sont correctement téléversées et configurées avant de vous lancer dans des solutions plus avancées.

En cours de route, vous avez également appris des conseils pour améliorer vos compétences en matière de modification d’images et de flux de travail. Pour en savoir plus sur ces conseils et astuces, consultez notre guide détaillé sur l’optimisation d’images. C’est un document indispensable pour accélérer votre site WordPress.

Maintenant que les images mises en avant sont prêtes, partagez-les !

Avons-nous manqué quelque chose d’important ? Veuillez laisser un commentaire ci-dessous si vous avez des questions sur les images mises en avant ou des problèmes avec les images mises en avant de WordPress.


Si vous avez aimé cet article, alors vous allez adorer la plateforme d’hébergement WordPress de Kinsta. Accélérez votre site Web et obtenez le support 24/7 de notre équipe de vétérans de WordPress. Notre infrastructure propulsée par Google Cloud met l’accent sur la mise à l’échelle automatique, la performance et la sécurité. Laissez-nous vous montrer la différence de Kinsta ! Découvrez nos plans