How To Create A Table Of Content In HubsPot – SEO & UX

Angelic Sanoy

Angelic Sanoy

Founder | Bookworm Head

[wpseo_breadcrumb]

Why You Should Implement Table Of Content In HubsPot?

Implementing table of content is just not focus on HubsPot platform but in every website you can think of. By integrating table of contents into your blogs can improve user experience which leads to better ranking in SEO. Remember, more click-through rate, high engagement rate and spend time is equal to high changes to be in the first page.

Editing the Blog Post Template In HubsPot

Go to the frontend of your inner blog post > Click the HubsPot icon >  Edit Blog Post Template > Find the Blog Module > Click the Edit Post Template. Now, copy paste the code below.

Step 1: Create an 2 empty div elements with a corresponding IDs. Feel free to add a heading!

<div id=”console”>&nbsp;</div>
<div id=”toc” class=”toc1″>
<h3>Table Of Contents</h3>
</div>

Step 2: Wrap the content post body hubl with a  condition HubL to exclude the editor view mode.  If you check the reference below, I only added the ID element to is_in_editor false statement.

 {% if is_in_editor %}
{{ content.post_body }}
{% else %}
<div id=”contents”> {{ content.post_body }} </div>
{% endif %}

Step 3: Add the Javascript at the bottom after the  </body>

<script>

var c = function() {
return({
log: function(msg) {
consoleDiv = document.getElementById(‘console’);
para = document.createElement(‘p’);
text = document.createTextNode(msg);
para.appendChild(text);
consoleDiv.appendChild(para);
}
});
}();

window.onload = function () {
var toc = “”;
var level = 0;
var maxLevel = 3;

document.getElementById(“contents”).innerHTML =
document.getElementById(“contents”).innerHTML.replace(
/<h([\d])>([^<]+)<\/h([\d])>/gi,
function (str, openLevel, titleText, closeLevel) {
if (openLevel != closeLevel) {
c.log(openLevel)
return str + ‘ – ‘ + openLevel;
}

if (openLevel > level) {
toc += (new Array(openLevel – level + 1)).join(“<ol>”);
} else if (openLevel < level) {
toc += (new Array(level – openLevel + 1)).join(“</ol>”);
}

level = parseInt(openLevel);

var anchor = titleText.replace(/ /g, “_”);
toc += “<li><a href=\”#” + anchor + “\”>” + titleText
+ “</a></li>”;

return “<h” + openLevel + “><a name=\”” + anchor + “\”>”
+ titleText + “</a></h” + closeLevel + “>”;
}
);

if (level) {
toc += (new Array(level + 1)).join(“</ol>”);
}

document.getElementById(“toc”).innerHTML += toc;
};

 

Implementing styles into your table of contents in HubsPot

Step 4: Add the code below into your .css file. Don’t forget to link the style into your HubsPot template.

@media(max-width:500px) {
#toc {
display:none;
}
}

@media(max-width:1350px) {
#toc {
width: 150px;

}
}

@media(max-width:1200px) {
#toc {
width: 152px;
left: -5vw;
background: white;
}}

.about-author-sec p {
font-size: 10px!important;
}

#toc a {
color: #545353;
margin-bottom:1rem;
}

#toc a::hover{
color: #F3291A;
}
#toc {
font-size: 10px;
box-shadow: 3px 5px 30px rgb(10 0 0 / 10%);
padding: 1vw;
width: 240px;
position: fixed;
top:0;
left: -11vw;
background: white;
}

#toc ol li,
#toc ol ol li,
#toc ol ol ol li {
margin-bottom: 10px;
}

#toc ol ol ol li{
margin-left: -6vw;

}

#toc ol li {
margin-left: -3vw;
}

#toc ol ol li {
margin-left: -4vw;
}