Comment créer un sommaire [Webflow Blog Tutoriel]

Tutoriel
August 28, 2022
3 min
Aperçu d'un sommaire (ToC) avec le logo Attributes de Finsweet Webflow
Résumez cet article avec une IA
Points clés de l'article

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
Florian Bodelot
Florian Bodelot
Co-fondateur

Articles qui devraient vous intéresser

Capture d'écran de la page d'accueil de la recherche Google avec la barre de recherche et le logo Google.
Documentation
SEO

3 outils pour suivre vos positions SEO dans la SERP

3 outils pour suivre vos positions SEO dans la SERP
ChatGPT 5.0 OpenAI
News
IA

ChatGPT-5 vs ChatGPT-4 vs Claude Opus 4.1 : Le comparatif IA ultime 2025

ChatGPT-5 vs ChatGPT-4 vs Claude Opus 4.1 : Le comparatif IA ultime 2025
Capture d'écran montrant deux versions de la page d'accueil de Ramify. La version de fond représente un homme debout dans un bureau avec le texte « Vivez l'expérience banque privée, autrement ». La version au premier plan affiche une mise en page plus épurée avec le message « Votre patrimoine, notre expertise ».
Documentation

Comment Digidop a aidé Ramify à augmenter son taux de conversion grâce à une stratégie d’A/B testing avec Optibase ?

Comment Digidop a aidé Ramify à augmenter son taux de conversion grâce à une stratégie d’A/B testing avec Optibase ?

Transformez votre site web en un moteur de croissance.

Nous contacter