1. Création site Internet
  2. > Articles Techniques
  3. > Référencement Web, SEO SMO
  4. > Sitemap avec images pour SPIP
Sitemap avec images pour SPIP

Sitemap avec images pour SPIP

dimanche 9 novembre 2014, par Guillaume Orsal

Le sitemap par défaut de SPIP contient peu d’information. Les plugins de sitemap que j’ai trouver ne proposaient pas l’intégration des images dans le sitemap.

Pour améliorer le référencement naturel de mes sites SPIP, j’ai donc cherché à intégrer les images puisque Google fait la distinction lors de son intégration.

 Petit rappel sur les sitemaps

Pour ceux qui ne sauraient pas ce qu’est un sitemap, il s’agit un fichier standardisé qui permet aux moteurs de recherche d’obtenir la liste du contenu de votre site : pages, images et vidéos.

Vous trouverez plus d’explication sur la structure de ce fichier directement sur le site sitemaps.org.

Le fichier sitemap joue un rôle important dans la qualité du référencement d’un site web. Il faut donc s’assurer que le fichier soit présent, correctement construit, et enfin, il faut indiquer sa présence aux moteurs de recherches, par exemple, en utilisant Google Webmaster Tools.

 Images sous Google Webmaster Tools

JPEG - 21.6 ko
Intégration des sitemaps dans Google Webmaster Tools
Intégration des images dans les sitemaps sous l’interface de Google Webmaster Tools

L’outil d’aide au référencement de Google, fait justement la distinction entre les pages web et les images qu’il a indexé, comme indiqué sur l’image ci-dessus.

Il est intéressant d’indexer également les images, car c’est un moyen d’améliorer la longue traîne. En ayant plus d’éléments référencés, cela augmente les possibilités d’arriver sur votre site, donc à terme les visites.

 Vérifier l’indexation des images

Pour voir si Google indexe vos images, rien de plus simple. Une petite requête avancée via la recherche d’images en utilisant le paramètre inurl: suivi de l’url de votre site, vous donnera une idée de ce qui est pris en compte.

Exemple : inurl:www.orsal.fr

Dans mon cas, au moment de la rédaction de cet article, ce n’était pas brillant, aucun résultat, et ce, malgré que le site soit plutôt bien référencé dans la recherche Web.

Aucune image ne correspond à votre recherche (inurl :www.orsal.fr).

Mon site utilise SPIP, un outil de gestion de contenu. Pour optimiser l’affichage des pages, l’outil utilise un système de cache. Les liens vers les images à l’intérieur des pages pointent donc vers le répertoire du cache. Or ce répertoire est bloqué aux moteurs de recherche via le fichier robots.txt qui n’indexent donc pas les images.

Je pouvais donc débloquer l’accès, mais à chaque rafraîchissement du cache, les liens vers les images auraient changé. Le référencement serait à chaque fois perdu et cela aurait généré de nombreuses erreurs 404.

L’autre solution était de comprendre comment fonctionne la génération des sitemaps sous SPIP pour intégrer directement les liens vers le fichier image et non vers le cache.

 SPIP et les sitemaps

Le sitemap par défaut, contient la liste des articles, la fréquence de modification pour le sommaire, et la date de dernière modification pour les articles qui ont moins de 24h. Pourtant le standard autorise bien d’autres informations, notamment les images.

Un plugin pour SPIP existe, Sitemap-Google, avec de bonnes idées, notamment pour la gestion de la priorité en utilisant la popularité de l’article. Le code source du plugin est d’ailleurs plus précis que ce qui est présenté dans l’article. Mais ce plugin ne gère pas les images.

 Etat de l’art

Parmi les articles les plus intéressants sur le sujet que j’ai pu trouvé, une très bonne explication par Organic Web et de bonnes idées de solutions dans l’article Images, sitemaps et SPIP. Je vais reprendre leur fonction url_de_logo, mais leur solution ne fonctionne pas bien chez moi, ou pas tout à fait comme je le voudrais. Alors, je vais devoir l’adapter.

