Référencement des images : l'état de l'art

Avec la recherche universelle mise en oeuvre par Google, les images n’ont jamais autant pris de place dans les recherches d’information sur Internet. Pour autant, il n’est pas toujours évident de placer ses propres photographies en tête des résultats... Retour sur 7 ans d’expérimentation !

Le photographe devenu consultant SEO

Déclaré comme auteur photographe professionnel en activité secondaire depuis 2005, j’ai assez vite été confronté aux problèmes de visibilité concernant mon travail photographique. J’avais dès mes débuts, choisi le web comme moyen principal pour la promotion de mon activité de photographie d’illustration dans les thématiques relativement concurrentielles de la photographie animalière, sur la nature et l’environnement, n’ayant pas les moyens matériels et les relations pour me faire connaître par d’autres moyens.

C’est dans le cadre de ce cursus assez particulier, que j’ai approfondi mes connaissances en référencement au fil des ans, pour finalement en faire mon troisième métier !

Retour sur 7 ans d’expérimentations techniques, de tests et de recherche sur les méthodes et outils pour positionner de manière efficace ses images dans Google Images...

Typologie du trafic lié aux images

Google Images hier

Ayant démarré avec des connaissances restreintes en matière d’optimisation pour le référencement, j’ai à l’époque axé ma stratégie de visibilité sur un étrange couplage : les recherches texte (de type photo <expression clé>) et les recherche spécifiques "images" (de type <expression clé> dans les parties des moteurs dédiés aux images).

Ce choix résultait de la mise à jour - au mieux - biannuelle de l’index de Google Images, à une époque où l’on parlait encore de Google Dance et où l’indexation temps réel relevait de l’utopie ;)

Ainsi, il n’était pas du tout évident pour un jeune site, de se voir apparaître dans le moteur de recherche dédié aux photos : il fallait jouer sur tous les plans, et les recherches texte classiques jouaient à cette époque un rôle primordial dans la recherche de visibilité (en 2006, les recherches de type photo <expression clé> représentaient plus de 40% de mon trafic !)

Google Images aujourd’hui

En 2012, la tendance est bien entendu totalement inversée, puisque ces recherches ne représentent plus qu’une infime part du trafic (respectivement 3% et 5% sur mes 2 sites de galeries photo) ; néanmoins, il ne faut pas négliger la petite part de recherches textuelles avec des couplages d’expressions clé et les mots "photo" ou "image".

Outre le fait d’apporter un petit plus d’un point de vue trafic, cela force finalement à travailler l’une des choses les plus importantes de manière générale en référencement, et particulièrement en matière de référencement des images comme nous le verrons plus loin : son contenu texte !

Les spécificités des SERP "Images"

Il faut souligner les quelques particularités liées aux images, concernant leur positionnement mais également le trafic qu’elles sont censées apporter :

• la première page n’est pas limitée à 10 résultats, et le premier n’est pas forcément plus avantagé que le 9ème ou même le 15ème - Google affichant actuellement entre 5 et 8 images par ligne selon les résolutions utilisées - car ils pourront se retrouver juste sous le premier, dans la zone "chaude" que les internautes affectionnent !
• il n’y a aucun texte descriptif dans les résultats de recherche, seule la miniature de l’image influe (ou pas) l’internaute dans son choix (d’où nécessité de diffuser de belles photos, car elles détermineront leur propre CTR !)
• les images sont concernées par le "vol", soit de bande passante (hotlink) soit de fichier
• les images sont concernées par le filtre Safesearch : disparaître des SERP en mode normal peut occasionner une perte sèche de 70 à 80% de trafic (vécu...)

Ces quatre points influent de manière plus ou moins marquée le trafic, le troisième pouvant l’annihiler littéralement sur certains visuels (j’ai eu dans le passé des images pouvant m’apporter plus de 30000 visites annuelles chacune, sur des termes génériques comme "cheval" ou "chaton" : imaginez l’impact d’un hotlink prenant la place de "ma" page sur une seule image ! Et imaginez quand cela arrive sur des dizaines !!! Je parle d’expérience malheureusement, même si j’ai depuis trouvé la solution :) )

