Bien gérer la bibliothèque Medias de WordPress

La gestion des images, vidéos et autres fichiers pdf se fait dans WordPress par la bibliothèque Medias, c’est un point fondamental vu lors que l’on veut apprendre WordPress. Bien comprendre son fonctionnement est indispensable pour gérer son site au quotidien et également ne pas avoir de pages peu pertinentes indexées par Google. Nous verrons aussi comment bien définir les attributs de ses images pour favoriser le référencement et nous découvrirons aussi dans cet article les options « cachées » de WordPress pour faciliter votre vie de Webmaster.

1) Ajouter un media dans la bibliothèque

Vous avez 2 moyens pour ajouter un media dans WordPress:

directement dans la bibliothèque (menu Medias -> Bibliothèque -> Ajouter)
à partir d’un article / page en cliquant sur le bouton « Ajouter un media » puis « Envoyer des fichiers »

Vous arrivez alors sur un écran qui vous propose de sélectionner les fichiers sur votre disque dur ou de les glisser / déposer dans l’espace prévu à et effet.

Vous pouvez aussi ajouter un media dans votre bibliothèque à partir d’une URL (autre site Internet – option en bas du menu de gauche). WordPress va alors uploader votre media et le ranger dans la bibliothèque.

On peut insérer dans la bibliothèque medias de nombreux types de fichiers : audios, videos, images, mais aussi pdf, zip, excel ou word… Certains types de fichiers ne sont pas autorisés par défaut ; vous pouvez les ajouter avec le plugin « Add Mime Types« .

Egalement, pour un support complet des images SVG (légères en poids et responsive par nature puisque vectorielles), je vous conseille de vous tourner vers le plugin « SVG Support« .

2) Les bonnes pratiques d’ajout d’un media

Pour votre référencement et le bon fonctionnement de votre site WordPress, suivez ces conseils lors de l’ajout de nouvelles images (cela s’applique aussi aux autres type de media) :

donnez un nom explicite (sans caractères spéciaux) à votre image ; avec des termes clés en lien avec le contenu que vous voulez illustrer. Utilisez plutôt le format jpg que png (sauf cas de transparence bien sûr).
dimensionnez votre image à la taille exacte de l’endroit où elle sera utilisée. Vous pouvez pour cela faire des crop / resize en ligne avec des outils gratuits comme « iloveimg« . Prenons un exemple : si vous souhaitez utiliser votre image dans une page ou un article, repérez la largeur maximale du container qui va accueillir votre image (disons 700px) et retaillez là en fonction de cette information pour ajouter une image de 700px x 350px. Pour les images illustrant des fonctionnalités « automatisées » (galerie de portfolio, images à la une d’un article de blog, …), reportez vous au paragraphe sur les thumbnails ci dessous pour adopter la bonne stratégie de dimensionnement de votre image.
compressez votre image au maximum pour optimiser le temps de chargement de votre site. Page Speed Insights vous en sera reconnaissant et ce sera tout bénef’ pour vous du point de vue du référencement.
remplissez les attributs et informations complémentaires de votre image (champ alt, légende…). C’est ce que nous allons voir dans le prochain paragraphe.
ne pourrissez pas votre indexation avec les pages de fichier attaché si elles ne comportent pas d’éléments originaux et intéressants. Si vous ne comprenez pas ce que je veux dire, pas de panique, tout est expliqué également dans la suite de l’article.
lisez et suivez les conseils de Google pour optimiser la recherche d’images. Vous y apprendrez par exemple qu’il est conseillé de placer une image en haut de page pour qu’elle soit bien « vue » ; entre autres !

3) Les thumbnails automatiques

Au moment de l’ajout d’une image dans la bibliothèque, WordPress va générer automatiquement plusieurs versions de cette image pour plusieurs formats. Ces formats sont par défaut au nombre de 3 (voir le codex à ce sujet) :

miniature (thumbnails) en 150px x 150px
medium en 300px x 300px
large en 640px x 640px

Ces formats peuvent être complétés par d’autres formats définis par le thème graphique. A chaque emplacement où le thème va avoir besoin d’une taille d’image précise (portfolio, image à la une de blog…), un format est ajouté.

Pour ne pas déformer l’image lors du redimensionnement, il est possible de demander à WordPress d’utiliser une fonctionnalité « crop » qui fera un découpage intelligent d’une portion de l’image pour l’adapter au format cible. Attention, l’algorithme de crop a beau être souvent pertinent, il se peut que des découpages ne vous conviennent pas du tout…

Enfin, il est possible aussi de piloter la qualité des images générées avec des filtres dans le fichier functions.php :

add_filter( 'jpeg_quality', 'fn_image_quality' );
add_filter( 'wp_editor_set_quality', 'fn_image_quality' );
function fn_image_quality( $quality ) {
    return 100;
}

