Jean ROCHARD
Je partage ma passion de Wordpress dans des articles techniques sur les plugins, thèmes, nouveautés geek et optimisation SEO "on-site".
Jean ROCHARD

@jean_rochard

Chez Terre Digitale, on mange du Wordpress dès le petit-dej'.
Petit guide pour mettre en place les Facebook Instant Articles à partir de vos posts Wordpress : https://t.co/lSbzdM6z9j - 7 mois ago

La gestion des images, vidéos et autres fichiers pdf se fait dans WordPress par la bibliothèque Medias. 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 »

ajouterunmedia

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 :

insererunmedia

Vous pouvez aussi ajouter un media dans votre bibliothèque à partir d’un 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…

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 picmonkey. 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. Pour cela, vous trouverez des pistes dans cet article.
  • 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 ewww image optimizer, 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.

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.

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.

modifiermedia

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.

La légende est souvent utilisée par les thèmes pour… légender l’image. Voir exemple ci dessous :

legende

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 un media qui a été relié à un article (ajouté par le bouton « ajouter un media » de l’éditeur de contenus) :

http://benefacere.fr/definir-strategie-communication-place-du-site-internet/definir_la_place_de_votre_site_web-2/

Si vous avez ajouté votre media directement dans la bibliothèque, le lien vers la page sera de type :

http://benefacere.fr/?attachment_id=

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 :

joindre

Attention toutefois, il n’est pas possible nativement de défaire ce lien entre un media et un article ou une page. Heureusement, il existe le plugin unattach-and-re-attach-attachments qui vous permet de gérer cela et de réassocier un media à un autre contenu. Sachez aussi que si vous supprimez un contenu qui était rattaché à un media, ce dernier se retrouvera simplement libre d’être réattaché à un nouveau contenu.

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 2 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)
  • 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) :

selectionmedia

Dès que vous aurez sélectionné un media, les informations propres à l’insertion apparaissent dans le cadre à droite de cet écran :

insertionarticle

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) :

detailimage

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 !

Une stratégie pour s’affranchir du redimensionnement manuel des images « trop grandes »

  • installez le plugin Simple Image Sizes (voir plus haut, au sujet des thumbnails)
  • repérez la largeur idéale des images lorsque vous voulez les ajouter dans un contenu (par exemple la taille du container)
  • ajoutez un format spécifique dans « Réglages -> Media » avec la largeur idéale et une hauteur de 9999px (cela forcera WordPress a garder les proportions lors de la génération du thumbnail). Cochez bien la case pour ajouter ce format à la liste des tailles.
  • uploadez vos images sans les redimensionner
  • utilisez cette taille spécifique lors de l’insertion d’une image dans un contenu ; elle aura alors bien gardé ses proportions tout en étant redimensionnée au format maximum et optimal souhaité

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.