How To Create Manual SEO Friendly Table of Content? - SubTechz

 In this article, I will show you how to create manual table of content in blogger that is SEO friendly and easy to implement. 

You just need to copy-paste the work and that's enough and whenever you create a new post you just need to alter the code in your post. 

If you don't want to do that then you can check out my article on How to Create Automatic table of content in which you just need to paste the code in your article wherever you want to see table of content.

Benefits of Manual Table of Content

The First benefit is that it makes your article well planned and structured. It gives your article a professional look.

Table of Content helps to boost you blog's SEO by improving the scan ability of the article.

Adding manual table of content can also increase the CTR of your blog as google will display a Jump to Section link which is crawled from the table of content and display the user the most relevant part of your article.

It is purely coded in HTML and CSS and that's why it is very lightweight and loads up fast.

It is highly customizable, responsive and can be shown on any location you choose. 

and other valuable benefits are: 

• Improved user experience: A manual TOC can help readers navigate the content of the blog post more easily. It allows them to quickly locate the sections that interest them and jump directly to them without having to scroll through the entire post.
• Increased engagement: By providing a manual TOC, readers are more likely to stay on the blog post for a longer period of time. They can easily find the information they need and continue reading other sections that are of interest to them.
• Better organization: A manual TOC can help the author of the blog post better organize their content. By breaking up the post into sections and subsections, the author can make the information easier to understand and digest.
• Improved SEO: Including a manual TOC can improve the search engine optimization (SEO) of the blog post. Search engines will be able to better understand the structure of the post, and users will be more likely to find the post in search results.
• Accessibility: A manual TOC can make the content more accessible to users with disabilities. For example, users who are visually impaired can use screen readers to navigate the TOC and jump directly to the sections they need.

Read More: How to Remove Date from Blogger URL? - SubTechz 

How to Add Manual Table of Content?

Follow the following steps to add manual table of content in your blog, I've added screenshot so that it can be helpful to you.

Step1: Sign in to your Blogger Account.

Step2:  Go to Theme Section and then to Edit HTML.

Note: Before editing your HTML, you must backup your template.

 

Step3:  Search for  ]]></b:skin> . Copy the code given below and Paste it just above it and save it.

 /* Subtechz-TOC Starts Here */

.subtechz-toc {
	margin-top:20px;
    border: 2px solid #ddd;
    padding: 25px 20px 30px 20px;
    font-size: 18px;
    overflow: hidden;
    border-radius: 5px;
	margin-bottom:20px;
	background-color:#fcfcfc;
}

.subtechz-toc ul a, .subtechz-toc ol a {
text-decoration:none;
font-weight:bold;
}
.subtechz-toc ul a:hover{
text-decoration: underline;
}

.subtechz-toc h2 {
    margin: 20px 20px;
    font-size: 28px;
}

.subtechz-toc ul {
    margin: 0 0 0 15px;
    list-style: none;
    float: left;
    width: 100%;
	padding:0px 20px 0px 40px;
}

.subtechz-toc ol {
    margin: 0 0 0 15px;
    float: left;
    width: 100%;
	padding:0px 20px 0px 40px;
}

.subtechz-toc ul li, .subtechz-toc ol li {
    line-height: 2;
}

.subtechz-toc ul ul li a {
    padding-left: 1px;
	
}

.subtechz-toc ul ul li:first-child {
	padding-top:10px;
}

.subtechz-toc ul ul li:last-child {
	padding-bottom:10px;
}

@media only screen and (max-width:767px) {
	.subtechz-toc {
    border: 2px solid #ddd;
    padding: 20px 5px 20px 5px;
    font-size: 16px;
    overflow: hidden;
    border-radius: 5px;
	margin-bottom:20px;
	background-color:#fcfcfc;
}

.subtechz-toc ul a {border-bottom:none;}

.subtechz-toc h2 {
    font-size: 22px;
}

.subtechz-toc ul {
    margin: 0 0 0 1px;
    list-style: none;
    float: left;
    width: 100%;
	padding: 0 0 0 10px;
	
}

	
.subtechz-toc ul ul li a {
    padding-left: 5px;
	border-bottom:none;
	
}

.subtechz-toc ul ul li:first-child {
	padding-top:10px;
}

.subtechz-toc ul ul li:last-child {
	padding-bottom:1px;
}
}

/* Subtechz-TOC Ends Here */

Step4: Now open any article in which you want to add Table of Content. Go to HTML View.

Step5: Copy the following code and paste it wherever you want your table of content to appear.

<div class="subtechz-toc" id="toc">
  <h3>Table of Content</h3>
  <ul>
    <li><a href="yourbloglink#heading1">Heading1</a></li>
    <li><a href="yourbloglink#heading2">Heading2</a></li>
    <li><a href="yourbloglink#heading3">Heading3</a></li>
    <li><a href="yourbloglink#heading4">Heading4</a></li>
    <li><a href="yourbloglink#heading5">Heading 5</a>
      <ol>
         <li><a href="yourbloglink#subheading1">Subheading1</a></li>
         <li><a href="yourbloglink#subheading1">Subheading2</a></li>
         <li><a href="yourbloglink#subheading1">Subheading3</a></li>      
      </ol>
    </li>
  </ul>
</div> 

Step6: Now, you need to give id to your heading. For Example: if your first heading is Introduction then by going in HTML view you need to add id="intro" inside your h1/h2 tag. You can replace intro with whatever you want.

Step7: Now, the links which are highlighted in red in code are to links to your specified headings. If your first heading is Introduction and the id given to it is  intro then its hyperlink will be https://yourarticlelink#intro .

Read More: 11 Blogging Tips for Beginners (Blogger) - SubTechz

You just need to assign different id to different headings or subheadings in your article and then you have to replace the red-highlighted links to the links which you've created by following the Step7. 

Conclusion

In this article we read a tutorial on How to create manual table of content in Blogger which is SEO friendly, responsive, lightweight and easy to implement.

Please share this article on your social media account to help us.

Comment down your suggestion or questions, I would love to read them.