Notez enfin que si vous utilisez un plugin d’optimisation d’image comme short pixel, vos thumbnails seront aussi optimisés par le plugin.

Personnaliser les tailles d’images

Il est possible de rajouter votre propre tailles de thumbnails (en plus de celles par défaut de WordPress et de celles du thème) avec le plugin Simple Image Sizes. Grâce à ce plugin, vous pourrez éditer (en allant dans le menu « Réglages » puis « Medias » ) les différents formats d’images et en ajouter sans écrire une seule ligne de code. Attention, ce plugin commence à se faire vieux en terme de mise à jour…

Regénérer les thumbnails

Une fois des modifications apportées dans l’écran de réglage des médias, il faudra regénérer les vignettes (puisque celles ci sont créées lors de l’upload et ne sont pas encore à jour par rapport à vos modifications). Avec le plugin « Simple Image Sizes », un bouton vous permet de faire cela un une seule opération ; mais attention au temps de traitement !

Le plugin regenerate thumbnails peut aussi s’en charger car c’est le plus reconnu pour ce type de tâches. Il vous permet de regénérer vos thumbnails soit de façon globale soit au cas par cas. Si vous êtes développeur, l’utilisation de l’outil de ligne de commande pour WordPress (WP CLI) vous permet de regénérer vos thumbs très facilement.

Les utilisations des thumbnails

Un thumbnail de media peut être utilisé comme :

« image à la une » d’un article ou d’une page. C’est une image qui illustrera de façon unique votre contenu et qui sera reprise par exemple dans une liste d’articles pour les illustrer
un élément d’une « galerie d’image ». WordPress propose par défaut un fonctionnement de galerie défilante (type slideshow) et la bibliothèque media vous permet de regrouper des medias pour cela. Attention, tous les thèmes ne gèrent pas de mise en page pour cette fonctionnalité.
un élément d’un portfolio ou d’un slider géré par le thème graphique
…

On peut lire dans des tutoriels le conseil suivant : lorsque vous souhaitez uploader un media pour une utilisation en thumbnail, faîtes le à une taille suffisamment grande sans vous préoccuper de la destination cible. Ainsi, tous les formats seront générés de façon qualitative et le thème graphique ne rencontrera aucun soucis pour calibrer et utiliser votre image. Oui mais… attention aux images qui contiennent du texte ou pour lesquelles le cadrage est important ! Si vous faites trop confiance à l’outil, vous risquez de ne pas obtenir ce que vous souhaitez ou d’avoir une image tronquée.

Pesez donc bien votre décision entre l’utilisation d’images sur-mesure (affichage parfait mais qui ne permettra pas de faire évoluer facilement les mises en page dans le futur) et l’utilisation d’images retaillées par WordPress (risque de tronquage sauvage et de rendu visuel inapproprié).

4) Les attributs d’une image : modifier un media

En allant dans la bibliothèque, vous pouvez cliquer sur l’action « Modifier » un media. Cela ne vous permettra pas de changer le fichier original car dans ce cas, il faut le supprimer et en ajouter un nouveau. Si cette fonctionnalité vous manque, vous pouvez aussi installer le plugin enable-media-replace qui vous permettra de le faire.

Cette action « Modifier » vous permettra par contre d’accéder à tous les attributs et informations complémentaires concernant ce media : redimensionnement, légende, texte alternatif, description longue. Vous pourrez même aussi redimensionner et gérer le format de votre image directement dans WordPress avec le bouton « modifier image » :

A quoi servent ces éléments ? Tout simplement à donner plus d’informations sur votre media, aussi bien à Google que pour vos visiteurs.

Le texte alternatif permet de remplacer l’image par une description courte pour les navigateurs en mode texte. Sont concernés les aveugles et les visiteurs ayant un besoin spécifique d’accessibilité à un site web, mais aussi les robots des moteurs de recherche. C’est un champ important pour le référencement ! Utiliser ici des phrases courtes avec des termes pertinents mais pas une liste de mots clés.

Enfin la description longue sera utilisée sur la page du fichier attaché. Kezako ? C’est ce que nous allons étudier dans le paragraphe suivant.

5) La page du fichier attaché : bien comprendre son utilité (ou pas)

C’est une page spécifique créée par défaut par WordPress pour présenter le media et ses informations complémentaires. Selon la façon dont vous aurez ajouté votre media, cette page aura droit à un permalink réécrit ou un lien court. Voici la doc officielle de WordPress sur le sujet.

Pour avoir un « beau » lien vers la page du fichier attaché, il est donc conseillé de relier le media à son article ou page de référence. Si vous ne l’avez pas fait initialement, il est toujours possible de cliquer sur « joindre » dans la liste des medias de la bibliothèque.