Cet article se base lui-même sur un article précédent paru sur le site Abondance. Très succinct. L’article donne juste un aperçu de ce à quoi doit ressembler le sitemap. Dans un autre article du site Abondance, toujours aussi court, Olivier Andrieu présente même l’intégration des vidéos dans les sitemaps, qui est directement tiré de l’explication sur l’intégration des différents formats par Google.

 Et chez Wordpress ?

Travailler avec SPIP n’empêche pas de regarder ce qui se fait ailleurs. Comme il m’arrive aussi d’utiliser Wordpress, j’ai été impressionné par le plugin Wordpress SEO par Yoast et notamment tout ce qu’il propose en matière de génération automatique de sitemap.

L’outil génère plusieurs sitemaps en fonction du type de contenu, qui sont reliés ensemble par un index de sitemap.

Et plus intéressant encore, il propose l’intégration d’une feuille de style pour mettre en forme le sitemap et rendre sa consultation plus pratique et agréable.

 Fonctions personnalisées SPIP

Pour m’aider au formatage des informations, je vais avoir besoin de filtres personnalisées. Rien de plus simple, il suffit d’éditer le fichier mes_fonctions.php du répertoire /squelettes et de lui ajouter les lignes suivantes (à l’intérieur du bloc php, donc avant le «  ?> » final) :

function url_de_logo($texte) {
 ereg('src="([^"]*)"', $texte, $regs);
 return $regs[1];
}

function add_cdata($texte) {
  return "<![CDATA[".$texte."]]>";
}

function remove_param($texte) {
  if ( $nb = strrpos( $texte, "?" ) )
     return substr( $texte, 0, $nb );
 else
     return $texte;
}

function pourcent($valeur) {
  return $valeur / 100;
}

 Sitemap images et SPIP

Tout ça me donne bien envie de développer un plugin pour SPIP qui intégrerait les bonnes idées picorées un peu partout, mais je n’ai pas le temps pour l’instant. Je vais donc me contenter de juste modifier le sitemap par défaut.

Pour surcharger le sitemap par défaut, je copie le fichier sitemap.xml.html du répertoire squelettes-dist vers le répertoire squelettes.

J’ai supprimé l’intégration des brèves car je ne les utilise pas, mais ce ne doit pas être bien compliqué de les réintégrer.

J’ai complété les champs, pour que chaque lien ait une fréquence de modification, une priorité et une date de dernière modification.

Enfin j’ai ajouté des boucles sur le logo de l’article et les images qu’il contient, avec utilisation des titres des images.

Voici le contenu de mon fichier sitemap.xml.html :