Dès lors, si le webmaster consciencieux surveille son positionnement en général sur ses mots-clés, il devra veiller à mettre en oeuvre un système anti-hotlink afin de prévenir tout vol de bande passante, et par la même occasion préserver au maximum son trafic "images" !

Pour ma part, je couple ce type de dispositif avec une recherche par similarité régulière sur mes photos les plus "volées" : une perte de temps colossale, mais qui permet de limiter les pertes inhérentes aux "concurrents" qui vous passent devant avec vos propres visuels !

Il semble, depuis quelque temps, et plus particulièrement avec l’avènement de la recherche par similarité, que Google fasse de plus en plus la part des choses et privilégie, lorsque l’antériorité peut être clairement établie, les sites originaux dans les SERP images.

En d’autres termes, un site qui vous vole une image et la repositionne dans l’une de ses pages ne sera pas la plupart du temps positionné à votre place, comme ce fut le cas en 2010, aux débuts de la mise en place de Google Similar Images...

Objectif : top 15... ou mieux !

Au final, positionner ses images consistera non pas forcément à gagner la première place, mais à figurer disons dans les deux ou trois premières lignes dans les résolutions "usuelles" soit souvent les 15 premières images (on visera à minima 1024x768 pixels, même si aujourd’hui les écrans affichent généralement beaucoup plus !) pour être au-dessus de la ligne de flottaison de l’écran dans les résolutions les plus courantes, et si possible dans le top 4, puisque ce sont aujourd’hui ces images qui sont les plus susceptibles de figurer en tête des résultats texte (sous forme de vignettes) dans le cadre de la recherche universelle mise en place depuis quelque temps déjà !

Google affiche parfois 5 images au lieu de 4 dans le cadre de la recherche universelle, et il arrive également qu’elles ne soient pas identiques aux premières des SERP "Images"

Quelle méthode pour positionner ses images ?

Même si aujourd’hui Google sait comparer les images, déterminer les couleurs dominantes voire reconnaître des visages, il lui est strictement impossible de "deviner" quel est le contenu d’une photographie : seuls le contenu texte englobant l’image, la thématique (champs lexical) de la page mais également - tout comme pour le SEO classique - la popularité apportée par les liens externes joueront un rôle dans le positionnement des images !

Si vous avez une page fortement spécialisée, bien linkée et contenant une photo collant avec votre sujet, il y a de fortes chances pour que cette dernière figure en bonne place dans Google Images :)

Dès lors, nous retrouvons les éléments de référencement "classique", avec toutefois quelques particularités techniques qui pourront jouer en notre faveur pour placer les images là où il faut dans les SERP spécialisés !

Comme vous l’avez certainement déjà compris, tout comme pour les pages classiques, le positionnement optimal des images est lié à une simple règle, qui n’est pas foncièrement absolue mais néanmoins idéale : une page = une image !

Bien évidemment, cette règle en implique une autre : si vous avez 500 images de sanglier sur votre site, inutile d’espérer squatter les x premières places des SERP "Images", sauf à réussir l’exploit de {rédiger|écrire|mettre en oeuvre} autant de contenus textes uniques - un par page - qui n’entrent pas en conflit les uns avec les autres ;)

Il faut donc se spécialiser au possible ses pages pour ses thématiques d’images mais en travaillant la qualité à la quantité, l’objectif étant d’abord d’attirer l’internaute en recherche de visuel sur son site, pour qu’il puisse ensuite faire son choix !

Dans le cas de pages de type référence (article de blog, article encyclopédique ou équivalent), il est tout-à-fait possible de positionner plusieurs images sur le même terme, dès lors qu’elles sont intégrées dans le texte de manière équilibrée, avec un ratio texte/images élevé.

La base : le contexte technique

Partant du principe énoncé ci-dessus, vous devez donner à vos images un "support" convenable. On retrouve donc par défaut les critères on page classiques en matière d’optimisation SEO :

• Une balise Title unique et correctement rédigée
• Une structure HTML correcte et hiérarchisée (présence d’une balise H1, éventuellement de balises secondaires H2, H3, etc. selon le contenu)
• Une organisation du contenu texte par paragraphes dans chaque bloc HTML
• Une mise en emphase des expressions clés importantes
• Dans la mesure du possible, on placera le contenu le plus important le plus haut possible dans le code, au besoin en jouant avec les règles CSS pour présenter le contenu selon ses désirs

