Add-on TOC+ 1 sommaire et 1 bouton de navigation pour le SEO !
Améliorez l'expérience utilisateur et donc votre référencement (oui oui !) avec une table des matières interactive et un bouton de navigation flottant sur votre blog Blogger.
Que viennent donc faire un sommaire et la navigation dans un blog consacré à l'optimisation du SEO ? En fait le rapport est étroit, et l'explication logique.
Lisez cet article pour en savoir plus, pour installer en quelques clics l'extension TOC+ dans votre thème Blogger, quelle que soit sa version et sa langue, et bénéficier d'un sommaire interactif qui se déploiera automatiquement sur tous vos articles, comme il le fait ici par exemple. Testez-le !
Il intègre aussi le bouton de navigation flottant très complet que vous pouvez utiliser actuellement.
Sommaire, navigation et référencement
Une table des matières permet de comprendre rapidement le contenu d'un article. Plus celui-ci est long, plus un sommaire est nécessaire. Son interactivité, permettant d'aller voir directement un chapitre sans avoir à longuement faire défiler la page, va permettre au visiteur de se concentrer sur ce qui l'intéresse et augmenter son temps de visite.
Un bouton de navigation flottant, toujours disponible mais discret, permettant de se promener facilement dans les articles, et le blog en général, de faire une recherche, l'invite à l'exploration tout en restant dans le blog.
Le temps que passent les internautes dans un blog et leurs interactions (clics, scrolling...) sont des éléments que Google et les autres moteurs de recherche prennent en compte, et ils jouent donc un rôle important dans le référencement.
Fonctionnalités de l'add-on TOC+
L'add-on TOC+ (= Table Of Contents + navigation button) est compatible avec les versions 1 et 2 des gadgets Blogger, s'adapte à la langue et aux couleurs du blog et utilise des icônes SVG légères au chargement.
Une table des matières automatique et interactive
- L'add-on TOC+ introduit automatiquement une table des matières dans tous les articles du blog.
- Un bouton associé permet de la réduire ou de la déployer.
- Le sommaire se construit à partir de la structure existante de l'article : titres et sous-titres (balisage h2 et h3).
- L'add-on TOC+ ajoute à chaque balise h un lien temporaire permettant d'y accéder directement à partir du sommaire.
Un bouton de navigation flottant, discret et complet
- Toujours disponible à l'intérieur de tous les articles puisque qu'il est flottant.
- Discret car il disparait au bout de 2 secondes (ajustables) quand on arrête de faire défiler la page afin de ne pas gêner la lecture. Il réapparaît immédiatement au moindre mouvement.
- Permet d'aller directement en haut ou en bas de page, de passer à l'article suivant ou précédent, d'aller à la page d'accueil.
- Intègre une zone recherche dans le blog.
Installation de l'add-on TOC+
1. Faites une sauvegarde
Important : malgré les nombreux tests réalisés dans diverses situations, aucune garantie de succès ni dans l'installation ni dans les résultats ne peut être donnée. Il est indispensable de faire une sauvegarde de votre thème avant de procéder à l'installation de l'add-on TOC+, afin de vous assurer un retour en arrière simple et sécurisé.
2. Présence de <b:defaultmarkups> (avec un s)
Ce balisage est indispensable pour la suite de l'installation.
Dans votre thème Blogger, recherchez le terme <b:defaultmarkups>. S'il n'existe pas (c'est en général le cas des thèmes de version 1 non modifiés), ajoutez les 2 lignes suivantes juste après la balise d'ouverture <head>.
<b:defaultmarkups> </b:defaultmarkups>
3. Intégration du code principal de l'add-on TOC+
Il s'agit de l'ajout des inclusions 'communes' de l'add-on TOC+ qui contiennent l'essentiel de son code.
Juste après la balise d'ouverture <b:defaultmarkups> (avec un s), copiez et collez le code ci-dessous
<!-- Add-on TOC+ by https://blogger-optimisation-seo.blogspot.com/ --> <b:defaultmarkup type='Common'> <b:includable id='NavigationButtons'> <b:if cond='data:blog.pageType == "static_page" or data:blog.pageType == "item"'> <div id='nav-buttons'> <b:with value='data:messages.olderPosts ? data:messages.olderPosts : data:olderPageTitle' var='PreviousArticleMsg'> <b:with value='data:messages.newerPosts ? data:messages.newerPosts : data:newerPageTitle' var='NextArticleMsg'> <b:with value='data:messages.home ? data:messages.home : data:homeMsg' var='HomeMessage'> <b:with value='data:blog.locale.language == "fr" ? "Haut de page" : "Top"' var='TopMessage'> <b:with value='data:blog.locale.language == "fr" ? "Bas de page" : "Bottom"' var='BottomMessage'> <b:with value='data:blog.locale.language == "fr" ? "Fermer" : "Close"' var='HideSearchMsg'> <b:comment render='false'> <!-- Pour compatibilité des messages des versions --> </b:comment> <button class='nav-button' expr:title='data:TopMessage' id='scroll-up'> <svg viewBox='0 -960 960 960' xmlns='http://www.w3.org/2000/svg'> <path d='M160-760v-80h640v80H160Zm280 640v-408L336-424l-56-56 200-200 200 200-56 56-104-104v408h-80Z'/> </svg> </button> <b:if cond='data:olderPageUrl'> <button class='nav-button' expr:title='data:PreviousArticleMsg' id='prev-article'> <svg viewBox='0 -960 960 960' xmlns='http://www.w3.org/2000/svg'> <path d='M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z'/> </svg> </button> </b:if> <button class='nav-button' expr:title='data:HomeMessage' id='home-button'> <svg viewBox='0 -960 960 960' xmlns='http://www.w3.org/2000/svg'> <path d='M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z'/> </svg> </button> <b:if cond='data:newerPageUrl'> <button class='nav-button' expr:title='data:NextArticleMsg' id='next-article'> <svg viewBox='0 -960 960 960' xmlns='http://www.w3.org/2000/svg'> <path d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/> </svg> </button> </b:if> <button class='nav-button' expr:title='data:BottomMessage' id='scroll-down'> <svg viewBox='0 -960 960 960' xmlns='http://www.w3.org/2000/svg'> <path d='M160-120v-80h640v80H160Zm320-160L280-480l56-56 104 104v-408h80v408l104-104 56 56-200 200Z'/> </svg> </button> <div id='search-container' style='display: none;'> <form action='/search' method='get'> <input expr:aria-label='data:messages.searchThisBlog' expr:placeholder='data:messages.searchThisBlog' name='q' style='padding: 0px; max-width: 100%; font-size: 18px; ' type='text'/> <button class='nav-button ok-button' expr:title='data:messages.ok' id='checked-search-button' type='submit'> <data:messages.ok/> </button> </form> </div> <button class='nav-button ok-button' expr:title='data:HideSearchMsg' id='hide-search-button' style='display: none;'> <svg viewBox='0 -960 960 960' xmlns='http://www.w3.org/2000/svg'> <path d='m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/> </svg> </button> <button class='nav-button show-search' expr:title='data:messages.searchThisBlog' id='search-button'> <svg viewBox='0 -960 960 960' xmlns='http://www.w3.org/2000/svg'> <path d='M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/> </svg> </button> </b:with> </b:with> </b:with> </b:with> </b:with> </b:with> <script> document.addEventListener("DOMContentLoaded", function () { var scrollUpBtn = document.getElementById("scroll-up"); var scrollDownBtn = document.getElementById("scroll-down"); var prevBtn = document.getElementById("prev-article"); var nextBtn = document.getElementById("next-article"); var homeBtn = document.getElementById("home-button"); var prevUrl = "<data:olderPageUrl/>"; var nextUrl = "<data:newerPageUrl/>"; var homeUrl = "<data:blog.homepageUrl/>"; var searchBtn = document.getElementById("search-button"); var searchContainer = document.getElementById("search-container"); var hideSearchBtn = document.getElementById("hide-search-button"); var searchVisible = false; // Variable pour vérifier si la zone de recherche est visible if (searchBtn && searchContainer) { searchBtn.addEventListener("click", function () { if (searchContainer.style.display === "none") { searchContainer.style.display = "block"; hideSearchBtn.style.display = "block"; searchBtn.style.display = "none"; searchVisible = true; // La recherche est maintenant visible clearTimeout(hideTimeout); // Désactivation du timeout lorsque la recherche est ouverte } }); hideSearchBtn.addEventListener("click", function () { if (searchContainer.style.display === "block") { searchContainer.style.display = "none"; hideSearchBtn.style.display = "none"; searchBtn.style.display = "block"; searchVisible = false; // La recherche est maintenant fermée resetHideTimeout(); // Le timeout redémarre uniquement lorsque la recherche est fermée } }); } // Bouton accueil if (homeBtn) { homeBtn.addEventListener("click", function () { window.location.href = homeUrl; }); } // Bouton article précédent if (prevBtn && prevUrl && prevUrl !== "null") { prevBtn.addEventListener("click", function () { window.location.href = prevUrl; }); } else if (prevBtn) { prevBtn.style.display = "none"; } // Bouton article suivant if (nextBtn && nextUrl && nextUrl !== "null") { nextBtn.addEventListener("click", function () { window.location.href = nextUrl; }); } else if (nextBtn) { nextBtn.style.display = "none"; } // Bouton remonter if (scrollUpBtn) { scrollUpBtn.addEventListener("click", function () { window.scrollTo({ top: 0, behavior: "smooth" }); }); } // Bouton descendre if (scrollDownBtn) { scrollDownBtn.addEventListener("click", function () { window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" }); }); } var navButtons = document.getElementById("nav-buttons"); var hideTimeout; function showNav() { navButtons.classList.add("visible"); resetHideTimeout(); } function hideNav() { navButtons.classList.remove("visible"); } function resetHideTimeout() { if (!searchVisible) { // Si la recherche est fermée, on réactive le timeout clearTimeout(hideTimeout); hideTimeout = setTimeout(hideNav, 2000); // Temps d'inactivité avant disparition (ajuster selon besoin) } } // Écouteurs d'événements pour réactiver la navigation document.addEventListener("input", showNav); document.addEventListener("scroll", showNav); document.addEventListener("mousemove", showNav); }); </script> <b:with value='data:skin.vars.posts_background_color ? data:skin.vars.posts_background_color : data:skin.vars.post_background_color' var='SvgBackGround'> <b:with value='data:skin.vars.posts_title_color ? data:skin.vars.posts_title_color : data:skin.vars.post_footer_text_color' var='SvgColor'> <b:comment render='false'> <!-- Pour compatibilité versions --> </b:comment> <style> #nav-buttons { position: fixed; margin-top: calc(100vh - 120px); /* Distance par rapport au top de l'écran : c'est la seule propriété qui a pu agir sur la verticalité */ right: 10px; /* Distance par rapport à la droite */ display: flex; flex-direction: row; /* Empile les boutons horizontalement */ top: 0px; z-index: 10000; background: none; /* note : élément 'before' prend en charge le fond et son opacité */ border-radius: 50px; padding: 0px; box-shadow: 5px 4px 10px rgba(0, 0, 0, 0.3); /* Ombre douce */ cursor: pointer; gap: 0px; /* Espace entre les boutons */ height: max-content; /* Pour éviter que l'élément prenne toute la largeur */ width: max-content; /* Pour éviter que l'élément prenne toute la largeur */ visibility: hidden; opacity: 0; transition: opacity 0.3s ease-in-out; pointer-events: none; } #nav-buttons.visible { visibility: visible; opacity: 1; pointer-events: auto; } /* élément before permettant de gérer opacité du fond sans impacter les svg */ #nav-buttons::before { content: ""; /* vide mais nécessaire */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50px; opacity: 0.2; /* Opacité légère */ background: <data:SvgBackGround/>; /* Fond = couleur du titre du blog */ z-index: -1; } #nav-buttons button { background: none; border: none; border-radius: 50%; width: 50px; height: 50px; justify-content: center; align-items: center; transition: transform 0.2s ease; } #nav-buttons button:hover { background:<data:SvgBackGround/>; /* Survol */ box-shadow: 5px 4px 10px rgba(0, 0, 0, 0.3); /* Ombre douce */ transform: scale(1.1); } #nav-buttons svg { fill: <data:SvgColor/>; /* Couleur des boutons */ width: 30px; height: 30px; } .ok-button { fill: <data:SvgBackGround/> !important; color: <data:SvgBackGround/> !important; font-size: 120%; font-weight: bold; background: <data:SvgColor/> !important; border-radius: 10% !important; } .ok-button svg { fill: <data:SvgBackGround/> !important; } </style> </b:with> </b:with> </div> </b:if> </b:includable> <b:includable id='TableOfContents'> <b:with value='data:blog.locale.language == "fr" ? " SOMMAIRE " : " CHAPTERS "' var='TocMessage'> <b:comment render='false'> <!-- Pour compatibilité langues --> </b:comment> <script> document.addEventListener("DOMContentLoaded", function () { var tocContainer = document.getElementById("table-of-contents"); if (!tocContainer) return; // Arrête si aucun conteneur prévu var postContent = document.querySelector(".post-body"); if (!postContent) return; var headers = postContent.querySelectorAll("h2, h3"); if (headers.length === 0) return; var tocList = document.createElement("ul"); tocList.classList.add("toc-list"); headers.forEach(function (header, index) { var id = header.id || "section-" + index; header.id = id; var listItem = document.createElement("li"); listItem.classList.add(header.tagName.toLowerCase()); listItem.id = "TableContentsList"; var link = document.createElement("a"); link.href = "#" + id; link.textContent = header.textContent; listItem.appendChild(link); tocList.appendChild(listItem); }); // Ajoute un bouton de repli/déploiement var tocWrapper = document.createElement("div"); tocWrapper.classList.add("toc-wrapper"); var toggleButton = document.createElement("button"); toggleButton.classList.add("toc-toggle"); toggleButton.id = "ShowHideButton"; // Crée un élément pour une icône SVG var icon = document.createElement("span"); icon.innerHTML = `<svg fill='#000000' height='24px' viewBox='0 -960 960 960' width='24px' xmlns='http://www.w3.org/2000/svg'><path d='m644-428-58-58q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660-500q0 20-4 37.5T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q151 0 269 83.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-151 0-269-83.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 143.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z'/> </svg>`; icon.classList.add("toggle-icon"); toggleButton.appendChild(document.createTextNode("<data:TocMessage/>")); toggleButton.appendChild(icon); // Valeur par défaut : ouvert (true) ou fermé (false) var isOpen = false; tocList.style.display = "none"; toggleButton.addEventListener("click", function () { isOpen = !isOpen; tocList.style.display = isOpen ? "block" : "none"; // Change icône selon état icon.innerHTML = isOpen ? `<svg fill='#000000' height='24px' viewBox='0 -960 960 960' width='24px' xmlns='http://www.w3.org/2000/svg'><path d='m644-428-58-58q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660-500q0 20-4 37.5T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q151 0 269 83.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-151 0-269-83.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 143.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z'/></svg>` // Icône "masquer" : `<svg fill='#000000' height='24px' viewBox='0 -960 960 960' width='24px' xmlns='http://www.w3.org/2000/svg'><path d='M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z'/></svg>`; // Icône "afficher" }); tocWrapper.appendChild(toggleButton); document.body.appendChild(tocWrapper); tocWrapper.appendChild(tocList); tocContainer.appendChild(tocWrapper); }); </script> </b:with> <b:with value='data:skin.vars.post_background_color ? data:skin.vars.post_background_color : data:skin.vars.posts_background_color' var='PostBackGround'> <b:comment render='false'> <!-- Pour compatibilité versions --> </b:comment> <style> #TableContentsList { color: <data:skin.vars.body_text_color/>; /* Couleur du texte */ padding: 4px 5px; /* Espacement interne (haut/bas, gauche/droite) */ border: none; /* Pas de bordure */ border-radius: 0px 0px 4px 4px; /* Coins arrondis */ box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3); /* Ombre portée */ font-size: 140%; /* Taille de la police */ cursor: pointer; /* Curseur de type "pointer" pour signaler l'interactivité */ transition: background-color 0.3s ease, transform 0.2s; /* Transition douce */ width: max-content; /* Pour éviter que l'élément prenne toute la largeur */ max-width: 82vw; /* Ne dépasse pas 82% de la largeur écran pour compatibilité version 2*/ overflow-wrap: break-word; } #TableContentsList:hover { transform: translate(0px, 3px); /* Glissement au survol */ } </style> <style> #ShowHideButton { background-color: <data:PostBackGround/>; /* Couleur de fond */ color: <data:skin.vars.body_text_color/>; /* Couleur du texte */ padding: 10px 5px; /* Espacement interne (haut/bas, gauche/droite) */ border: none; /* Pas de bordure */ border-radius: 4px; /* Coins arrondis */ box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.3); /* Ombre portée */ font-size: 110%; /* Taille de la police */ cursor: pointer; /* Curseur de type "pointer" pour signaler l'interactivité */ transition: background-color 0.3s ease, transform 0.3s; /* Transition douce */ } #ShowHideButton:hover { transform: scale(1.05); /* Légère augmentation de la taille au survol */ } </style> </b:with> </b:includable> </b:defaultmarkup> <!-- Add-on TOC+ FIN -->
4. Intégration des appels aux inclusions de l'add-on TOC+
Il s'agit de placer 'aux bons endroits' les balises <include> qui vont activer la table des matières et le bouton de navigation à chaque affichage d'article ou de page statique.
Recherchez le terme <div class='post-header'>. S'il n'existe qu'une fois, vous avez une version 2 des gadgets. S'il existe 2 fois, c'est une version 1, puisque cette version gère de façon différente l'affichage desktop et mobile des articles. Suivez les instructions suivantes correspondant à votre version.
4.1 Version 1 des gadgets
Ajoutez après la fermeture des deux divisions <div class='post-header'></div> le code ci-dessous.
4.2 Version 2 des gadgets
Recherchez <b:includable id='postBody' var='post'> et après cette balise ajoutez le code ci-dessous.
<!-- Add-on TOC+ --> <b:include name='TableOfContents'/> <b:include name='NavigationButtons'/> <div id='table-of-contents'/> <!-- Add-on TOC+ -->
5. Enregistrement du thème et vérifications.
Enregistrez le thème modifié et affichez un article. Vous devriez obtenir une table des matières (sous réserve que cet article ait un balisage h, c'est-à-dire au moins un titre). Dans tous les cas le bouton de navigation doit apparaître.
En cas d'anomalie, de dysfonctionnement visuel du blog, faites une restauration.
Je ne suis pas en mesure de garantir un support, mais n'hésitez pas me faire un retour de votre expérience en commentaires. Merci !
Commentaires