Ajouter un sommaire dans Webflow
Vidéo
| Attribut Finsweet | Élément Webflow | Valeur |
|---|---|---|
| fs-toc-element | Rich Text | contents |
| fs-toc-element | Lien du sommaire | link |
| fs-toc-offset | Wrapper sommaire | Hauteur de votre nav (ex: 80) |
Pourquoi ajouter un sommaire à ses article de blog ?
L'agence Webflow Gemeos vous partage pourquoi il est important d'ajouter un sommaire à un article de blog :
- Faciliter la navigation : le sommaire permet aux lecteurs de trouver rapidement les sections qui les intéressent sans avoir à lire tout l'article. Cela peut améliorer l'expérience de lecture et inciter les lecteurs à rester plus longtemps sur votre blog.
- Améliorer la lisibilité : un sommaire bien structuré peut aider à rendre votre article plus clair et plus facile à suivre. Cela peut être particulièrement important si votre article est long ou complexe.
- Favoriser le référencement : un sommaire peut aider les moteurs de recherche à comprendre la structure de votre article et à mieux le classer dans les résultats de recherche. Cela peut potentiellement augmenter le trafic vers votre blog.
- Montrer que vous avez pensé à votre lecteur : en ajoutant un sommaire, vous montrez que vous avez pris en compte les besoins de vos lecteurs et que vous voulez leur offrir une expérience de lecture agréable et efficace dans le sens du SXO.
En résumé, ajouter un sommaire à votre article de blog peut améliorer la navigation, la lisibilité, le référencement et montrer votre engagement envers vos lecteurs.
Retrouvez également les 9 étapes pour optimiser votre site Webflow pour le SEO
1. Ajouter ce script dans la le <head> de votre page
< script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-toc@1/toc.js">2. Ajoutez un attribut "contents" à l'élément <Rich Text> de votre article de blog
3. Ajoutez des attributs "link" aux liens de votre sommaire
4. Publiez votre site et testez le résultat
Bonus 1 : Donnez du style à l'état actif de votre sommaire
L'état actuel des liens de table des matières générés s'intègre avec l'état actuel natif de Webflow.
Pour modifier la classe "Current state" dans Webflow Designer :
- Voir la classe verte "Current" apparaître dans le panneau Styles (ajouter le lien de la page actuel dans les paramètres de votre lien)
- Appliquez les styles actuel/actif pour le lien. Ces styles seront utilisés lorsqu'un lien est actif lors du défilement de la table des matières.
Bonus 2 : Ajoutez un offset
Lorsqu'un utilisateur clique sur un lien de table des matières, la page est ancrée et défile jusqu'à cette section du contenu. Cet attribut ajoute un décalage en haut du contenu de l'en-tête. Notamment pratique lorsque votre Heading passe derrière votre barre de navigation.
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
