For anyone interested, I've created this code that takes all h2s in a blog post and then inserts an table of contents at the beginning of the blog post as an ordered list with links to the different chapters/h2s.

Just add this code to the "Header Code" in your site's "Integrations" tab:

<script>

document.addEventListener("DOMContentLoaded", function () {

const h2s = document.getElementsByTagName("h2");

console.log(h2s);

const postContent = document.getElementsByClassName("post__content");

if (!postContent || postContent.length != 1) {

console.log("Skip TOC generation.");

return;

}

const ol = document.createElement("ol");

for (let i = 0; i < h2s.length; i++) {

const h2 = h2s[i];

const chapterId = "chapter-" + (i + 1);

h2.setAttribute("id", chapterId);

const a = document.createElement("a");

a.appendChild(document.createTextNode(h2.innerHTML))

a.setAttribute("href", "#" + chapterId);

const li = document.createElement("li");

li.appendChild(a);

ol.appendChild(li);

}

postContent[0].insertBefore(ol, postContent[0].firstChild);

});

</script>

Just made a quick example of what it could look like

You can automate creation by detecting H2 and H3 titles ;)

The thing is the content that rank higher on Google right now are the very loooong content (5K-10K words). It's painful to read these content with a table of content

Here is a nice example of what you could automate on blog post: a table of content on the side: https://blog.lemlist.com/linkedin-outreach-strategy/

I guess there is way to automate that with H2 or H3 tags :)