Guide 2026 : Créer un Sommaire Automatique (Table of Contents) sur Blogger en Vanilla JS

 

Bonjour à tous, c'est Lucas Martin. Aujourd'hui sur Cash Astuce, nous passons à la vitesse supérieure en matière de SEO technique. Nous allons déployer l'une des fonctionnalités les plus puissantes pour dominer les résultats de recherche Google : Le Sommaire Automatique (Table of Contents - TOC).

Pourquoi tous les grands blogs tech (comme Kinsta ou HubSpot) possèdent-ils un sommaire ? Tout d'abord pour l'expérience utilisateur : cela permet de naviguer facilement dans un guide de 2000 mots. Ensuite, et surtout, pour le SEO. Les liens d'ancrage générés par le sommaire permettent à Google de créer des "Sitelinks" (liens de redirection directs) sous votre résultat de recherche dans les SERPs, augmentant massivement votre taux de clic (CTR).

Oubliez les scripts lourds ou le travail manuel fastidieux. Nous allons coder un algorithme en Vanilla JS pur qui va scanner votre article, détecter vos balises Titre (H2 et H3), et générer une table des matières interactive, rétractable, et 100% compatible avec le Dark Mode de notre blog.

Comment fonctionne notre algorithme Vanilla JS ?

Notre script est conçu pour être intelligent et léger. Voici ce qu'il accomplit en arrière-plan en moins d'une milliseconde :

1. Il cible la zone de texte de votre article.
2. Il recherche toutes les balises <h2> (Titre) et <h3> (Sous-titre).
3. Si l'article contient au moins 3 titres (pour éviter de polluer les articles courts), le script s'active.
4. Il attribue un ID unique à chaque titre.
5. Il génère une boîte HTML élégante au-dessus du premier <h2> avec des liens d'ancrage cliquables.

Tutoriel : Déployer le Sommaire Automatique sur Blogger

Comme toujours : Prenez l'habitude de sauvegarder votre thème (Thème > Sauvegarder) avant de manipuler le code source.

Étape 1 : Le Design du Sommaire (Code CSS)

Allez dans Thème > Modifier le code HTML. Localisez votre zone de styles (généralement sous <b:skin><![CDATA[) et ajoutez le CSS suivant :

/* Sommaire Automatique (TOC) - Cash Astuce */
#ca-toc-container {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-left: 4px solid #0056b3;
  border-radius: 5px;
  padding: 20px;
  margin: 25px 0;
  max-width: 100%;
  font-family: inherit;
  transition: all 0.3s ease;
}
.ca-toc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 18px;
  color: #222;
  margin-bottom: 0;
}
.ca-toc-title { display: flex; align-items: center; gap: 8px; }
.ca-toc-title svg { width: 20px; height: 20px; fill: #0056b3; }
.ca-toc-toggle {
  background: none; border: none; font-size: 14px;
  color: #0056b3; cursor: pointer; padding: 0; font-weight: 600;
}
.ca-toc-toggle:hover { text-decoration: underline; }
#ca-toc-list {
  list-style: none; padding-left: 0; margin: 15px 0 0 0;
}
#ca-toc-list.ca-hidden { display: none; }
.ca-toc-item { margin-bottom: 8px; line-height: 1.4; }
.ca-toc-h2 { margin-left: 0; font-weight: 600; }
.ca-toc-h3 { margin-left: 20px; font-size: 0.95em; position: relative; }
.ca-toc-h3::before {
  content: "—"; position: absolute; left: -15px; color: #999;
}
.ca-toc-item a { color: #444; text-decoration: none; transition: color 0.2s; }
.ca-toc-item a:hover { color: #0056b3; text-decoration: underline; }

/* Dark Mode Compatibilité */
[data-theme="dark"] #ca-toc-container { background-color: #1e1e1e; border-color: #333; border-left-color: #4da3ff; }
[data-theme="dark"] .ca-toc-header { color: #e0e0e0; }
[data-theme="dark"] .ca-toc-title svg { fill: #4da3ff; }
[data-theme="dark"] .ca-toc-toggle { color: #4da3ff; }
[data-theme="dark"] .ca-toc-item a { color: #bbb; }
[data-theme="dark"] .ca-toc-item a:hover { color: #4da3ff; }

Étape 2 : L'Algorithme de Génération (Code Vanilla JS)

Maintenant, descendez tout en bas de votre éditeur de thème, juste au-dessus de la balise fermante </body>. Ajoutez ce script magique. Nous le conditionnons pour qu'il ne s'exécute que sur les pages d'articles :

<!-- Script Sommaire Automatique par Cash Astuce -->
<b:if cond='data:view.isPost'>
<script>
//<![CDATA[
document.addEventListener('DOMContentLoaded', function() {
  // Cibler le corps de l'article (adaptez la classe si nécessaire, souvent .post-body)
  const postBody = document.querySelector('.post-body');
  if (!postBody) return;

  // Récupérer tous les H2 et H3
  const headings = postBody.querySelectorAll('h2, h3');
  
  // Activer uniquement si l'article possède au moins 3 titres
  if (headings.length >= 3) {
    
    // Création du conteneur du sommaire
    const tocContainer = document.createElement('div');
    tocContainer.id = 'ca-toc-container';
    
    // Icône SVG et Header
    const tocHeaderHTML = `
      

        

          
          Table des matières
        
        
      
      

    `;
    tocContainer.innerHTML = tocHeaderHTML;
    
    // Insérer le sommaire juste avant le tout premier H2 ou H3
    headings[0].parentNode.insertBefore(tocContainer, headings[0]);
    
    const tocList = document.getElementById('ca-toc-list');
    
    // Boucle pour lister les titres
    headings.forEach((heading, index) => {
      // Générer un ID si le titre n'en possède pas
      if (!heading.id) {
        heading.id = 'ca-heading-' + index;
      }
      
      const li = document.createElement('li');
      li.className = 'ca-toc-item ca-toc-' + heading.tagName.toLowerCase();
      
      const a = document.createElement('a');
      a.href = '#' + heading.id;
      a.textContent = heading.textContent;
      
      li.appendChild(a);
      tocList.appendChild(li);
    });
    
    // Fonctionnalité du bouton Masquer/Afficher
    const toggleBtn = document.getElementById('ca-toc-toggle');
    toggleBtn.addEventListener('click', function() {
      tocList.classList.toggle('ca-hidden');
      if (tocList.classList.contains('ca-hidden')) {
        this.textContent = '[Afficher]';
      } else {
        this.textContent = '[Masquer]';
      }
    });
  }
});
//]]>
</script>
</b:if>

Conclusion et Optimisation de l'UX

Félicitations ! Votre blog dispose maintenant d'un sommaire digne des agences SEO les plus prestigieuses. Testez-le : ouvrez l'un de vos longs articles, et voyez la magie opérer de manière totalement autonome.

Avez-vous remarqué comment ce nouveau module s'intègre parfaitement avec notre récente mise à jour ? En effet, lorsqu'un lecteur clique sur un lien du sommaire pour sauter directement à une section, observez votre Barre de progression de lecture (Reading Progress Bar) s'ajuster instantanément ! C'est ce niveau d'ingénierie et de cohérence UX qui fidélisera votre audience et signalera à Google que votre site est une ressource de haute qualité.

Ce script Vanilla JS est ultra-léger et ne ralentira jamais votre site. L'avez-vous mis en place ? Partagez le résultat de vos Sitelinks dans les commentaires quand Google aura scanné vos pages !