#CACHE{0}
#HTTP_HEADER{Content-Type: text/xml; charset=utf-8}
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
       <url>
               <loc>[(#URL_SITE_SPIP)]</loc>
<BOUCLE_maj(ARTICLES){tout}{par date_modif}{inverse}{0,1}>[(#DATE_MODIF|?{[             <lastmod>(#DATE_MODIF|date_iso)</lastmod>]})]</BOUCLE_maj>
               <changefreq>hourly</changefreq>
               <priority>1.0</priority>
       </url>

<BOUCLE_r(RUBRIQUES){!par date}{0,1000}>
       <url>
               <loc>[(#URL_RUBRIQUE|url_absolue)]</loc>
               <lastmod>[(#DATE|date_iso)]</lastmod>
               <changefreq>daily</changefreq>
               <priority>0.6</priority>
       </url>
</BOUCLE_r>

<BOUCLE_a(ARTICLES){!par date_modif}{!par date}{0,2000}>
       <url>
               <loc>[(#URL_ARTICLE|url_absolue)]</loc>
               <lastmod>[(#DATE_MODIF|date_iso)]</lastmod>
               <changefreq>weekly</changefreq>
               <priority>[(#POPULARITE|pourcent)]</priority>[
               <image:image>
                       <image:loc>#URL_SITE_SPIP/(#LOGO_ARTICLE_RUBRIQUE||url_de_logo|remove_param)</image:loc>
                       <image:title>[(#TITRE|textebrut|add_cdata)]</image:title>
                       <image:caption>[(#TITRE|textebrut|add_cdata)]</image:caption>
               </image:image>]<BOUCLE_mesimages(DOCUMENTS){id_article}{mode=image}{doublons}>
               <image:image>
                       <image:loc>[(#URL_DOCUMENT|url_absolue)]</image:loc>[
                       <image:caption>(#TITRE|textebrut|add_cdata)</image:caption>][
                       <image:title>(#TITRE|textebrut|add_cdata)</image:title>]
               </image:image></BOUCLE_mesimages>
       </url>
</BOUCLE_a>

</urlset>

Pour accéder à votre sitemap, il suffit d’accéder à l’url suivante : http:///sitemap.xml

Et un petit rappel avec SPIP, lorsque vous faites des modifications, si vous souhaitez forcer le rafraîchissement du fichier, il faut utiliser l’url : http:///sitemap.xml ?var_mode=calcul

Mais le fichier sitemap ainsi produit n’est pas très digeste pour les humains que nous sommes.

 XSL et visualisation du sitemap

Afin de visualiser de manière simple le contenu de votre fichier sitemap, il suffit de lui ajouter une feuille de style xsl.

Pour cela, il faut modifier le fichier de génération du sitemap sitemap.xml.html au niveau de construction de la première ligne pour qu’elle ressemble à ceci :

#HTTP_HEADER{Content-Type: text/xml; charset=utf-8}
<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="//www.orsal.fr/squelettes/sitemap.xsl"?>

Enfin, il faut créer un fichier sitemap.xsl dans le répertoire /squelettes/ pour mettre en forme le contenu du fichier sitemap.

Je ne vais pas expliquer la construction du fichier xsl, vous trouverez sans problème de l’aide sur Internet. Voici le contenu de la feuille de style :

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0"
     xmlns:html="http://www.w3.org/TR/REC-html40"
             xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
     xmlns:sitemap="http://www.sitemaps.org/schemas/sitemap/0.9"
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
 <xsl:template match="/">
     <html xmlns="http://www.w3.org/1999/xhtml">
         <head>
             <title>XML Sitemap</title>
             <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
             <style type="text/css">
                 body {
                     font-family: Helvetica, Arial, sans-serif;
                     font-size: 13px;
                     color: #545353;
                 }
                 table {
                     border: none;
                     border-collapse: collapse;
                 }
                 #sitemap tr.odd td {
                     background-color: #eee !important;
                 }
                 #sitemap tbody tr:hover td {
                     background-color: #ccc;
                 }
                 #sitemap tbody tr:hover td, #sitemap tbody tr:hover td a {
                     color: #000;
                 }
                 #content {
                     margin: 0 auto;
                     width: 1000px;
                 }
                 .expl {
                     margin: 18px 3px;
                     line-height: 1.2em;
                 }
                 .expl a {
                     color: #da3114;
                     font-weight: bold;
                 }
                 .expl a:visited {
                     color: #da3114;
                 }
                 a {
                     color: #000;
                     text-decoration: none;
                 }
                 a:visited {
                     color: #777;
                 }
                 a:hover {
                     text-decoration: underline;
                 }
                 td {
                     font-size:11px;
                 }
                 th {
                     text-align:left;
                     padding-right:30px;
                     font-size:11px;
                 }
                 thead th {
                     border-bottom: 1px solid #000;
                 }
                 .galery {
                     text-align: center;
                 }
                 .galery img {
                     padding: 5px;
                     height: 50px;
                 }
             </style>
         </head>
         <body>
             <div id="content">
                 <h1>XML Sitemap</h1>
                 <p class="expl">
                     Generated by <a href="https://www.orsal.fr/" title="Ingenieur informatique, developpeur web independant">Guillaume Orsal</a>, this is an XML Sitemap, meant for consumption by search engines.<br/>
                     You can find more information about XML sitemaps on <a href="http://sitemaps.org">sitemaps.org</a>.
                 </p>
                 <p class="expl">
                     This XML Sitemap contains <xsl:value-of select="count(sitemap:urlset/sitemap:url)"/> URLs.
                 </p>
                 <table id="sitemap" cellpadding="3">
                     <thead>
                         <tr>
                             <th width="6%">Logo</th>
                             <th width="69%">URL</th>
                             <th title="Index Priority" width="5%">Prio</th>
                             <th width="5%">Images</th>
                             <th title="Change Frequency" width="5%">Ch. Freq.</th>
                             <th title="Last Modification Time" width="10%">Last Mod.</th>
                         </tr>
                     </thead>
                     <tbody>
                         <xsl:variable name="lower" select="'abcdefghijklmnopqrstuvwxyz'"/>
                         <xsl:variable name="upper" select="'ABCDEFGHIJKLMNOPQRSTUVWXYZ'"/>
                         <xsl:for-each select="sitemap:urlset/sitemap:url">
                             <tr>
                                 <xsl:if test="position() mod 2 = 1">
                                     <xsl:attribute name="class">odd</xsl:attribute>
                                 </xsl:if>
                                 <td>
                                     <xsl:if test="count(image:image) &gt; 0">
                                         <xsl:variable name="logoURL">
                                             <xsl:value-of select="image:image/image:loc" />
                                         </xsl:variable>
                                         <xsl:variable name="titleURL">
                                             <xsl:value-of select="image:image/image:title" />
                                         </xsl:variable>
                                         <img src="{$logoURL}" height="50" alt="{$titleURL}" />
                                     </xsl:if>
                                 </td>
                                 <td>
                                     <xsl:variable name="itemURL">
                                         <xsl:value-of select="sitemap:loc"/>
                                     </xsl:variable>
                                     <a href="{$itemURL}">
                                         <xsl:value-of select="sitemap:loc"/>
                                     </a>
                                 </td>
                                 <td>
                                     <xsl:value-of select="concat(sitemap:priority*100,'%')"/>
                                 </td>
                                 <td>
                                     <xsl:value-of select="count(image:image)"/>
                                 </td>
                                 <td>
                                     <xsl:value-of select="concat(translate(substring(sitemap:changefreq, 1, 1),concat($lower, $upper),concat($upper, $lower)),substring(sitemap:changefreq, 2))"/>
                                 </td>
                                 <td>
                                     <xsl:value-of select="concat(substring(sitemap:lastmod,0,11),concat(' ', substring(sitemap:lastmod,12,5)))"/>
                                 </td>
                             </tr>
                             <xsl:if test="count(image:image) &gt; 1">
                                 <tr>
                                     <xsl:if test="position() mod 2 = 1">
                                         <xsl:attribute name="class">odd</xsl:attribute>
                                     </xsl:if>
                                     <td colspan="6" class="galery">
                                         <xsl:for-each select="image:image">
                                             <xsl:if test="position() &gt; 1">
                                             <xsl:variable name="imageURL">
                                                 <xsl:value-of select="image:loc"/>
                                             </xsl:variable>
                                             <xsl:variable name="imageALT">
                                                 <xsl:value-of select="image:title"/>
                                             </xsl:variable>
                                             <img src="{$imageURL}" alt="{$imageALT}" title="{$imageALT}"/>
                                             </xsl:if>
                                         </xsl:for-each>
                                     </td>
                                 </tr>
                             </xsl:if>
                         </xsl:for-each>
                     </tbody>
                 </table>
             </div>
         </body>
     </html>
 </xsl:template>
</xsl:stylesheet>

Les deux fichiers dont il est question dans cet article sont en téléchargement en bas de page.

 Améliorations

Il y a plein d’améliorations que l’on peut apporter à ce qui est décrit ici :

  • Intégration des brèves dans la boucle
  • Intégration des vidéos
  • Intégration des documents et leur vignettes
  • Amélioration de la visualisation, par exemple, en rendant l’image cliquable pour une visualisation en plein écran
  • Intégrer tout ça dans un plugin SPIP
  • Génération de fichiers sitemap différents selon le type de contenu, et génération d’un fichier sitemap principal
  • Intégration d’un lien vers le fichier sitemap.xml dans le fichier robots.txt
  • Faire une gestion plus fine de la priorité, peut-être en s’inspirant de ce qui est fait chez certains plugins de sitemap pour SPIP.

Mais vous avez les bases pour aller plus loin.

Bon SEO à tous ;-)

 Plugin SPIP

La lecture de cet article a inspiré un développeur qui a réalisé l’implémentation d’un plugin SPIP pour les sitemap images. N’hésitez pas à aller voir son travail.

Documents joints

Spip | Plan du site | RSS 2.0 |
Habillage visuel © digitalnature sous Licence GPL