This post is a collection of the best, most helpful and creative Blog Post Table of Contents examples I have found. As a 10+ year web developer, content creator, UI/UX fan, and avid internet reader I know how helpful a Table of Contents at the beginning of a post can be.
As I find new awesome examples, I will add them here. If you know of any others add them to the comments and I will get them worked into the post.
Table of Contents
What to Look for in a Good Table of Contents
A well designed and informative Table of Contents at the top of a post has several criteria.
- Clearly Visible TOC heading. could be: “Table of Contents” or “Contents”
- Well Defined Bullet Points or Numbering System
- Scannable Titles
- Consistent Titles
- Visible Hierarchy for Items and Sub-items
Clearly Visible TOC Heading
Let people know exactly what they are looking at. In 95% of all examples below the TOC section is headed with the “Contents” of “Table of Contents.”
Bullet Points & Numbering System
You want the table of contents to be easily scanned read and understood. Having well defined bullet points or a number system really helps this.
I prefer numbers because it helps the reader understand where they are in the article. Additionally, if you have sub-items being able to illustrate those with 2.1, 2.2, 2.3, etc the sub-items are even easier to see.
Scannable Titles
You want the short and sweet titles for each section of the post. If the titles in the table of contents are long and hard to understand people will just skip over the table of contents or even worse just leave your post altogether.
Try to keep the number of words in each title between 2 to 5 words. I know all posts are different but the shorter the title the easier it becomes to scan and take in the entire article.
Consistent Titles
You want to keep the titles in the same “style”. This can be the same length, verb tense, or tone. By keeping the title similar, the reader can focus on the content and not have to think about what each title is.
Visible Hierarchy for Items and Sub-items
If your post is detailed enough to have items and sub-items then have a clear distinction between the different levels. This can be done with indentions, font size, or a clear numbering system (1.1, 1.2, 1.3,).
It is important for readers to understand which are the big topics and the topics that are under that big topic. Have the importance levels clearly visible the visitor can easily take in the entire post and determine what they want to read first.
Table of Contents Examples
MacRumors: Mac Pro Rumors
Website and TOC Code Details
- URL: https://www.macrumors.com/roundup/mac-pro/
- CMS: Custom CMS
- TOC Generator: Custom Code.
I took a look at the HTML code and no comments about it being auto-generated. My guess with the MacRumors being custom coded, the TOC is created by hand or some internal tool they have.
Additional Thoughts: Mac Rumors, seems to put Table of Contents on their main pages while the smaller
DCRainmaker: Garmin Fenix 6 Review
DC Rainmaker is a fantastic site for all thing tech, endurance sports, cycling, running and just cool things in general. At this site they have implemented a table of contents for many years.
The table of content appears in a fixed position on the screen and remains visible as the visitor scrolls down the page. I would imagine the usability is pretty easy and the engagement it high.
Anyway this is another great example of a table of content on a blog post.
It is a little difficult to see from the image but you will notice that the TOC on the left area of the page remains in a fixed position so that it is always visible to the visitor.
Website & TOC Code Details
- URL: https://www.dcrainmaker.com/2019/08/garmin-fenix6-pro-solar-series-review.html
- CMS: WordPress
- Table of Contents Generator: Not exactly sure what he is using when I look at the HTML there is a div id of post-sections and a class of floating. It could a widget position that floats and then the table of contents fits into that widget position.
Thoughts: I really like how this is done the table of contents remains on the screen as the visitor scrolls down the page. A more involved version of this would be to display the table of contents in the content area but if the browser area is wider than the width of the content area then the table of contents floats on the left side of the content just out of the content area.
MyBloggerTricks: Multi-Level TOC List
My blogger tricks is an excellent example of a multi-level table of contents. This post has lots of content and sub content.
The use of colors and font sizes really helps you get a feel for how the document is organized.
Website & TOC code details
- URL: https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html
- CMS: Blogger
- TOC Generator: They are using the javascript plugin that they created.
Thoughts: I really like the layout of the Table of Contents. The entire block appears to be centered horizontally in the column. The block has a light grey background allowing it to display as a unit giving it some definition. The block also appears to be 80% to 90% of the column width helping it to stand out even further.
Design Notes: The width is 80% and the margin is set to auto
MacWorld: Catalina OSX Info
MacWorld is a well established new resource for all things Mac.
I really like this table of contents, clean, none of the ordered elements that you find on some of the other examples in this list
Website & TOC code details
- URL: https://www.macworld.co.uk/news/mac-software/macos-catalina-3690189/
- CMS: Custom Coded Website
- TOC Generator: Appears to be custom created code
Thoughts: It is a cleaner look and in two columns. The cleaner look is because none of the ordered elements used in the other examples are used here. Just clean text for the subheadings.
Additionally, the table of contents is the full width of the content area and given a solid blue background so that it stands out a block and as a User Interface (UI) element.
Mangools: Google Rich Snippets Post
Mangools is an SEO Tool company so you think they are going to know a thing or two about Usability (UI/UX) and SEO. This rich snippet tool post is extremely detailed and lengthy.
The Table of Contents has been added outside the content area on the left side of the post. It is always visible on the visitors desktop-sized screen and helps them understand where they are in the post.
Website & TOC code details
- URL: https://mangools.com/blog/google-rich-snippets-guide/
- CMS: WordPress
- TOC Code Generator: Appears to be custom created code
Thoughts: This is a fantastic example of a vertical table of contents displaying on the left side of the screen. This layout works well for pages that have quite a bit of content and are more likely to be viewed on a full desktop.
It is similar to the DC Rainmaker example except that the table of contents is much larger and Mangools gives it more priority on the page going from almost top to bottom of the browser.
Rank Math: Power Words Post
RankMath is a very popular WordPress SEO plugin. Since their product helps site owners rank their pages higher, they will be sure to implement those items on their site.
Rankmath’ Table of contents is very clean, well designed and clear as to what it is. They use numbers and sub-items to organize their table of contents.
Website & TOC code details
- URL: https://rankmath.com/blog/power-words/
- CMS: WordPress
- TOC Code Generator: Not Sure
Thoughts: I really like this table of contents, it is well designed, very stylish, easy to understand and very hard to miss. By making it the width of the blog post, it is impossible to miss and really encourages the reader to stop and review its contents.
In addition to the table of contents, they carry the styling through to the different post content sections with a styled number for each item. This styling matches the Feature image and the TOC Section. Clearly, Rank Math has put some time into their site and it looks great.
Optimize Smart: Google Event Tracking
Optimize Smart is an analytics-focused site based in Scotland. The site focuses on improving sites and fixing website tracking issues.
I find it interesting so many of the sites that implement Table of Contents well are all focused on SEO, usability, tech, and analytics.
Website & TOC code details
- URL: https://www.optimizesmart.com/event-tracking-in-google-tag-manager-v2-complete-guide/
- CMS: WordPress
- TOC Code Generator: Not Sure
Thoughts: This is a well-implemented Table of Contents. What is interesting is that it is right at the top of the post with not introduction text above it.
It is post content width and divided into two columns, uses numbers instead of bullet points. Nothing overly fancy but a clean easy to understand Table of Contents.
w3C Working Group: Providing a Table of Contents
For this example, we have one from the World Wide Web governing body and it is a two for one. It is a page about adding a Table of Contents that includes a table of contents.
The page is just about all text and they have the TOC off to the right side.
Website & TOC code details
- URL: https://www.w3.org/TR/WCAG20-TECHS/G64.html
- CMS: Custom
- TOC Code Generator: Custom
Thoughts: I like how this table of contents is moved over to the right side and kept at the top of the page. This works because the site does not have a righthand sidebar. If the site had a right sidebar then this layout would not work.
It should also be noted that this table of contents remains fixed on the page and goes off the screen when you scroll down the page. Many times when the table of content remains fixed on the screen it works because the TOC is outside the content area of the site.
How We Selected Our Examples
We searched for and reviewed hundreds of posts, articles and online resources looking for the best Table of Contents Examples.
While searching we looked for:
- Good Web Usability (is it easy to read / easy to understand)
- Visually Appealing (without the design getting in the way)
- Post subject matter (wanted a wide variety of topics)
- Solid UI/UX Design Principles
- SEO Standards Implemented
- Good HTML & CSS coding.
All of these factors we considered in selecting our final list. If available we included website code, the content management system and if the name of the plugin, if it is a CMS plugin.
As an added bonus, if you are using WordPress check out our post on the Best WordPress Table of Content Plugins.
Conclusion
There are lots of great ways to set up and implement your blog post table of contents. We hope this post has given you a few ideas.
We love comments, suggestions and discussion. So if you have any thoughts please post them below.
Thanks! — Steven
Steven Johnson, a WP Hosting Reviews senior editor, works from Atlanta and covers all things related to WordPress and Hosting.
He graduated from Georgia Tech in Chemical Engineering, has managed hosting companies and now builds WordPress and Joomla Websites for small to medium companies full time.
