How To Set Up Anchor Links In Squarespace
Image Source: Unsplash
Whether you call it an anchor link or a jump link, it’s the same thing. An anchor link takes a page visitor to another location on that same page, or to a relevant section on a different page. How do you go about adding anchor links to your Squarespace site? In this article, we’ll show you!
Table of Contents in Detail Hide
Do Anchor Links Matter?
Image Source: Unsplash
If you have a long, content-heavy page, well-placed anchor links will help your visitors find what they’re looking for faster within the page. Or if you mention something on one page that’s covered fully on another page, anchor links can take your reader to the relevant, more detailed page.
These links serve as markers to help people access information faster. Think of them as being similar to bookmarks or a table of contents guiding your page visitors.
Anchor links can also add SEO value to your Squarespace site. Search engine bots crawl these links, giving you another opportunity to rank higher on searches for a particular keyword. So long as the text in your anchor link is relevant to the section you’re jumping to, you should be in good shape.
As you read this and other anchor link how-to advice, keep the following in mind:
Anchor links and jump links are the same thing
They are markers that guide your reader to specific sections on a page
As long as they are relevant, they will improve user experience and add SEO value
Adding Anchor Links To Squarespace Pages
Is it tricky to add an anchor link to a Squarespace page? It can be. Our recommendations are what we use most of the time since they work for the majority of cases.
Link To A Section Of A Page
To link someone to a specific section of any page on your site, such as (for example) to the member benefits section of your membership page after they land on your home page, take these steps:
Click “Edit”
Click the plus (+) sign at the top of the section
Type in the word “Code”
Pull up a code block
Add in the following code: <p id=" "></p>
This is the main code you will use for any anchor link you want to set up. You will then personalize the code to best fit your unique website and align with the experience you’re creating.
Creating More Links
Follow these tips to make it easier to replicate the code for other sections you want to link to:
Keep your code simple; there’s no need to make it complex
Save your code in a Word doc or other accessible file for future reference and use
When setting up a code block, drag it to the top so it goes across the entire page and the whole section (this is important for mobile devices)
After you’ve finished adding a code block for an anchor link, take a look at the URL. You’ll need to add a hashtag sign plus a descriptive word (such as “benefits”) to make it unique and identifiable.
Complete The Process At The Other End
Once you’ve set up and saved the anchor posts that a link will go to, you will need to complete the process from the referring page.
In our example of linking to the member benefits section of your membership page when someone lands on your Squarespace home page, you will need to go to the home page and add a link there.
To do so, follow these steps:
Double-click into the page
Click into the editor
Check what the text or button is linked to
Modify it to link to the correct section (using our example, we would add this: /#benefits)
Add relevant text (for our example, “Member Benefits”)
Save
When someone clicks on the text or button you’ve modified, they will now be taken to the anchor text you’ve created on the other page.
Time-Saving Tips & Tricks
Image Source: Unsplash
Now that we’ve covered the basics of adding anchor links and modifying the two ends that are involved, let’s go over a few useful tips and tricks.
Sticky Navigation Workaround
If some of the text in your anchor section is being blocked off, you can remedy this with a workaround. I typically use sticky navigation. If you’re using a different type of navigation, your text may not show up the way you want it to. Here’s the fix for that:
Go into “Edit”
Go to the top
Click to edit the site header
Remove “Fixed Position”
Save
Now the link from the other page should take you to a well-formatted section of your anchor text without any pieces missing or blocked off.
Add A Spacer
If you’re not using sticky navigation and you want to keep it that way, there’s another workaround you can use instead to format everything correctly.
On the page with your anchor text, do the following:
Go into “Edit”
Add back “Fixed Position”
In the anchor section, click on the plus (+) sign
Add a spacer
This workaround adds a bit of extra space between the anchor and the section of text to prevent words from accidentally being covered up or blocked.
Avoid Quick Jumps
If you want to avoid sudden, jarring jumps to the section you’re linking to, and you’d rather have a gentler, scrolling motion, do the following:
Go to “Design”
Go to “Custom CSS”
Add in the following HTML code:
html {
scroll-behavior: smooth;
}Save
By adding in this tiny bit of code, you’ll end up with smooth scroll behavior, which creates a far more pleasant experience for your Squarespace site users.
Galleries & Other Exceptions
Following the steps outlined above, you can go to just about anywhere on your Squarespace website to add in code and adjust the formatting, thus adding relevant anchor links to help visitors navigate more easily to the most relevant sections of your site.
To avoid you any unnecessary frustration, I just want to point out that these steps work for most Squarespace sites and pages, with a few exceptions. They will NOT work for galleries. In addition, they will not work for certain content sections.
To summarize, don’t waste your time trying to use the methods described in this article for setting up anchor links on Squarespace for any of the following (they won’t work):
Galleries
Any section that isn’t standard, such as a list
Any areas where you’re not able to add a code block
Contact Us For Help
We’ve covered a lot in this blog post, and if anything is unclear or you need help walking through any of the steps, you can turn to us for services designed to help you design Squarespace sites faster, easier, and more efficiently.
We love helping developers and small business owners alike, so we’ve created a ton of helpful material available for free. Browse through our Squarespace SEO guides for actionable ways to optimize your site quickly. Even the best SEO experts can learn new things from our free guides.
You may also benefit from signing up for our free newsletter, which is sent out monthly. Subscribing to our newsletter is an easy way to gain industry insights that will help you get more out of your Squarespace site.