Cette notion de « page du fichier attaché » est importante à connaître car vous pouvez vous retrouver avec un nombre important d’éléments indexés par Google mais sans grande valeur ajoutée puisque ces pages n’ont pas, à priori, la même « valeur » que vos pages de contenus et articles de blogs. En fonction de votre stratégie de référencement, vous aurez 3 solutions :

les rendre invisibles en les définissant en « noindex » et en les filtrant au niveau de votre sitemap (nous verrons cela dans la suite de l’article)
les rediriger vers le fichier media natif
au contraire les valoriser et définir les informations media avec soins pour en faire de vrais contenus intéressants. C’est une stratégie de référencement qui peut s’avérer payante lorsque l’on présente des images originales. Mais bien sûr, cela prend du temps !

Notez également que certains thèmes WordPress peuvent traiter vos images différemment si elles sont liées à un contenu ou non. Par exemple, il peut être généré automatiquement des galeries pour un article à partir de ses images attachées.

6) Utiliser les medias dans les articles / pages

Dernière étape après avoir ajouté un media dans la bibliothèque : l’utiliser. Sélectionnez un media dans la liste proposée (vous pouvez aussi utiliser les filtres par type / date ou faire une recherche).

Si vous avez modifié les attributs de votre media, les champs légende, texte alternatif et description seront pré-remplis et vous pourrez encore les adapter.

Le titre peut aussi être défini s’il apporte un plus au texte alternatif.

Enfin, 3 réglages importants avant de cliquer sur « insérer » :

l’alignement (vous pourrez toujours le reprendre ensuite)
le choix de « Lier à » un autre élément. Ce choix est important car il va créer un lien à partir de votre image. Cela peut être vers l’image elle-même (vers le fichier ou vers un zoom en lightbox pour certains thèmes), vers une URL externe , vers rien, ou vers le page du fichier attaché. L’utilisateur peu averti ne comprend pas toujours cette option et se retrouve avec des images cliquables vers des pages inintéressantes. Attention donc à cette option. Je vous montre dans le dernier paragraphe comment forcer la valeur « Aucun » pour ne plus risquer d’oublier le paramétrage de ce champ.
la taille du media. Vous pouvez choisir les différentes tailles possibles parmi les thumbnails de votre image. Je vous conseille d’essayer au maximum de dimensionner votre image pour l’emplacement cible et de choisir la taille originale. Pour peu que vous ayez du texte dans votre image ou que le cadrage soit important, c’est une bonne garantie pour avoir le résultat que vous attendez. Sinon, vous pouvez aussi vous inspirer du paragraphe ci dessous pour vous affranchir du redimensionnement et utiliser une taille d’image sur-mesure.

Rassurez vous, vous pourrez toujours revenir sur ces valeurs en cliquant sur le bouton « modifier » du media à partir de l’éditeur de contenu (sélectionnez votre media puis cliquez sur le crayon).

Enfin, utilisez avec parcimonie les poignées de redimensionnement d’une image car même si le résultat visuel vous semble correct, c’est bien l’image « trop grande » qui est envoyée au navigateur. Et cela est coûteux en ressources… Encore une fois, adaptez plutôt vos images aux tailles des emplacements cibles.

Ne plus lier par défaut un media à un autre élément

Si vous en avez assez de modifier la boîte de sélection « Lier à » pour choisir « Aucun » pour que votre image n’ait plus de lien vers un élément par défaut, voici un petit truc :

allez dans les options cachées de wordpress en tapant votre URL suivi de : …/wp-admin/options.php
dans le champ « image_default_link_type », mettre la valeur « none »
enregistrez les options

Et hop, plus de lien créé par défaut lorsque vous ajoutez une image dans un article !

7) Optimisation de l’indexation avec Worpdress SEO

Dernier chapitre de cet article : comment ne pas avoir de contenus peu pertinents indexés par Google à cause des pages de fichier attaché. Pour contrôler leur indexation, je vais m’aider du plugin Worpdress SEO (anciennement yoast).

Vous pouvez par exemple déclarer de façon radicale toutes vos pages medias en « noindex » (dans le menu SEO -> Titres et metas -> onglet Types d’article) et également les supprimer de votre sitemap (menu SEO -> Sitemaps XML -> onglet Types d’article). Ainsi, vous n’aurez aucun parasitage de vos contenus si vous ne misez pas sur le référencement par les descriptions de vos images.

Sinon, choisissez une option moins définitive et placez vos pages de fichier attaché en « noindex » seulement au cas par cas grâce au module WordPress SEO qui s’affiche sur la page media en mode « édition ». Dans le cas d’une indexation positive, vous renseignerez chaque champ d’information complémentaire de vos images pour en faire des éléments de contenus à part entière et pertinents pour les moteurs de recherche.