SERP, SPIP, breadcrumb et SEO

mardi 24 avril 2018, par Guillaume Orsal

Vous avez peut-être déjà remarqué que les SERP de Google ont souvent un affichage différent. Les SERP, pour Search Engine Result Page, ce sont les pages résultats d’un moteur de recherche.

La variation qui m’intéresse ici est la ligne qui contient traditionnellement l’url de la page, la petite ligne verte. Parfois, elle se présente sous la forme d’un fil d’ariane, qui reprend le fil d’ariane présent sur la page. Je trouve cela plus parlant pour la personne qui fait une recherche, alors voyons comment mettre ça en place. [sommaire]

Web sémantique & schema.org

Bon, aujourd’hui il y a des projets de voiture autonome sans pilote plutôt bien avancés. Mais voilà, un moteur de recherche n’arrive pas encore à détecter et lire tout seul le fil d’ariane et il va falloir l’aider. Pour cela on va utiliser le Web sémantique. Nous allons ajouter des balises dans les pages Web qui vont donner du sens au contenu en ajoutant des meta informations qui permettent aux moteurs de recherche de mieux comprendre le contenu des pages Web.

Il existe plusieurs systèmes de balises comme microformats ou Dublin core, mais je vais utiliser schema.org car il me semble être mieux reconnu par Google. D’ailleurs c’est celui qu’ils utilisent dans leurs exemples.

Ces différents systèmes ne sont pas incompatibles entre eux, bien au contraire, je vous invite à tous les utiliser sur vos pages Web pour améliorer votre référencement. Ils permettent de représenter de manière structurée plein de types d’information. Cela dépasse le cadre de cet article, et nous allons nous focaliser sur les BreadcrumbList. « Breadcrumb trail » c’est le terme anglais pour désigner le fil d’Ariane sur les pages Web.

Prenons un exemple

Voici un exemple de fil d’ariane :

Accueil > SEO > Web sémantique > SERP, SPIP et breadcrumb

Schema.org définit donc une structure pour les breadcrumb, c’est à dire une liste et une hiérarchie d’information qui permet de définir un fil d’Ariane et ses éléments. Pour faire simple, je vais me limiter ici aux champs obligatoires ou les plus pertinents : le nom, l’url et la position. En explorant le site de schema.org, vous pourrez découvrir tout ce qu’il est possible de paramétrer.

Les éléments de mon exemple se définissent alors ainsi :

nom	url	position
Accueil	https://www.orsal.fr/	1
SEO	https://www.orsal.fr/seo/	2
Web sémantique	https://www.orsal.fr/seo/web-semantique/	3
SERP, SPIP et breadcrumb	https://www.orsal.fr/seo/web-semant...	4

Il va falloir transformer la gestion du fil d’Ariane en place sur un site SPIP pour obtenir une liste avec les informations ajoutées. Initialement le code HTML pour mon fil d’Ariane ressemble à cela :

<p id="hierarchie">

    <a href="https://www.orsal.fr/">Accueil</a> &gt;

    <a href="/seo/">SEO</a> &gt;

    <a href="/seo/web-semantique/">Web sémantique</a> &gt;

    <strong class="on">SERP, SPIP et breadcrumb</strong>

</p>

L’objectif est de transformer la génération du bloc dans le squelette SPIP pour obtenir ce type de bloc :

<ol itemscope itemtype="http://schema.org/BreadcrumbList" id="hierarchie">



    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">

        <a href="https://www.orsal.fr/" itemprop="item">

            <span itemprop="name">Accueil</span>

        </a>

        <meta itemprop="position" content="1" />

    </li>



    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> &gt; 

        <a href="/seo/" itemprop="item">

            <span itemprop="name">SEO</span>

        </a>

        <meta itemprop="position" content="2" />

    </li>



    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> &gt; 

        <a href="/seo/web-semantique" itemprop="item">

            <span itemprop="name">Web sémantique</span>

        </a>

        <meta itemprop="position" content="3" />

    </li>



    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> &gt; 

        <strong class="on">

        <a href="/seo/web-semantique/serp-spip-breadcrumb" itemprop="item">

            <span itemprop="name">SERP, SPIP et breadcrumb</span>

        </a>

        </strong>

        <meta itemprop="position" content="4" />

    </li>



</ol>

Il s’agit d’une liste de liens. Voici comment la lire.

Les données structurées schema.org sont les propriétés itemprop, itemscope et itemtype :

itemscope indique que le bloc html courant correspond à un bloc schema.org
itemtype permet de préciser le type du bloc schema.org courant
itemprop définit une propriété du bloc courant

C’est récursif, un bloc peut se retrouver l’enfant d’un autre.

Ainsi le bloc <ol/> correspond à une BreadcrumbList, et chaque <li/> à un itemListElement enfant de la BreadcrumbList, de type ListItem. C’est pas clair ? Relisez doucement le source HTML, ça va venir.

En plaçant la propriété item sur la balise <a/>, cela permet de définir une propriété de type url. J’ai ajouté un bloc <span/>, juste pour porter la propriété name. Enfin pour la position, comme je n’avais pas d’élément où l’insérer, j’ai directement ajouté un bloc <meta>, qui ne s’affichera donc pas, mais sera bien présent dans le code.

Google et les données structurées

La liste des champs/propriétés possibles sont disponibles sur le site de schema.org.

