Table of Contents for Google Docs, MS Word, and Blog Posts

Hello, readers. Without further delay, This article gives you information on how to create or insert a table of contents automatically in Google Docs, Microsoft Word, Blog posts on Google Blogger, and blog posts on WordPress.

Table of Contents  [ ]

What is Table of Contents?

In this paragraph, I'm going to tell you in brief about the table of contents. So, The table of contents is nothing other than a list of all the headings available on the Document or Blog Posts. Furthermore, It is not only the list of headings rather it works as a navigator. In other words, Each sentence of the table of contents contains a link to the particular heading. Hence, Whenever a reader clicks on that link, The reader will be able to directly jump to the section he wants to read without scrolling or manually search by scrolling.

Table of contents in Documents like in Google Docs and MS Word

As earlier, I've mentioned that the table of contents used a navigator of the document. But, For Google Docs and Microsoft Word, The table of contents will remain the same. And, Notably, Microsoft Word provides a variety of styles compared to Google Docs for a table of contents.

Both Google Docs and Microsoft Word (MS Word), provides an easy way to insert the table of contents by one click. For this purpose, All you need is a document with headings ready. In addition to that, The table of contents is going to add or take place in the front-most page after the cover page.

Table of contents in blog posts like in Google Blogger and WordPress

In this paragraph, I am going to tell you one more importance of a table of contents apart from a content-section navigator. Furthermore, As I've mentioned in the previous section that with the use of page contents table you can easily navigate or jump to the other section of the document. In addition to that, For Google Blogger and WordPress, It is used as an aid in Search Engine Optimisation. In other words, Google Bot or any other bot can easily navigate to the different sections of your blog posts with the help of the contents' table like you can.

For example, If you've written an article of more than 5000 words than I'm sure that It may contain too many heading, sub-headings, and minor-headings. Given that, The people tend to search using different queries on Google or other search engines. And, As I've mentioned that because of the long article, It may contain the answers to many queries in the different sections of your article. So, without the table of contents, Google or any other bot may find it difficult to search for content for the query. Consequently, you may lose your position on SERP and more importantly one important visitor.

According to my experience, one of my article on 'An Essential Guide to the Reverse Image Search' contains more than 3500 words. Because of such a high number of words, It is able to solve many queries using the content written under the various section of the article. Before adding the table of contents, The article was getting too few impressions. Because Google bot was not able to find the content that matches the query to show in the snippets or in the search results. But, after adding the table of contents, The impressions were almost tripled.

Table of Contents in Google Docs

In this section, I am going to discuss TOC (Table of Contents) for Google Docs. As at the beginning of this article, I've mentioned that TOC for Google Docs is very easy. So, follow the steps to create a table of contents for Google Docs automatically.

Step-1: Open Google Docs

In this step, Open Google Docs. After, find the document and open it in which you want to add or insert the table of contents.

Step-2: Apply Headings, Sub-headings, Minor-headings to the document.

In this step, You have to apply the headings to each section you want. For that, Select styles for text and choose the appropriate heading. Furthermore, Make sure that your heading structure follows the linearity like H1-H2-H3-H4-H5-H6. In other words, The lower heading should immediately follow the upper one. For example, H3 will come only after H2, not after H1 directly. See the following picture to locate the style for texts of the document.

Click on Normal text then select appropriate headings

See the below picture where I've applied heading to my document. Furthermore, You will also find that the heading structure is following linearity.

See the Heading Structure of the document. H1-H2-H2-H3

Step-3: Insert the table of contents.

In this step, You are going to insert the table of contents. For that, Click on the Insert from the menu bar. Also, see the below picture to locate it and, click on the Table of Contents to insert TOC.

Click on Insert then Table of Contents to create table of contents in Google Docs

Step-4: Select the table style.

This is the last step to add a table of contents in the document. Moreover, In this step, You have to select the style of the table. And, Google Docs provides you 2 styles, One is 'with page number' and another is 'With blue links'. So, You have to choose any one out of the two. In addition to that, I advise you to select the 'with page number' style for Google Docs as in the future It may help you in the print-out version. So, the final results for Google Docs will look like the following.

Table of Contents added to Google Docs document

Also, one more thing I forgot to mention is that both styles allow you to navigate. Furthermore, the second one will show blue links instead of page numbers like links in the web pages. Moreover, Don't forget to update the TOC whenever you make modifications in the document headings. Because Google Docs will not automatically update the TOC for you. In addition to that, It is the best practice to update the TOC before closing the document you're working on.

So that's all about how to create table of contents for Google Docs.

Create table of content in Microsoft Word

Microsoft Word is a feature-rich software to create documents. As per my Guess, Everyone on this planet might familiar with it. Furthermore, Creating a table of contents in MS Word is as easy as to insert the same in Google Docs. Hence, Follow the steps given below to do so.

Step-1: Open MS Word

In this step, Open File Explorer and navigate to the document in which you want to add TOC. After, select the document and open it in MS Word using Right-click.

Step-2: Apply Headings, Sub-headings, Minor-headings to the document.

In this step, You have to apply the headings to each section you want. For that, Select the complete sentence that you want to choose for heading and then choose the appropriate heading from the styles section as shown in the below picture. Furthermore, Make sure that your heading structure follows the linearity like H1-H2-H3-H4-H5-H6. In other words, The lower heading should immediately follow the upper one. For example, H3 will come only after H2, not after H1 directly as same as I've mentioned in the case of Google Docs.

Select sentences from document and apply appropriate headings to it from Styles section to create table of content in MS word

