Adding a Sidebar for Your Squarespace Blog to Improve SEO
Do you Really Need a Sidebar on Your Blog?
When it comes to getting the most bang for your buck on your blog in terms of SEO, adding a sidebar to your Squarespace blog is a great strategy.
My name is Maggie and I’m a Web Designer and SEO Expert. Through my business Hilltop Help, I help business owners get found on Google and increase their website traffic through strategic content marketing; because you shouldn’t have to use sleazy, bro marketing tactics or spend thousands of dollars per month on ads to make money.
Let’s dive into how adding a sidebar to your blog posts is a great way to improve your website’s SEO and walk you through how to add a sidebar on Squarespace using CSS.
How a Sidebar on Your Squarespace Blog is Good for SEO
Let’s talk about some of the ways having a sidebar on your Squarespace blog is good for SEO.
Better Engagement Rate on Your Website
One of the best ways to boost rankings of your website is to have an awesome user experience that keeps website visitors engaged.
The longer your visitors stay on your website, the more valuable search engines will deem your content because more than likely, you are answering the questions of your ideal customers and providing them with valuable resources that get them results. Or at the very least, you’re providing some sort of entertainment for them.
Building That Trust and Credibility Factor
Another reason this sidebar option is great for SEO is because it gives a visual representation of your experience and expertise. Even if you say in your blog post, “I’m a web designer” or “I’m a therapist”, having this sidebar makes it stand out a bit more than having that credibility component buried in your blog content.
And let this be a friendly reminder to you that you should always add a sentence or two about your expertise in your blog posts, again so you can build that instant trust and credibility.
Having a sidebar in your blog posts can give visitors a brief glimpse into who you are and what you do, which is especially important when you start getting organic traffic from people who have never heard of you before or seen any of your content before.
In my sidebar, I have a picture of me which shows I am a real person, and I have a few sentences summarizing my business and services.
You might choose to list a few of your credentials here, what you’re known for in your industry, and a quick snippet about how you help others.
When people can associate a face with the content they are reading, they are more likely to remember it- so don’t be shy here!
Directing Your Website Visitors Toward the Next Step of the Customer Journey
Underneath my short “about me” section, I have 3 buttons that link to my three main offers- for me, that’s my web design services, SEO services, and Squarespace template shop.
It may be good to have one of these buttons be a free resource with an opt-in form so that you can capture people's email addresses and nurture them even further. I am currently in the process of updating my landing pages, so I decided to just link to my different services.
If you are launching a new course or service, lead people toward that offer. This helps get your newer pages that immediate influx of website traffic that Google loves to see to consider your site a valuable resource.
You can really decide what makes most sense for you and your business.
Nurturing Your Audience with More Valuable and Related Content
Last but not least, you can include links to other relevant blog posts. For example, you’re reading this blog about web design and SEO, so I may want to point you in the direction of my other content related to these categories (like this blog post about Building Your Landing Pages on Your Own Website to Improve Your SEO).
Not only does this help your website engagement rate, but your audience will appreciate the fact that you have content that helps solve their problems.
But as you can see, the purpose of this sidebar and the simplicity of the design encourages people to click through to other pages of your website- which again is great for SEO.
What Elements to Include in Your Blog Sidebar
While there is definitely no “wrong” way to set-up your sidebar for your website, these are a few key elements I recommend to make the most out of this limited space on your blog.
About Section with a Photo of You
As I mentioned before, having a welcoming photo of you at the top of your sidebar is ideal because it allows for your audience to immediately connect with you and put a face to your content and business.
Make sure the photo is high-quality (ahem, not blurry!) and taken at least from the waist up.
This could also be your logo or a photo of your physical location if you are a larger business with multiple owners or employees.
Buttons That Link to Your Main Services or Products
Similar to how you lay out your navigation bar for your homepage layout, you want to keep the amount of links on your blog sidebar to a minimum. Too many options can be overwhelming for website visitors, especially those that are new to your business.
Highlight 2-4 products or services using a button with a very simple call-to-action.
Consider the fact that these may not necessarily be the most revenue generating products in your business but rather, they may be ones that has a low barrier to entry for a potential customer just to get them in the door!
From there, you can nurture them further with email sequences and other great content!
A Button That Links to a Freebie
This one is optional but if you want to include a very simple opt-in for your email list or to get a freebie, this could be a good strategy. I would keep the form simple, including only the name and email address fields.
Another Image with a CTA - could be for a freebie, paid offer, or to follow you on social media
Having another graphic on your sidebar can help establish that brand recognition that you want people to get when visiting your website.
As an SEO maniac, I shy away from sending traffic off your website and onto social media here but I have seen this done a lot, especially in the influencer community.
My preference would be to use this graphic to send website visitors to a relevant landing page for your freebie.
Other Options
Add your social links
Add a table of contents
Just like in my example, add an archive to other blog posts and organize by date (better for seasonal businesses) or category
How to Build a Custom Sidebar in Squarespace without a Plug-In
So now that you know why having a sidebar on your blog is important for SEO and website engagement rates, here are a few ways you can accomplish this on Squarespace without a plug-in.
How to Add a Sidebar to Squarespace Blog With Code
I decided to use code to build my Squarespace site honestly, because it was the first option I found. But I love the fact that you can easily customize the look and feel, the buttons act like buttons, and I don’t have to worry about the quality changing across different screen sizes.
I used this tutorial from Becca Harpain’s YouTube Channel: Inside the Square.
How to Add a Sidebar to Squarespace Blog Without Code
If you’re a Canva girlie like me, you’ll love how you can design your Squarespace sidebar with this method from Paige Brunton.
You’ll still use the Squarespace summary block feature to build your sidebar, but there is no code needed. With this method, similar to the Becca Harpain tutorial, you don’t have to worry about manually going in and updating every image on your blog post if you decide to upload the looks or links of your sidebar content. You just have to do it one time in the blog content for your summary block, and it will update across all of your blog posts.
How to Use a Squarespace Plug-In to Give Your Blog a Sidebar
I found this Plug-in option from SQSP Themes a little too late, but I am considering buying the business license to be able to use for my future clients who may want this sidebar option.
This plug-in option is nice because you can add a sidebar to any page on your website- including the shop pages! I could see that being incredibly beneficial for e-commerce stores that want to promote their products to their shoppers.
Find more info about the plug-in here.
Adding a sidebar to your Squarespace blog can significantly benefit your SEO efforts and improve user engagement. It provides opportunities to boost engagement rates, establish trust and credibility, guide visitors through the customer journey, and promote related content effectively. Consider including elements like an about section with a photo, buttons linking to main services/products, a freebie opt-in, and additional graphics or CTAs to enhance your sidebar's impact on both SEO and user experience.
YouTube custom sidebar Tutorial Transcript
-
[00:00:00] When it comes to getting the most bang for your buck on your blog post, in terms of SEO, adding a sidebar is a great strategy. My name is Maggie. I'm a web designer and SEO expert. And through my business, Hilltop help, I help business owners get found on Google and increase their website, traffic through strategic content marketing.
Because you shouldn't have to use sleazy bro marketing tactics or spend thousands of dollars per month on ads to make money in this video.
I'm going to explain how adding a sidebar to your blog posts is a great way to improve your website's SEO and walk you through exactly how to add a sidebar on Squarespace using CSS.
So first things first, one of the best ways to boost rankings of your website is to have an awesome user experience that keeps visitors engaged the longer your visitors stand your website.
The more valuable search engines will deem your content.
Because more than likely you're answering the questions of your ideal customers and providing them with [00:01:00] valuable resources that get them results.
Or at the very least you're providing them some sort of entertainment.
Having a sidebar in your blog posts can give visitors a brief glimpse into who you are and what you do, which is especially important. When you start getting organic traffic from people who have never heard of you before. Or have never seen any of your content before?
In my sidebar that I'll show you in just a moment.
I have a picture of me which shows I'm a real person, hopefully a relatable one. And I have a few sentences that summarize my business and services.
So I'm going to show you what my sidebar looks like. And then we'll break down the components of why it's good for SEL. So looking at my sidebar here, you can see that the first element is a picture of me. This. Proves that I'm a real person. I own this business. I'm professional, hopefully relatable. And it builds that instant trust factor.
Underneath the picture of me is a brief bio. About who I am, what I do and who I [00:02:00] serve.
I also include a little call to action that says check out my custom web design S. S C O N template customization services to see how I can help you grow and market your online business. So very clear to the point I even used this used as a bold and italicized text. To highlight kind of the key points that I want to draw attention to.
So underneath that there's three buttons that link to my service.
And I love this little hover effect here that is in the custom CSS code that I'm going to share with you in just a bit.
But these link to different pages on my website.
I would keep these buttons to no more than three or four buttons because you don't want to overwhelm people. The point of this is not to have a second navigation bar, but you do just want to draw people's attention to some of the main pages on your website. Now, ideally I would probably recommend that at least one of these buttons links to a free resource.
That way you can capture your website, [00:03:00] visitors, email address. If they're interested in what you are giving away for free. That's a great strategy just to keep people in your world and you can nurture them through a really great email sequence. And then hopefully. Be able to sell to them later. So, this is great for people who maybe don't know you well.
They've never seen you post before. They don't know your content. They just found you on Google or Pinterest, whatever platform that they found you on.
So, this is kind of the first step to getting them into your world.
My landing pages for my freebies are currently under construction. That's why I didn't include mine here, but you can see that that would be a really great option.
Another thing that you can do if you want to get really intricate and have a different sidebar for a variety of different blog posts is that you could have. Links to other relevant. Blog post articles or maybe like your top three featured ones, for example. That's just another way again, to keep people engaged on your site, the longer that you can have them reading the copy on your [00:04:00] website browsing through your services, getting to know you. The better, not only for SEO, but also for your business.
And the last part of my sidebar, you can see that it ends with this gray shading here. Is another picture. And this is just a picture that leads directly to my SEO and marketing course. Sales page. That is my biggest offer that I have right now. My biggest passive offer.
I will say that I have right now. So I really want to highlight that again. That could be a really great place to put a freebie. But I do like having the two images or graphics there just to give a little bit more visual interest. Now this sidebar was made using. A summary block and
you will link it to a separate blog page. Again, I'll show you that in just a minute, but I do want to highlight these two other pieces that I added underneath here. So here I have a, just a small text box.
It just says browse the blog. You can use whatever call to action that you want. But I really wanted for people to be [00:05:00] able to UpTop since I do write longer blog posts. I wanted people to be able to, if they were interested in learning more about brand design or email marketing or Pinterest. They couldn't find these topics here.
This has done using the archive block. And another option is you can organize these blog posts by date. So this, I could see being really good for someone who has a more seasonal business. So maybe if you're a food blogger or maybe a home decorator, something like that, where, okay.
I want to look for Thanksgiving recipes. I know I'm going to go into the November piece. But for my business, that doesn't quite make sense. So I really liked just using the categories for the archive component here.
So now let's get into exactly how to make an upload this sidebar to your. Blog post.
-
Okay. So I used this tutorial from inside the square. Her name is Becca. She's amazing. So I'm going to try to summarize that as best I can, but if you have other questions or just what a deeper dive [00:06:00] into the code she used and how to customize things, I will definitely link her. YouTube video that she posted, I will link that in the comments as well.
So be sure to check her out. I appreciate her so much. And I've learned so much from her tutorials. So going in here, you'll go to the not linked section of your website and add a new page. And then you're going to add a new blog page. So you can see, I already have that here. I named mine sidebar.
So let's click into that and I'll show you what it looks like.
So under blog content, I have five different pieces and that's for the five different pieces of that sidebar. So you can see the first one is the image of me. That's what shows up first on the sidebar. You'll click the three dots to go into settings for that blog post. And that's where you're up, upload, whatever picture you want.
It could be a view. It could be of a product or a service that you sell. Some sort of mock-up really. Can be however you want it to be, but I really like [00:07:00] including a picture of you. Again, just to build that credibility.
Under the expert is where you'll put your little bio or and maybe include a call to action.
And then if you want that to be a clickable component on the sidebar, you'll make sure that this link post titled to source URL is turned on and then add the source URL for whichever Page you want it to link to on your website. So for me, that makes sense to. Direct people to my about page again, so they can get to know me a little bit better. Now for this piece, unlike some of the other parts of Squarespace, where you can just do the backslash, since it's within your own website, you will need to put the full source URL and don't forget the HTTPS. Part, I tried to do it without that, and it did not work. So make sure that you do the whole URL there, not just the slug. And then make sure that you publish it.
So these next three ones are the [00:08:00] buttons that are on that sidebar.
So again, what you'll do is you'll go in. To that blog post. You can delete any content that's already there, but your title is what will show up in the button text. So make sure that it's formatted the way you want it. I wanted all caps, so I made sure to do that here. And then under the settings, You don't need an image.
You don't need an expert, but you do still want that source URL. So you'll link, post title to store's URL. Keep that turned on. And then I want this one to link to my templates page. So I linked that there. Again, make sure that you publish it under options. And then you can close that out of that one.
You'll do the same for your other three buttons or however many you want.
And then under, if you want a second picture at the bottom of the sidebar, you will do the same thing that you did for the about section, except that this one won't have an excerpt because it doesn't have any text underneath it.
Again, you can add some if you [00:09:00] want to, but I do recommend keeping that sidebar to a minimum. You don't want to overwhelm people with a whole nother navigation bar.
So here, you can see that I added a featured image. And then I added the source URL, make sure that this part is turned on and this links to the sales page for my SEO course, there. Again, make sure that you publish it in the options and you're good to go.
So before you add any of the code, it's a little bit. Misleading that it's, it's not going to look good at first, but here's what it'll look like. So you saw what it will look like after you had the code.
Okay, let me go back here.
-
What I showed you previously is what it looks like. After adding the code, but the code is really what stylized is it, and you can use it to customize. The look and feel of it, however you want. So what you'll do is you'll go into website tools. You'll click custom CSS. And you can see this sidebar buttons is the code [00:10:00] that I used to style my buttons. Again, this is from Becca inside the square, but I will copy and paste this into the captions with the link to her YouTube video.
That goes a little bit more in depth of how to customize it. But just to review it real quickly
Since you're going to be using a summary block, this is indicating that the second button in that summary block is going to have a background with this color. The text is going to be centered.
The padding is going to be 10. You can adjust this as you like it, depending on how your font looks in there. And then there's going to be a border that is white. Of two pixels. And you'll do the same thing for each of your buttons. If you want different colored buttons or different colored borders, feel free to adjust those.
The other thing that she provided code for was this hover effect button. I made mine that lime green color, just to give it a little pop. And again, you can add a border to that if you want. There.
So once you have your sidebar [00:11:00] stylized exactly how you want it, you'll go into one of your blog posts to upload it. So you'll have to do this for every blog post. You can make different sidebars for different blog posts. If you want to get really intricate, I just want to have the same one across my entire website. So this is how you do it.
So at the top of your blog post or wherever you want to put it, you'll hit that plus sign to add a new block and you're going to add a summary block.
So the page you're going to pull from is this sidebar.
And you can see it already looks a little bit funny. This has the dates showing as the primary metadata. So we don't want that. We're going to select none. And then in design, you're going to keep it as a wall, just increase the number of items to however many items you have. You can go a little bit over just in case you add something down the road. You will keep all of these on the title, the featured image and the expert.
You do not need the read more link. And then you can decide if you want a [00:12:00] background or not. Mine does have this light gray background. And then I do like having a stroke, which is kind of like the border. That goes around.
But you can play around with that and see what you like. And then I reduced the padding down to the small padding.
Again, however you like. And then the only other thing you'll need to do is go into the size and spacing and you can adjust the column width. And the gutter with just as make sure all the Make sure all the elements are spaced out how you want. So I found for my website that this four 30 pixels and 25 pixels seems to work the best for the column and gutter width.
So I'm going to see it still looks kind of weird. Once you slide it over. To the position that you want it. And you want to make sure that blue line, as you can see, is, is highlighted across the entire span of the blog post. So. You'll adjust that there that's a little big, so, hover over the [00:13:00] edge of that sidebar, and then you can make it smaller.
And there you have it.
-
So it looks really good. I like to keep it towards the top of the blog post, but you can definitely slide it down. Kind of rearrange things. Just keep in mind that it will make the Content of your blog posts a little bit more narrow, so you may need to adjust the margins of your website. Just a bit to fit that in there. And then just, I make sure that all of my pins at the bottom state formatted correctly as well.
So the other thing that I touched on in the beginning was adding a archive that way you can direct people to other relevant content in your blog. So first I'm going to have this text block and you can see that it just. Goes under this part of the sidebar, which is exactly what I want. So I want to center it and make the text bold. It's going to have.
A call to action that says browse the blog.
You can make it say, you know, check out our other resources [00:14:00] or. Scroll back through the archive. However you want to word it is totally up to you. So that's just a text block there. And then I'm going to add one more block underneath that. That is going to have the archive. And this is going to, I want it to pull from my blog.
If you had products in your shop, you could definitely add that and show showcase some of your You know, featured items in your shop. That would be an awesome idea. I'm just going to keep it as a blog.
Yeah. And then under display. I like to use the list version. You could try it out, you know, play around with this and see what, what it looks like, but you can use the dropdown is another good one. I'm going to keep it as the list. And I want the alignment to be centered and I want it to be. Grouped by category instead of date.
So you can see how that looks there. I do need to like go through an update because apparently if you don't capitalize your categories the same way than it. Makes a [00:15:00] new category for it. So there's that.
And we'll just hit save to make sure that all stays there and just check the mobile version too, just to make sure everything looks okay on the mobile version.
It's going to automatically go down to the bottom underneath all the other content that you have in your blog. So that's okay with me. And we'll just keep it like that. So hopefully this tutorial was really helpful for you and shows you how to improve the SEO of your blog posts.
Pin this for Later:
Browse the Blog:
