Why this matters
Long-form posts often rank because they cover a topic deeply, but they are harder to scan. A table of contents helps users jump to the exact section they need.
Setup
Use the headings returned by post.render() and map them into anchor links.
const { Content, headings } = await post.render();Implementation notes
Keep the TOC secondary on mobile and sticky on larger screens. The next related layer is covered in Astro Related Posts Tutorial.
Final checklist
- Heading anchors match TOC links
- TOC hides cleanly when no headings exist
- Mobile layout stays readable