Badge Webflow Award Winner 2023

Comment créer un sommaire [Webflow Blog Tutoriel]

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 !

Publié le 
28/8/2022
Modifié le 
27/3/2023
5 min
Aperçu d'un sommaire (ToC) avec le logo Attributes de Finsweet Webflow

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

<!-- [Attributes by Finsweet] Table of Contents -->
<script defer src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-toc@1/toc.js"></script>

3. Ajoutez un attribut "contents" à l'élément <!-- fs-richtext-ignore --><Rich Text> de votre article de blog

Ajout 'un attribut contents sur un Rich Text Block sur Webflow

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)

Ajout d'un attribut Link sur un lien d'un sommaire sur Webflow
Note : vous pouvez ajouter l'attribut sur le link blok ou bien le text block dans le link block. Les deux fonctionnent.

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...)
Options supplémentaires pour l'attribut Table Of Content

Prêt(e) à avoir un site qui convertit ?

Améliorer votre visibilité en ligne grâce à l’experience, l’excellence et la réactivité de Digidop !

Restez informés de l’actu Digidop !