Plus toutes les balises META adéquates facilitant l’indexation / la représentation de la page, bien entendu : l’objectif est d’obtenir une page qui puisse se positionner tout-à-fait normalement dans le cadre d’une optimisation classique (SERP textes)

C’est dans ce contexte que vient s’insérer l’image, qui sera idéalement placée au cœur du contenu texte afin de maximiser l’impact du champs sémantique sur l’image. Nous parlons bien du code et donc du flux HTML, et non de la présentation visuelle, qui pourra être largement modifiée via les styles CSS.

Ça pourrait donc donner :

<html>
<head>
<title>Photo : nom du sujet</title>
<meta content="Description du sujet d'une longueur d&rsquo;environ120 à 160 caractères" />
<meta content="follow,index" />
<link rel="canonical" href="http://www.votre-site.com/photo-nom-sujet" />
</head>
<html>
<div id="bloc-image">
    <h1>Photo : nom du sujet</h1>
    <p>Texte traitant du sujet de la photographie</p>
    <img src="/photo/thematique/nom-sujet.jpg" alt="Description de l'image" width="" height="" />
    <p>Autre texte traitant du même sujet (pourra être plus court)</p>
</div>
</html>

Outre son obligation pour la conformité W3C, l’attribut alt de la balise img demeure une absolue nécessité, car il va permettre de décrire à Google (et aux déficients visuels : vive l’accessibilité !) le contenu de notre image.

Quelle taille utiliser pour les images ? Bien que je n’ai pas de réponse précise sur ce point, qui plus est avec les fonctionnalités de filtrage proposées par Google dans son moteur Images, d’expérience une taille de 700 à 900 pixels sur le plus large côté constitue un juste milieu entre visibilité moteur, performances en vitesse de chargement et limitation de la contrefaçon... si tant est que l’on utilise un marquage visuel !

Pour l’avoir vécu, une photo de 750x500 pixels peut parfaitement être utilisée pour faire une demi-page dans un magazine.

J’ai dans le passé, en recherche d’optimisation toujours plus forte, essayé et adopté la mise en place d’un lien supplémentaire, direct vers le fichier image, avec comme ancre le sujet représenté. Comme d’expérience j’ai déjà vu des photos dans Google Images apparaître par le biais d’un simple lien dans une page, il est fort probable - je ne peux aujourd’hui en apporter la certitude - que l’on puisse grignoter quelques places avec cette méthode :)

Afin que le résultat soit convenable pour l’internaute, il est possible d’affubler ce lien d’un script de type Lightbox, afin d’éviter de faire afficher l’image hors du contexte de la page.

<a href="/photo/thematique/nom-sujet.jpg" title="Description de l'image"rel="lightbox">
<img src="/photo/thematique/nom-sujet.jpg" alt="Description de l'image" width="" height="" />
</a>

Dans ce cadre, afin d’éviter que l’image affichée via notre fenêtre Javascript soit de même taille que celle affichée directement dans la page, on pourra utiliser des valeurs d’attribut height et width sur la balise img avec des valeurs "rondes" égales à 50% ou 75% de la taille originale (permet d’optimiser le rendu à l’écran sans crénelage désagréable...)

On peut, pour des raisons d’accessibilité (hum... Bon ok : pour ajouter du mot-clé !) ajouter dans le lien la fameuse expression-clé représentant l’image, faisant ainsi d’une pierre deux coups :

<a href="/photo/thematique/nom-sujet.jpg" title="Description de l'image"rel="lightbox">
<img src="/photo/thematique/nom-sujet.jpg" alt="Description de l'image" width="" height="" />Nom du sujet
</a>

Une simple règle CSS permettra de masquer ce texte aux visiteurs "normaux", mais de l’afficher pour les déficients visuels... et les moteurs :

#bloc-image a {text-indent: -8000px}

J’ai remarqué que Google n’indexait dans les résultats d’images, que les versions les plus larges des images représentées sur une page unique. En d’autres termes, si vous avez une version en résolution moyenne, menant via une fenêtre modale Javascript de type Lightbox à l’image en grande taille, c’est bien cette dernière qui sera présentée dans Google ! Je n’ai à ce jour pas trouvé de contre-exemple infirmant cette hypothèse :)

