20 Mar 2016

#miniTuto rendre vos background-images SEO friendly #8

Google+ Commentaires Newsletter

Nouveau mini tutoriel ! Vous êtes intégrateur et vous avez beaucoup d’images à mettre sur vos pages ? Seulement vous trouvez que c’est bien plus pratique de mettre vos images dans une div en background plutôt qu’une simple balise <img src= »mon_image.png »>. Problème, les images ne seront pas référencées…

 

La Balise <img> face au style CSS background-image :
Balise <img>Paramètre background-image
Points positifs
  • SEO
  • Image rognée, répétée…
  • S’adapter à la taille de la DIV (background-size: contain, cover…)
  • paramètres et animations CSS (opacité, scale, filtres…)
Points négatifs
  • Image non rognée
  • hauteur/largeur à respecter
  • Non SEO

 

A quel moment on pourrait mettre des images en background-image alors qu’elles pourraient être utiles au référencement me direz-vous ? Et bien dans des galeries, des carousels, dans des listes, des photos de fonds et bien d’autres cas…

Je suis développeur par exemple, et j’offre la possibilité dans les sites que je crée de gérer les images aux clients. Si je n’affichait que des balises <img> sur le site, il faudrait que j’invite le client à n’uploader que des images aux bonnes proportions, ou que je force un rognage dessus (ce que je fais en fait mais ce n’est pas le sujet). Mettre certaines images en background-image sur une div sera toujours plus simple, facile et visuellement efficace. Voici un exemple de cas avec background-image :

Exemple d'images utilisés en background-image...

background-image-freejump

DIV contenant une image dans la balise style, + background-size:cover qui équivaut à remplir l’image sur toute la DIV tout en gardant les proportions. (site : freejumpsystem.com)

Exemple d'images utilisés en balise <img> (attention les yeux)...

Balises IMG : Les tailles d’images sont différentes et s’affichent de manière brut et non alignées (on peut tout de même appliquer un minimum de CSS comme un fond blanc carré etc..

Vous comprenez déjà mieux l’intérêt d’une image dans une DIV plutôt qu’en balise. Je parle bien sur de cas très spéciaux hein, la majeure partie du temps, les images <img> sont a utiliser ! Ici il s’agit avant tout d’esthétisme. Maintenant, passons à l’astuce pour faire référencer vos images par les moteurs de recherche d’image…

 

html5-jquery-logo

Cas d’école : Afficher les images originales depuis une liste de miniatures

Pour bien comprendre la partie suivante, je vous présente une petite galerie d’image. Elle est simple, au clic vous afficherez l’image en grand et vous pourrez naviguer de gauche à droite pour voir la suite.

Voici ci-dessous une galerie d’image simple qui affiche les images originales au clic (source) :

Voici le type de code source HTML que nous obtenons :


1
2
3
4
5
6
7
8
9
<div class="gallery">
    <a href="image_01.jpg" class="fancybox" rel="gallery" title="Ma belle image">
        <span style="background-image:url('thumb_image_01.jpg')"></span>
    </a>
    <a href="image_02.jpg" class="fancybox" rel="gallery" title="Mon autre belle image">
        <span style="background-image:url('thumb_image_02.jpg')"></span>
    </a>
    ...
</div>

Les miniatures sont affichées dans une balise <span>. Les balises <a> ayants pour URL l’image originale (et son titre) vont permettre d’afficher par le biais du plugin JQuery fancyBox une image en popup. Le rendu sera très satisfaisant pour le visiteur. Mais les moteurs de recherches ne référenceront… rien !

Pourquoi rien ? Rappel de SEO...
Parce qu’une URL renvoyant vers une image ne pourra pas être liée à la page en cours. C’est juste.. une image ! Si vous faites une recherche d’image sur Google, vous ne trouverez que des images présentent sur des pages, et donc si elles sont affichées c’est qu’il y a la balise <img>. Donc un lien vers une image ne servira à rien :).

Note : Les mots clés qui seront rattachés à l’image seront : le titre du fichier, le paramètre « alt » (ex : <img src= »img.jpg » alt= »Image de paris » />) et bien sur les mots clés sur la page (je ne sais pas mais peut être même que les mots clés les plus proches de l’image auront plus de poids. Mais j’en sais rien désolé ^^).

