Découvrez dans ce tutoriel en français comment intégrer un sommaire à vos articles de blog avec l'attribut ,Table Of Content, gratuit de Finsweet !
Optimiser le SEO de votre blog avec un sommaire !
Ajouter un sommaire à vos articles de blog améliore considérablement l'expérience utilisateur de vos lecteurs. (Et comme vous le savez depuis la lecture de cet article, l'UX compte dans le SEO).
Le sommaire permet à vos lecteurs :
- D'avoir une vue générale de votre contenu
- D'accéder rapidement à une section en particulier grâce à des liens "anchor"
Comment intégrer un sommaire automatique grâce à l'attribut Finsweet ?
En suivant la doc, il est facile d'intégrer une table des matières à votre blog Webflow. Avec la solution Finsweet, le sommaire sera généré automatiquement sur la base de vos headings (h2, h3, h4, etc...)
⚠️ La balise heading H1 ne sera jamais prise en compte dans votre sommaire (ToC)
Découvrez les étapes à suivre !
1. Allez sur la page Fs attribut Table of Contents
2. Copiez puis collez le code Javascript dans le <!-- fs-richtext-ignore --><head> tag de votre page
3. Ajoutez un attribut "contents" à l'élément <!-- fs-richtext-ignore --><Rich Text> de votre article de blog
4. Ajoutez les attributs liens sur les liens "template" de votre table des matières (il est nécessaire de créer et designer votre sommaire)
5. Publiez votre site 🎉
Optimisez encore plus votre sommaire !
Vous pouvez allez encore plus loin dans la personnalisation de votre sommaire sur Webflow avec les différentes Options des attributs
- OFFSET TOP : pour décaler l'arrivé du lien, très utile lorsque votre barre de navigation vient mordre sur votre titre lors du clique
- OFFSET BOTTOM : même avantages que le TOP, à l'inverse
- HIDE URL HASH : vous permet de désactiver la génération automatique du #ID dans l'url
- ANIMATIONS : vous pouvez aussi ajouter des animations natives Webflow sur vos liens (état actuel, hide/show, etc...)
.jpg)