Petit point de détail ayant son importance pour celles et ceux qui présentent des galeries menant à des pages uniques (avec une page par photo) : éviter le positionnement des vignettes !

Pour ce faire, j’utilise une technique très simple, basée sur les styles CSS :

• Affichage de la vignette en background CSS
• Lien sur l’ancre de la page contenant la photographie avec un text-indent négatif

Le code peut donc ressembler à ceci :

<div>
    <ul>
        <li style="background: transparent url(http://www.ton-site.com/vignettes/nom-sujet-vignette.jpg) no-repeat scroll center center;" rel="background: transparent url(http://www.ton-site.com/vignettes/nom-sujet-vignette.jpg) no-repeat scroll center center;">
        <a href="http://www.ton-site.com/photo-nom-sujet" title="Photo nom du sujet">Photo nom du sujet</a></li>
    </ul>
</div>

Et au niveau des styles CSS, voici une base de travail :

#galerie-photo ul { list-style-type: none; display: block;}
#galerie-photo ul li { float: left; height: <hauteur>px; margin: 0 5px 5px 0;text-indent: -8000px; width: <largeur>px;}
#galerie-photo ul li a { height: <hauteur>px; width: <largeur>px; margin: 0; display: block;}

Cette technique permet d’afficher des galeries visuellement identiques à de simples listes de vignettes, mais en bénéficiant d’une part de règles d’accessibilité convenables, et d’autre part d’un contexte sémantique idéal, avec des ancres elles aussi mieux adaptées, que l’on pourra d’ailleurs varier si notre système de gestion de contenu le permet !

La seule contrainte réside dans le fait que les vignettes seront nécessairement de taille identique, si l’on ne veut pas alourdir le code HTML de la page avec des règles CSS directes. Une autre solution passe par l’utilisation de Javascript (un peu à l’image de... Google Images !) pour adapter à la volée les vignettes selon la résolution de l’utilisateur :)

On pourra, dans la mesure où les vignettes seront stockées dans un répertoire spécifique, en interdire l’indexation via la règle adéquate dans le fichier robots.txt ;)

La nécessité : le contexte sémantique

Un socle technique solidement ancré ne suffit pas en lui seul à obtenir un bon positionnement : comme pour toute page web, il est nécessaire d’offrir aux moteurs de recherche un contexte sémantique correct pour asseoir son positionnement "Images" !

On retrouve donc toutes les règles d’écriture classiques utilisées en référencement, dont les contraintes d’unicité des textes d’une page à l’autre.

La seule différence tient dans l’encadrement - au sens littéral du terme - de l’image par un champs lexical suffisant afin de permettre aux moteurs de recherche de cerner au mieux la nature de son contenu.

Si l’on reprend notre code, cela pourrait donner par exemple :

<html>
<head>
<title>Photo : sanglier mâle en rut</title>
<meta content="Photographie de sanglier mâle, durant la période du rut en forêt domaniale. Disponible en HD, droit géré ou libre de droit." />
<meta content="follow,index" />
<link rel="canonical" href="http://www.votre-site.com/photo-sanglier-rut/" />
</head>
<html>
<div id="bloc-image">
    <h1>Photo : sanglier mâle en rut</h1>
    <p>Photographié en forêt domaniale, ce <strong>sanglier</strong> mâle venant d'affronter un congénère afin d'obtenir les faveurs de la laie meneuse.</p>
    <a href="/photo/mammifere/sanglier-rut.jpg" title="Photo : sanglier en rut rel="lightbox">
    <img src="/photo/mammifere/sanglier-rut.jpg" alt="Sanglier en rut" width="" height="" />Sanglier en rut
    </a>
    <p>Les sangliers (<em>Sus scrofa</em>), grands mammifères de l'ordre des suidés, hantent les forêts et bocages de France métropolitaine, s'adaptant à tous les types de milieux. Durant le rut hivernal, les mâles solitaires s'affrontent en vue de s'accoupler aux laies dominantes, parfois encore accompagnées de leurs marcassins.</p>
</div>
</html>

