Badge Webflow Award Winner 2023

How to create a summary [Webflow Blog Tutorial].

Discover in this tutorial how to integrate a summary to your blog posts with the ,Table Of Content attribute, free from Finsweet!

Published on 
28/8/2022
-
Amended on 
27/3/2023
-
5 min
Preview of a summary (ToC) with the Finsweet Webflow Attributes logo

Optimize your blog's SEO with a summary!

Adding a summary to your blog posts dramatically improves the user experience for your readers. (And as you know from reading this article, UX matters in SEO).

The summary allows your readers to:

  • To have an overview of your content
  • Quick access to a particular section through anchor links

How to integrate an automatic summary thanks to the Finsweet attribute?

Following the doc, it is easy to integrate a table of contents to your Webflow blog. With the Finsweet solution, the table of contents will be generated automatically on the basis of your headings (h2, h3, h4, etc...)

⚠️ H1 heading tag will never be taken into account in your summary (ToC)

Discover the steps to follow!

1. Go to the Fs attribute Table of Contents page

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

Adding a contents attribute to a Rich Text Block on Webflow

4. Add the links attributes on the "template" links of your table of contents (it is necessary to create and design your summary)

Adding a Link attribute to a summary link on Webflow
Note: you can add the attribute on the link blok or the text block in the link block. Both work.

5. Publish your site 🎉

Optimize your summary even more!

You can go even further in customizing your summary on Webflow with the different Attribute Options

  • OFFSET TOP : to shift the arrival of the link, very useful when your navigation bar comes to bite on your title when clicking
  • OFFSET BOTTOM : same advantages as TOP, but in reverse
  • HIDE URL HASH : allows you to disable the automatic generation of the #ID in the url
  • ANIMATIONS: you can also add native Webflow animations on your links (current status, hide/show, etc...)
Additional options for the Table Of Content attribute

Ready to take your website to the next level?

Improve your online visibility thanks to Digidop's experience, excellence and reactivity!

Stay in touch with Digidop news!