Optimize Your Blog's SEO with a Table of Contents!
Adding a table of contents to your blog posts significantly enhances the user experience for your readers. (And as you've learned from reading this article, UX matters in SEO).
The table of contents allows your readers to:
- Get an overview of your content
- Quickly access a specific section through "anchor" links
How to integrate an automatic table of contents using the Finsweet attribute?
By following the documentation, it's easy to add a table of contents to your Webflow blog. With the Finsweet solution, the table of contents will be generated automatically based on your headings (h2, h3, h4, etc.).
⚠️ The H1 heading tag will never be included in your table of contents (ToC).
Discover the steps to follow!
1. Go to the Fs attributes Table of Contents page
2. Copy and paste the JavaScript code into the <!-- fs-richtext-ignore --><head> tag of your page
3. Add a "contents" attribute to the <!-- fs-richtext-ignore --><Rich Text> element of your blog post
4. Add link attributes to the "template" links in your table of contents (you will need to create and design your table of contents)
5. Publish your site 🎉
Further Optimize Your Table of Contents!
You can take your table of contents customization even further on Webflow with the various attribute options available
- OFFSET TOP: to adjust the arrival of the link, very useful when your navigation bar overlaps your title upon clicking
- OFFSET BOTTOM: same benefits 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 to your links (current state, hide/show, etc.)