Note : j’aurai très bien pu utiliser des balises <img> à la place des <span style= »background… »>. Cependant j’aurai fait référencer les miniatures plutôt que les images de taille originale ! Je doute qu’une miniature de 120px de hauteur soit intéressante dans les résultats de Google image m’voyez ? ☺ :


1
2
3
<a href="image_01.jpg" class="fancybox" rel="gallery" title="Ma belle image">
    <img src="thumb_image_01.jpg" alt="Ma belle image" />
</a>

 

Solution pour référencer les images originale : Rediriger les liens !

Inspiré par cet article en anglais, nous allons remplacer les liens des balises <a> contenant les images originales par une l’URL de la page avec un paramètre supplémentaire, celle de l’ID ou du nom de l’image demandé.

Cette technique permettra d’afficher l’image à laquelle un bot aura accédé via la balise <a>, en régénérant la même page avec l’image demandée sous la forme d’une balise <img>. Le bot en question pourra donc référencer l’image à la page en question et analysera les liens des miniatures suivantes en faisant la même opération.

Cette technique aura pour but de référencer TOUTES vos images et surtout de les lier à la même page. Chouette non ? Bon je n’ai peut être pas été très clair 😓. Vous comprendrez par la suite, veuillez créer un fichier PHP que vous lancerez en lieu et place du fichier HTML initial :


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
    /* tableau de toutes nos images */
    $images = array(
        array('file' => 'image_01.jpg','thumb' => 'thumb_image_01.jpg','title' => 'Ma belle image'),
        array('file' => 'image_02.jpg','thumb' => 'thumb_image_02.jpg','title' => 'Mon autre belle image'),
        array('file' => 'image_03.jpg','thumb' => 'thumb_image_03.jpg','title' => null),
        array('file' => 'image_04.jpg','thumb' => 'thumb_image_04.jpg','title' => null),
    );
    $imageSeo = null;
    $url = 'https://www.bxnxg.com/wp-content/uploads/2016/03/seo-image/index_seo.php';
   
    /* détection du paramètre get (?image=XX) */
    if(isset($_GET['image']) && $_GET['image']){
        foreach($images as $i){
            /* si le nom de l'image correspond à une image du tableau (on peut aussi utiliser un ID ou une position...) */
            if($i['file'] == $_GET['image']){
                $imageSeo = $i;
            }
        }
    }
?><html>
    ...
</html>

