%20Schema.org%20JSON-LD%20sur%20Blogger.jpg "Guide 2026 Comment ajouter le Fil d'Ariane (Breadcrumbs) Schema.org JSON-LD sur Blogger")
Bonjour à tous, c'est Lucas Martin. Bienvenue sur Cash Astuce, votre centre d'ingénierie SEO et de développement web. Si vous analysez l'architecture des sites qui dominent les premiers résultats de Google aujourd'hui, vous remarquerez un point commun : une structure sémantique irréprochable. L'un des piliers de cette structure est le fameux Fil d'Ariane (Breadcrumbs).
Cependant, la majorité des thèmes Blogger utilisent encore d'anciennes balises obsolètes (Microdata) qui alourdissent le code HTML et limitent la compréhension des moteurs de recherche. Aujourd'hui, nous allons faire un bond technologique. Je vais vous montrer comment intégrer un Fil d'Ariane dynamique sur Blogger en utilisant la norme Schema.org au format JSON-LD.
L'objectif ? Obtenir les fameux "Rich Snippets" (extraits enrichis) dans les SERPs de Google, réduire la profondeur d'exploration (Crawl Depth) de vos pages, et améliorer drastiquement l'expérience utilisateur sans impacter vos métriques Core Web Vitals.
Pourquoi abandonner les Microdata au profit du JSON-LD ?
Pendant des années, les développeurs Blogger injectaient les balises Schema (itemprop, itemscope) directement au milieu des balises HTML. Cette méthode pose un problème d'ingénierie majeur : elle mélange la présentation visuelle (HTML/CSS) et les données structurées (Data).
Le JSON-LD (JavaScript Object Notation for Linked Data) résout ce problème. Il s'agit d'un script asynchrone, placé dans le <head> ou le <body>, qui déclare la structure de votre page directement aux robots d'indexation de Google (Googlebot). Les avantages sont massifs :
- Vitesse d'exécution : Le navigateur n'a pas besoin de parcourir tout le DOM pour trouver les données.
- Zéro impact visuel : Vous pouvez designer votre Fil d'Ariane visuel comme vous le souhaitez en CSS pur, indépendamment du code JSON lu par Google.
- Recommandation officielle : C'est le format explicitement recommandé par les ingénieurs SEO de Google depuis 2020.
Le Guide d'intégration sur Blogger (Étape par Étape)
Nous allons diviser cette implémentation en trois couches : la structure visuelle (XML/HTML), la couche de données (JSON-LD), et le design (CSS). Attention : avant toute manipulation, faites une sauvegarde de votre thème Blogger actuel.
Étape 1 : Le code XML visuel du Fil d'Ariane
Allez dans Thème > Modifier le code HTML. Cherchez la balise <b:includable id='main' var='top'> ou le conteneur de votre article (souvent sous <h1 class='post-title'>). Insérez ce code HTML léger pour générer le texte cliquable du fil d'Ariane :
<!-- Interface Visuelle du Fil d'Ariane par Cash Astuce -->
<b:if cond='data:view.isPost'>
<nav aria-label="breadcrumb" class="ca-breadcrumbs">
<ol>
<li><a expr:href='data:blog.homepageUrl'>Accueil</a></li>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<li>
<a expr:href='data:label.url + "?max-results=8"'><data:label.name/></a>
</li>
</b:loop>
</b:if>
<li class="ca-current-page" aria-current="page"><data:post.title/></li>
</ol>
</nav>
</b:if>Étape 2 : L'injection de la Data (Le JSON-LD dynamique)
C'est ici que l'optimisation technique prend tout son sens. Nous allons utiliser les balises dynamiques de Blogger pour générer automatiquement le code JSON lu par Google. Placez ce script juste en dessous du code précédent ou juste avant la fermeture </head> :
<!-- Schema.org BreadcrumbList JSON-LD -->
<b:if cond='data:view.isPost'>
<script type='application/ld+json'>
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Accueil",
"item": "<data:blog.homepageUrl/>"
}
<b:if cond='data:post.labels'>
<b:loop index='i' values='data:post.labels' var='label'>
,{
"@type": "ListItem",
"position": <b:eval expr='data:i + 2'/>,
"name": "<data:label.name/>",
"item": "<data:label.url/>"
}
</b:loop>
</b:if>
]
}
</script>
</b:if>Astuce d'ingénieur : Notez l'utilisation de <b:eval expr='data:i + 2'/>. Cela permet d'incrémenter automatiquement la position de chaque catégorie dans le fichier JSON, une exigence stricte de Schema.org pour que Google valide le code.
Étape 3 : L'esthétique CSS (Vanilla CSS)
Pour éviter de faire appel à des bibliothèques d'icônes lourdes comme FontAwesome (qui détruisent votre PageSpeed), nous utilisons du CSS pur avec la propriété content pour les séparateurs. Ajoutez ceci dans votre balise <b:skin><
Commentaires
Enregistrer un commentaire