Add a Table of Contents to Your Squarespace Blog Post

table of contents blog

TL;DR

For those of you who don’t know, that’s internet speak for Too Long; Didn’t Read.

And for most of us, this is true. We don’t read a whole page of information, we scan it to find the parts that are important to us.

So, how can we make our blogs easier for our visitors to scan, more organized and maybe improve our SEO? By adding a table of contents to our blog posts.

Squarespace doesn’t have a built in table of contents feature, but you can add the feature manually or use a plugin to help you create one.

Read on below (or scan to the area) to see the steps!

Table of Contents

    Benefits of Using a Table of Contents

    You might be thinking to yourself, “Why add this extra step of a TOC if people are just going to scan my blog anyways?” Well, using a Table of Contents is good for both you and your readers.

    A Table of Contents is Improves User Experience

    Visitors don’t have to scroll through your blog post trying to find the information that they want. They can see the info right away in and jump to it. This improves their experience and can keep visitors on your site.

    It Makes Your Blog Easier to Read

    A table of contents breaks your content into smaller easier to read sections. You’ll use headers to organize and highlight your information.

    A Table of Contents Helps with SEO

    Visitors decide to whether or not stay on your site in a matter of seconds. They often leave because they can’t find the information they want. So a table of contents makes sure they know right away that you have that info, so they don’t bounce from your site.

    Your bounce rate and your user experience are both things that Google takes into account in your search rankings.


    *Before adding your Table of Contents make sure your blog post is organized into sections. Each section should have a heading. We’ll use this heading to create our table of content links (for both methods).

     


    How to Create a Table of Contents Using Jump Links (Manual Method)

    To create a table of contents manually in Squarespace we’ll replace each heading with a code block. Then we’ll create links to the code block.

    Add Your Anchor Point

    1. Hover over your page and click on an insertion point (+) about just above your heading

    2. Choose the Code Block and paste in the following

      <h2 id="anchor-id"> My Heading Text </h2>

    3. Change anchor-id to whatever you want to call your anchor

    4. Replace My Heading Text with your heading text

    5. Click out of the code block

    6. Delete the other heading (in your text area) and SAVE

    7. Repeat for each section

    anchor point using heading 2
     

    *Use hyphens to separate words in your anchor ID. No spaces.

    *It’s important to use different anchor IDs for each anchor point or the links won’t know where to go.

    Related Post: How to Create Anchor Links in Squarespace

     

    Create Table of Contents

    1. Click on an insert point (+)

    2. Choose Text

    3. Write a title (ex. Table of Contents) then add a line for each of your headings

    4. Highlight one of your heading and click on the link icon

    5. Under URL add a hashtag # and then your anchor ID (ex. #anchor-id)

    6. SAVE

    7. Repeat steps 4-6 for each heading

    There are quite a few steps to creating the table manually, but it is pretty straightforward once you get started. I do find it a little time consuming though, so it’s probably a better option for someone who only wants an occasional table of contents for really long or complex blogs.

    I personally prefer to use a plugin.


    Create an Automatic Table of Contents with a Squarespace Plugin

    There are a few (I’ve seen at least 3) Squarespace table of contents plugins available right now. Some are fully automatic. You only need to set them up once and your TOC automatically goes in every post. All of the plugins use the headings from your blog to create the links.

    I use the table of contents plugin from Adlytic Marketing. It’s only partially automatic. You have to add a code block into each blog posts to show the table of contents.

    I like that I get to choose which posts have the table of contents. I don’t feel like it’s necessary for every single blog post. And, it’s just a simple copy and paste when I do want it. You could set up a blog template to make that easier too.

    I’m also able to choose which headings go into each table of contents. For some posts I choose to show only heading 2. For others I like to include the subheadings.

    If you don’t need those options, the fully automatic plugins would be the easiest to use.


    I hope you’ve been able to scan this article and find the information you needed! Can’t wait to read (or scan) your posts.

    Marni Cleiman

    Marni is a Canadian web designer based in Burlington, Ontario (Greater Toronto Area). She specializes in creating Squarespace websites for serviced based small businesses & creative entrepreneurs. She works one on one with her clients, creating websites that are not only strategic, beautiful and professional, but also easy to use and maintain.

    Previous
    Previous

    Anatomy of a Web Page: Website Terms You Need to Know

    Next
    Next

    How to Link to Blog Categories in Squarespace