Début du code HTML à insérer ensuite :


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
    <head>
        <meta charset="utf-8"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="fancybox/jquery.fancybox.pack.js"></script>
        <link rel="stylesheet" href="fancybox/jquery.fancybox.css">
        <style>
            .fancybox-lock .fancybox-overlay{overflow:hidden}
            .gallery{clear:both;overflow:hidden;margin:0 -5px}
            .gallery a{display:block;margin:0 5px 10px;float:left;width:calc(25% - 10px);width:webkit-calc(25% - 10px)}
            .gallery a span{display:block;width:100%;height:124px;background:none #000 no-repeat center center;backgrounnd-size:cover;}
            img{display:block;margin:0 0 10px;width:100%;height:auto}
        </style>
        <script>/* le code c'est juste après ! */</script>
    </head>
    <body>
       ...
    </body>
</html>

Puis occupons-nous du JavaScript. Nous allons recréer l’effet fancybox et faire en sorte qu’il ne récupère pas l’URL en source mais le paramètre data-image :


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<script>
$(document).ready(function() {
    /* on va gérer manuellement l'ouverture de fancybox. */
    $('.fancybox').on('click', function(e){
        /* dès le clic sur une url avec .fancybox, on annule la redirection vers l'url */
        /* comme les moteurs de recherches n'utilisent pas le Javascript, Eux seront redirigés vers l'url (de type mapage/?image=monimageXX.jpg) */
        e.preventDefault();
       
        var elem = [];
        var image = $(this);
        /* si l'image fait parti d'un groupe de gallerie (rel="galleryXX") */
        if($(this).attr('rel')){
            /* on ajoute toutes les images dans un tableau elem */
            $('.fancybox[rel="'+image.attr('rel')+'"]').each(function(){
                elem.push($(this).data('image'));
            });
            if(elem.length > 1){
                var elemStart = [];
                var elemFinish = [];
                /* maintenant, on va reorganiser la liste des images en fonction de la miniature cliquée initialement */
                /* ainsi on pourra afficher les images précédentes et suivantes, dans le même ordre que la liste des miniatures */
                elem.forEach(function(e){
                    if(e == image.data('image')){
                        elemStart.push(e);
                    }else{
                        if(elemStart.length){
                            elemStart.push(e);
                        }else{
                            elemFinish.push(e);
                        }
                    }
                });
                /* on merge les tableaux */
                elem = elemStart.concat(elemFinish);
            }
        }else{
            /* sinon, on a qu'une seule image à afficher */
            elem.push(image.data('image'));
        }
       
        /* démarrage de la fancybox, avec la méthode de l'API (http://fancyapps.com/fancybox/#docs) */
        /* on envoit le tableau elem contenant le ou les images, dans le bon ordre par rapport au clic dans l'une des miniature */
        $.fancybox(elem,{
            openEffect    : 'none',
            closeEffect    : 'none',
            nextEffect : 'fade',
            prevEffect : 'fade'
        });
    });
});
</script>

Et enfin la suite du code HTML avec les variables PHP à l’intérieur :


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
    <head>
        ...
    </head>
    <body>
        <h2>Galerie image SEO friendly :)</h2>
        <?php if($imageSeo){ ?>
            <img src="<?php echo $imageSeo['file']; ?>" alt="<?php echo $imageSeo['title']; ?>" />
        <?php } ?>
        <div class="gallery">
            <?php foreach($images as $i){ ?>
                <a href="<?php echo $url; ?>?image=<?php echo $i['file']; ?>" data-image="<?php echo $i['file']; ?>" class="fancybox" rel="gallery" title="<?php echo $i['title']; ?>">
                    <span style="background-image:url('<?php echo $i['thumb']; ?>')"></span>
                </a>
            <?php } ?>
        </div>
    </body>
</html>

Voici le résultat final une fois généré. Solution visuellement identique à la solution initiale (source) :

La différence c’est que dès qu’un moteur de recherche accédera à un des liens par son bot, il affichera une page (la même) mais avec l’image demandée en balise <img> en plus (source) :

La page affichera dynamiquement une image originale en balise (pour la page « index_seo.php?image=image_01.jpg« ):


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
    <head>
        <style>...</style>
        <script>...</script>
    </head>
    <body>
        <h2>Galerie image SEO friendly :)</h2>
        <img src="image_01.jpg" alt="Ma belle image" />
        <div class="gallery">
            <a href="https://www.bxnxg.com/wp-content/uploads/2016/03/seo-image/index_seo.php?image=image_01.jpg" data-image="image_01.jpg" class="fancybox" rel="gallery" title="Ma belle image">
                <span style="background-image:url(thumb_image_01.jpg)"></span>
            </a>
            <a href="https://www.bxnxg.com/wp-content/uploads/2016/03/seo-image/index_seo.php?image=image_02.jpg" data-image="image_02.jpg" class="fancybox" rel="gallery" title="Mon autre belle image">
                <span style="background-image:url(thumb_image_02.jpg)"></span>
            </a>
            ...
        </div>
    </body>
</html>

 

Le moteur de recherche va donc automatiquement indexer vos images via les différentes URL (monsite.fr/mapage/?image=1.jpg, monsite.fr/mapage/?image=2.jpg, monsite.fr/mapage/?image=3.jpg …) et vous aurez un affichage propre côté utilisateur ! Voici les sources complètes de ce minituto incluant le code PHP, fancybox et les images : seo-image.zip 😈

 

Voilà ce tutoriel est terminé, maintenant vous n’aurez plus d’excuses pour référencer vos images sur Google et compagnie ! A la semaine prochaine !

Continuez sur le site...

Restez informés des Actus, Tutos et Bons-Plans en suivant BXNXG :

Tags

Commentaires

Leave a Comment

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.