Une liste plus synthétique des champs recommandés ou obligatoires, sont disponibles dans les directives pour les données structurées définies par Google.

En utilisant des données structurées sur votre site, vous améliorez la compréhension de votre site par les moteurs de recherche, donc vous en améliorez le référencement, et vous bénéficiez parfois d’un affichage optimisé (rich snippet) dans les résultats de recherche, comme l’affichage des notes sur des produits, ou les éléments d’une recette.

Outil indispensable lorsque vous travaillez les données structurées, Google propose un analyseur de code source qui vous montre le résultat de la détection par le moteur de recherche des balises sémantiques, pour tester vos données structurées.

Il vous indiquera également les erreurs que vous auriez pu commettre dans l’enchaînement des blocs. Utilisez-le pour débugger vos balises.

Pas de jaloux, les données structurées fonctionnent également chez Microsoft Bing et Yandex, entre autres.

SPIP et les données structurées

L’objectif est d’intégrer ceci à un site SPIP. J’ai fait la modification sur les pages article et rubrique pour lesquelles je voyais un intérêt à avoir un fil d’Ariane.

Pour cela, j’ai copié les fichiers article.html et rubrique.html que j’ai trouvés dans le répertoire de mon thème actuel, vers le répertoire squelette/contenu/ du site, pour surcharger les squelettes.

J’ai ensuite rechercher et remplacer le bloc hiérarchie présent dans les fichiers. Voici le morceau de squelette qui permet de générer le fil d’Ariane avec les méta données.

[(#REM) Fil d'Ariane ]

<ol itemscope itemtype="http://schema.org/BreadcrumbList" id="hierarchie">

    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">

        <a href="#URL_SITE_SPIP/" itemprop="item">

            <span itemprop="name"><:accueil_site:></span>

        </a>

        <meta itemprop="position" content="1" />

    </li>

    <BOUCLE_ariane(HIERARCHIE){id_article}>

    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> &gt; 

        <a href="#URL_RUBRIQUE" itemprop="item">

            <span itemprop="name">[(#TITRE|couper{80})]</span>

        </a>

        <meta itemprop="position" content="[(#COMPTEUR_BOUCLE|plus{1})]" />

    </li>

    </BOUCLE_ariane>

    [<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> &gt; 

        <a href="#URL_ARTICLE" itemprop="item">

            <span itemprop="name">(#TITRE|couper{80})</span>

        </a>

        <meta itemprop="position" content="[(#TOTAL_BOUCLE|plus{2})]" />

    </li>]

    </B_ariane>

</ol>

Le bloc <ol/> est codé en dur puisqu’il encapsulera toujours le fil d’Ariane. Chaque bloc <li/> qui le constitue correspond à un niveau hiérarchique.

Le premier élément <li/> correspond à la page d’accueil. La position du premier élément doit être égale à 1.

Ensuite on entre dans une boucle sur la hiérarchie des rubriques entre l’accueil du site et la page courante. Pour chaque niveau, on retrouve un bloc <li/>. La position est calculée sur la balise SPIP #COMPTEUR_BOUCLE qui nous donne le numéro d’itération. On ajoute 1, avec le filtre plus {1} car le premier c’est la page d’accueil.

A partir de SPIP 3.0, il existe la balise #PROFONDEUR qui indique la profondeur d’une rubrique, mais la numérotation commence à 0, et la position attendue pour le premier élément est 1. Donc je préfère garder mon système de comptage sur la boucle qui fonctionne pour toutes les versions de SPIP.

Enfin, pour le dernier élément du fil d’Ariane, il s’agit de la page actuellement visitée, j’ai utilisé un lien vers la page courante pour ajouter du maillage interne important en SEO. J’ai placé le code dans le bloc optionnel, entre la balise fermante </BOUCLE_ariane> et la balise fermante </B_ariane>, pour que la balise #TOTAL_BOUCLE contienne le nombre d’éléments trouvés dans la hiérarchie. Cela va permettre de calculer la position du dernier élément, via le filtre plus {2}.

De plus ce bloc est entre crochet pour que les balises et filtres soient remplacés et calculés lors de la génération de la page.

Une fois que vous avez apporté la modification sur les deux squelettes, il n’y a plus qu’à recalculer la page et vider le cache, et enfin attendre que les moteurs de recherche fassent la mise à jour.

CSS & fil d’ariane

Si tout s’est bien passé, vous devez obtenir une liste ordonnée qui correspond à votre fil d’Ariane. Mais pour l’instant les éléments sont les uns en dessous des autres, avec une numérotation.

Pour modifier cela, j’ai utilisé un peu de CSS, dans le fichier squelette/perso.css pour surcharger le style de mon thème.

#hierarchie li {

    list-style-type: none;

    margin-left: 0;

    display: inline;

}

Cela correspond à :

list-style-type permet de masquer la numérotation
margin-left permet de supprimer le décalage de la numérotation
display permet d’afficher chaque élément du fil d’Ariane sur la même ligne à la suite

Pensez à rafraîchir le cache pour vérifier les modifications.

Pour aller plus loin

N’oubliez pas de tester le résultats de vos modifications avec l’outil de Google, pour vérifier qu’il détecte bien tous vos champs. Vous découvrirez au passage peut-être d’autres balises déjà présentes sur la page.

Le champ des possibles avec les données structurées est immense et reconnu par tous les moteurs de recherche. N’hésitez pas à en abuser sur vos pages.