Discover in this tutorial how to integrate a summary to your blog posts with the ,Table Of Content attribute, free from Finsweet!
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
3. Ajoutez un attribut "contents" à l'élément <!-- fs-richtext-ignore --><Rich Text> de votre article de blog
4. Add the links attributes on the "template" links of your table of contents (it is necessary to create and design your summary)
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...)
.jpg)