Vous l’avez compris, ce qui compte avant tout est le champs lexical entourant la photographie : on utilise ici le vocabulaire spécifique tournant autour du sanglier (sanglier, laie, marcassin, compagnie, mais aussi forêt, mammifère, suidé, et le nom latin "Sus scrofa" !)

Dans le prolongement de l’optimisation on page, on peut imaginer, comme pour n’importe quel type de site, une catégorisation de chaque page (sous-entendu chaque photographie) au travers de diverses taxonomies permettant de lier les images entre elles, par affinités sémantiques.

On retrouve alors les techniques usuelles employées sur les blogs, sites e-commerces et autres :

• liens vers les images de mêmes catégories / mêmes mots-clés (sous forme de mini-galeries optimisées)
• affichage des termes de taxonomies utilisés sur l’image afin de faciliter la navigation
• le cas échéant, affichage des termes de taxonomies spécialisant ou élargissant la recherche, ou proposant des photographies approchantes d’un point de vue sémantique

L’avantage d’une galerie photo en bonne et due forme étant qu’il est "relativement" aisé de définir un véritable thésaurus permettant une classification sous de multiples facettes, et élargissant de ce fait le spectre de recherche menant à son contenu (ce qui favorisera donc la longue traîne !)

Au final, on retrouve exactement la même contrainte absolue et nécessaire pour que nos catégories et mots-clés ne soient pas exclusivement un artifice réservé à l’internaute (comme on le voit beaucoup trop souvent) : une hiérarchie de mots-clés et de catégories structurée et finie, sans doublons, et supportant un contenu unique et bien défini !

Pour ma part, la technique est simple : j’utilise un thésaurus thématique, que je "fige" au maximum lors de la mise en place des galeries ce qui permet d’obtenir un nombre fini de classifications et donc maîtrisable... et indexable !

Ce qui ne fonctionne pas (ou pas encore !)

Les professionnels et les amateurs éclairés en matière de photographie utilisent le plus souvent des logiciels spécialisés pour la gestion de leur photothèque (Adobe Lightroom, Apple Aperture...)

Ces logiciels offrent une gestion poussée des métadonnées (informations à la norme IPTC) permettant la classification des photographies : légende, catégories, mots-clés, descriptions, titres, coordonnées de l’auteur, etc.

¿ l’heure actuelle, Google n’utilise pas les métadonnées IPTC pour l’indexation et à fortiori le positionnement des images.

Je mène un test depuis avril 2006 sur un petit nombre d’images, dont les champs IPTC sont remplis d’expressions clé uniques. Les seules rares occurrences que l’on retrouvera seront le fait de Google Picasa (sur ces photos que des internautes ont volé !), qui lui sait lire une partie de ces métadonnées (le champs Légende et les mots-clés, pour ne pas les nommer) et les affiche sur ses galeries en ligne ;)

¿ l’image de la balise META Keywords qui ne sert plus à rien depuis 2001, j’ai gardé l’habitude de conserver les champs IPTC dans mes fichiers images, pour le jour où Google, dans un incommensurable élan de sagesse, prendra enfin en considération ces informations... qui permettront notamment de préciser qui est l’auteur des photographies !

Une galerie photo idéale ?

Beaucoup m’ont posé la question, et je n’ai malheureusement à ce jour aucune réponse : il n’existe pas aujourd’hui de script de galerie "idéal" pour le référencement des images !

Pour l’avoir testé, je dirais que ZenPhoto demeure à ce jour le meilleur script natif spécifique "Images" en la matière, mais qu’il souffre, plus au travers des templates proposés que d’un strict point de vue technique, encore de la mainmise des webdesigners créateurs de templates, qui ne sont pas référenceurs et pour qui design et effets visuels importent beaucoup plus que visibilité moteur !

Le célébrissime Wordpress, finement tuné, pourra également s’avérer un allié précieux, notamment pour sa facilité à gérer les multiples taxonomies et pour sa légendaire maléabilité.

Pour conclure : il n’existe pas d’outil clé en main idéal, mais il existe de solides bases dans Wordpress et dans une moindre mesure ZenPhoto, pour s’en confectionner un !

Je remercie Cédric qui a pris le temps de nous parler de son métier, de sa passion ;)