How to Create a Table of Contents in a Squarespace Blog Post
• This article contains affiliate links •
If you’re writing a long blog post, or one with many sections, it can be handy to offer your readers a table of contents.
While this isn’t exactly hard to do in Squarespace, it does take a few more steps than you might expect.
The basic approach is, you go inside the blog post and give specific parts of it “names”. Then, you can create a table of contents that points to each of those names. More often than not, your named locations will be sub-headings.
Save 10% off your first subscription of a Squarespace website by using the code PAULINE10
Watch a video here, or scroll down for written instructions
Prefer to read about making a Table of Contents in Squarespace? Here are my recommended steps:
Compose your blog post
1. Write your main blog post
2. Create some section headings. Typically, you’ll change the paragraph style for these, to something like Heading 3 or Heading 4, but you don’t have to (this method will work fine too with simple paragraph text).
3. You can also write the text for your table of contents, but we’ll start the “clever part” back in the main body of your blog post.
4. Go to each location (heading) that needs to appear in your table of contents.
“Name” your subheadings
5. Add a code block to that place in your blog post. In the Squarespace blog editor, that means you’ll hover until you get the + icon, then choose Code.
Click into your code block to edit it. Usually, it starts off looking like this:
<p>Hello, World!</p>Change the tags that say p to match your desired heading styles. For example:
For heading 2, your tags need to be:
<h2>Hello, World!</h2>For heading 3, your tags need to be:
<h3>Hello, World!</h3>And for heading 4, your tags are:
<h4>Hello, World!</h4>6. Still inside that code block, change Hello World so that it’s exactly what you want your sub-heading to say. In the video, I worked on “summer” but the screenshots you’re seeing here are for the “autumn” header, that is 10 reasons to love autumn. So at this point, my code block looks like this:
<h3>10 reasons to love autumn</h3>7. Your final task inside this code block is to “name” it. Here’s the syntax for that:
<h3 id="autumn">10 reasons to love autumn</h3>Note that there is a space before id and the name goes in "straight" (not curly) double quotes.
To make life easy, I suggest you stick to single words; steer clear of spaces and special characters in the name you pick.
8. Click away from your code block, and you’ll see you now have two sub-headings. Delete the original one that you typed, since the new code block is now doing that job.
9. Go ahead and create your code blocks for your other subheadings. I suggest you make a note of the name you choose for each location.
Set up your table of contents
10. Go to the top of your blog post and write our your table of contents. Use whatever text size and formatting you want for this.
The text itself does not need to match the actual section headings inside the blog post. In my example, the table of contents reads: Why you might love autumn … whereas the section heading in the text is: 10 reasons to love autumn
11. For each item in your table of contents, select it with your mouse, then click the link icon on your formatting toolbar (just as you would with any other piece of text you wanted to link from a blog post)
12. Set the URL to read #name — where name is the word you chose for that part of your blog post. Mine would be:
#autumn13. Turn off the slider that wants to open your link in a new tab. We want to move the reader lower down the same page.
14. Save and test!
Troubleshooting and additional resources
If you have any trouble, log out and test in a private / incognito browser. Also, here’s the Squarespace help page for troubleshooting this technique
Note for Safari browsers: opinions differ on whether the link format I give in step 13 will work in all versions of Safari. If you view your website analytics and see you have a significant proportion of visits from Safari, you can test adding more to the link so that it’s in the format:
https://examplesite.com/pageslug/#unique-idso for my example, this would look like:
https://paulinewiles.com/articles/seasons-blog-post/#autumnThe trouble is, the longer link type may not behave as you would like on mobile devices; it’s likely a phone will reload the whole page, instead of smoothly bringing a visitor down to the location you intended. So this is a trade-off!
Although those 14 steps above might seem like a lot of instructions, once you’ve done a few of these, it’s actually very quick to create a table of contents in a Squarespace blog post. As a reader, I certainly appreciate it for longer blog posts, and it’s likely that your audience will too.
New to Squarespace? Want to give this a try?
Save 10% off your first subscription of a Squarespace website by using the code PAULINE10
•
Are you an author who is ready to sell more books?
I specialize in strategic, highly effective websites for authors and solopreneurs with books.
If you want an author website that delights your readers, grows your audience, and helps you to sell more books, let’s design, build, and launch your online home in just 2-3 weeks. Learn more, and then schedule a complimentary chat with me.