See the below picture where I’ve applied heading to my document. Remember that headings are only contents of the index table. Hence, Any mistake in heading selection may not create a list of contents in MS Word. Furthermore, You will also find that the heading structure is following linearity.

A linear heading structure is followed

Step-3: Insert the table of contents.

In this step, You're going to add the automatic table of contents to the document. To insert the table of contents in MS Word, Select 'REFERENCES' from the menu bar and then click on the Table of Contents from the Table of Contents section of the 'REFERENCES' menu and then select the style of table you want. Moreover, See the following image to locate it.

Select References->Table of Contents to Insert the table of contents.
Table of contents inserted in the Word document.

As earlier I've mentioned that It is the same to add the table of contents in Google Docs and MS Word but the only difference is MS Word provides more features compared to Google Docs and this is the time to come across it. Hence, Read the following to know that you can do with TOC in MS Word that you cannot do in Google Docs.

Features for TOC in MS Word

  • Customization of a table of contents
  • Various table format from office.com
  • Tab leader modification
  • Levels of the headings to show
  • Format of the TOC

Automatic table of contents for Google Blogger

Unfortunately, There's no method to add a table of contents to the blog posts of documents just by one click as it was in the case of Google Docs, MS Wors, and will be in the case of blog posts on the WordPress platform. Because Google Blogger is a simple tool to write blog posts. Also, You don't have to pay for it. Also, It is free for lifetime blogging. Moreover, Google Blogger doesn't support any kind of plugin as WordPress supports.

See the below image. The below image shows that my code will work for Heading tag H2 to H6 considering the linear flow of heading tags. And, You are permitted to use any number of heading tags.

H2 to H6

Hence, First, You've to set up a script to add TOC in the blog posts. So, follows the steps to proceed further.

Step-1: Open Google Blogger

Click here to Open Google Blogger. Furthermore, If you're not sure how to start a blog using Google Blogger then you can read my article on How to start a blog for free using Google Blogger.

Step-2: Open HTML code of the theme

To edit HTML code of the theme, Select Theme->Edit HTML. Furthermore, See the following image to locate it.

Select Theme from the left side panel and then Click on Edit HTML button to edit the theme

Step-3: Add the following code inside the head tag

Click here to download the CORE script that will add Table of Contents in your blog posts. Next, find the <head> tag inside the HTML code of theme. For that, Press CTRL+F then search for '<head>' and press enter.

More importantly, You have to add this code below the code which is used to load the jQuery library. Furthermore, See the below image to locate this.

Code for TOC below the jQuery library code

Next, search for the code <data:post.body/>. And, replace that code with the following code.

<div id='post-toc'><data:post.body/></div>

Also, see the below image. Because it may help you to understand in an easy way. Also, remember that there might be more than one occurrence of the code <data:post.body/>. Hence You have to replace this code with the code given above each time you found in HTML theme.

Replace the previous code with new one

Step-4: Paste the following code to every blog posts

<div> <!-- Code written by Kunjesh Virani. Follow on Twitter @KunjeshVirani and on Facebook @KunjeshVirani1 --> <div style="width:70%;background-color:rgb(240, 240, 250);padding:10px;"> <span>Page Contents&nbsp;&nbsp;[ <button style="border:none;background-color:rgb(240, 240, 250);"><span id="TOC_Switch" style="display:block;color:blue;">Hide</span></button> ]</span> <div id="TOCBYKUNJESH"></div> </div> </div>

Remember that Table of Contents contains every heading of the post content. Hence, You must have to paste the above code before any heading appears in the post content. Also, make sure that headings are in the linear structure.

Step-5: Paste the below code to the very end of every blog posts

<script type="text/javascript">TOC();</script>

Remember that the above code must be present at the very end of your post content. Here, Keep in mind that, I am not telling to add this code to the footer. Rather this code must be the last sentence of your blog post. Hence, Switch to the HTML version of the blog post and paste the above code to the very end of the blog post. This code is very important to automatically add table of contents for in your blog posts for Google Blogger.

See the demo below. It will make you clear what to do with code inside the HTML.

HTML version of the Blog post and TOC code is pasted

And, The result of the above code will look like following. Hence, See the below image to get it.

Preview of the Table of contents

As you can see in the above image, The table of contents is added to the topmost part of the article. In other words, It has appeared before any headings of the article. Moreover, If you want to make any kind of design modifications then you can do it. See the following list to make it clear what you can change or modify in the TOC by yourself using inline style code.

  • Background Color
  • Fonts (Including all font properties)
  • Link decoration

Remember that all the modifications apart from the listed above may result in a malfunction of the script.

Also, Do remember that Step-3 is One-Time only. You have to paste the code mentioned in the Step-3 is only one time. But, You have to manually add the code mentioned in Step-4 and Step-5 in all the blog posts by considering the importance of the instructions given.

So, That's all to add a table of contents in Google Blogger.

Automatic table of contents for WordPress

Here, We come to the easiest part of our article. Because to add a table of contents in WordPress is very easy. All you need to do is search for the plugin that can add TOC in your blog post run on WordPress platform. See the following image to locate it.

Various Plugins to Add Table of Contents in WordPress blog posts

All you need to do is pick one by one and test it. WordPress allows you to add a Table of Contents by one click. So, when the plugin installation completes, activate it. Then you open any of your posts, click on the '+' icon, and select the Table of Content block whenever you want to add it. But, do practice to add it to the topmost part of your article.

So, That's all about how to add Table of Contents in Google Docs, Microsoft Word, Google Blogger, and WordPress.

Last, You'll find the following useful.