Building an Organized Squarespace Website Starts Behind the Scenes

Kristine Neil
·
10
min read

One of the things that attracts pros and clients alike to website platforms like Squarespace is that it’s relatively easy to go from blank slate to robust web presence in no time flat. This ease-of-use is great for so many other reasons as well. If you’re a web pro, you can focus on helping your clients curate great content and build compelling page layouts with clear CTAs instead of reinventing the wheel every time you work on a new web design project. If you’re a small business owner, the technology barrier that might have otherwise prevented you from being a hands-on part of managing your site is severely diminished, allowing you to contribute to and edit your content in the future as needed without waiting on a developer to answer your emails. So, let’s just make all the new pages and move on, right?!

Not so fast — with great power comes great responsibility. It may be simple to edit site content, make new folders or expand your presence as business grows but the focus should never just be on the public-facing side of the equation. Keeping things organized and tidy on the back end of your site will help you stay sane, make sure that any future developers who may work on the site know exactly what’s going on and ensure that search engines like Google can understand what you do. The good news that these best practices for keeping things in top form are easy to incorporate into your workflow!

Name Wisely

When talking about website organization, the first rule of the game is that naming is important! In addition to the URL Slug (which we’ll cover in a moment), there are three places where you can give your page some name love. Leaving these items blank is like leaving money on the table and can make your site or your content hard to find, understand and navigate.

  • Navigation Title — this is what your page is referred to in your site’s navigation. Of all of these, this one is usually filled in because no one wants to leave a page called “New Page” hanging out in their navigation! Keep these short and use clear language so people know what to expect when they click.
  • Page Title — all too often, we see this just get the same name as the nav title but if you do that you’re missing out on a prime place to incorporate some of your target keywords. Each page should get its own short description (fewer than 70 characters) and keep in mind that if there’s no SEO title, this is what will appear.
  • SEO Title — this is what shows up in the browser bar, in search engine results, and when your site is shared on social media. You want this to be simple and descriptive of what’s actually on the page. Visitors (and search engines) don’t like surprises so just like your nav title, you want this to be descriptive of and match what’s on the page.

URL Slugs

I told you that this name was going to get a section all it’s own and you might be wondering why something as lowly as a slug matters so much. Two main reasons: it helps visitors find and share your content, and if you’re doing any custom development, it’s often how you reference and target specific sections in CSS. Bonus tip — giving your slugs strategic names can actually also help you write fewer lines of code! That’s right! Thinking ahead when writing URL slugs can help you identify pages as similar so that you can then apply specific styling to them using attribute selectors in CSS. Here’s a simple example:

If you had multiple pages in an index that you wanted to have a specific color background, you could give them all a common suffix as part of their URL slug such as:

URL Slugs:

/intro-bl

/about-bl

/contact-bl

In CSS, quickly identify all the sections that you’ve marked as “bl” to style them all with a BLUE background:

section[id*=”bl”] {
  background: blue;
}

Do Away With Defaults

While we’re on the topic of URL slugs, another quick tip is to never to leave them as the default text! When you add a new page (including pages inside an Index) the URL slug will automatically update to match whatever you name the page, BUT it’s very easy to move quickly and just let the new page default to /new-page-1 and the next one to /new-page-2, etc. This gets especially tricky when you’re redoing an existing site because it’s easy to start seeing pages like /home-3 and /contact-2, meaning that there were already versions of /home and /contact in use on the domain.

Because each page needs to have its own unique identifier (URL slug) and you’d ideally like your home page to be /home and not /home-72, be sure to rename your old home page to something that you aren’t going to use (“/home-old”, for example), or consider deleting it altogether to free the slug you want to use up for use. This also helps make sure that any old links you had going to your home page will still end up where you want them because you’re just replacing that page with your new one.

The following items are given default alphanumeric names, and though people are less likely to type these URLs out in full to find these items on your site, they will see the jumbled name in their browser and search engines won’t have anything of value to read either! So, again, you’re not doing all you can if you leave these as the default string of characters:

  • Images & Gallery Items
  • Blog Posts
  • Events
  • Products

Update these and give them proper descriptions to help everyone find your content!

Show Them The Way

As your site grows and expands, you’ll likely do some revamping and want to change things up. In some cases, you can swap out old pages for new ones like I described above by giving the old page a different slug or deleting it altogether so that you can just slide the new page into its place. Sometimes it’s not that easy though, and that’s when you’ll want to enter the world of 301 redirects.

Example:

You have a service that you no longer plan on providing so you delete the page for it. It may be gone from your website, but the link to this page will live on forever in old social media posts, marketing materials or on directory sites. Visitors who click on this old link will end up on a 404 page, and while that isn’t necessarily bad for SEO, it creates a poor user experience, and they’re likely to just click off your site in search of better content elsewhere. By adding a simple redirect, you can help visitors find new, updated or alternate content automatically, keeping them on your site and improving their experience overall which is a good thing.

To enter a 301 redirect on Squarespace, just go to Settings > Advanced > URL Mappings and enter the following:

/old-url -> /new-url 301

Bonus Tip: Make a Custom 404 Page

Did you also know that you can create a custom 404 page for the times when people truly have ventured into territory that doesn’t exist on your site? Doing this is a great way to retain some trust while also infusing a little of your own brand into the page. Once you’ve made a custom 404 page, you can tell Squarespace that you’d like to use yours instead of theirs. Just go to Design > Not Found / 404 Page and select the page you’d like to use from the dropdown.

Keep Some Things Private

We all have some pages on the back end of our websites that may not be fit for public consumption. Maybe you were trying something new or are A/B testing a landing page or just have some content that you’re still working on building out. Whatever the case, you want to do what you can to make sure the people (and Google!) don’t see this until you’re ready. There are lots of ways to hide things in Squarespace, and we often see people get confused about which ones are best. Here’s the scoop on all of them:

On a site-wide level:

  • Public — Everyone (including search engines) can see your site by going to yoursite.com.
  • Private — No one can see your page. Not even Google.
  • Password — People with a password that you set can see your page. Search engines cannot.

On a page-level basis:

  • Disabled Pages — Hidden to all humans and search engines alike. Renders page invisible.
  • Not Linked Pages — This just hides the page from your navigation. The page is still live and can be seen by search engines but visitors will not be able to see it unless you link to it from other places on your site (including your navigation).
  • Password Protected Pages — People with a password that you set can see your page. Search engines cannot. You can put these pages in your navigation but people will need the password to see the content.
  • Hide Page from Search Results — Visitors can see the page but search engines like Google can’t. You can enable this in the SEO tab of Page Settings and it’s basically like adding a Noindex tag.

Why are all these good to know? Well, for some things (like landing pages on your site that may have very similar, duplicate content or pages that aren’t linked to from anywhere (considered orphan pages) properly disabling or hiding your page can improve your SEO. For other things, it prevents visitors from viewing pages until they are ready to be seen.

Bonus Tip! Keep your Not Linked Pages panel organized by arranging like with like or by pushing all disabled pages to the bottom of the list. This keeps you from needing to sift through a bunch of junk in search of the real thing. For example, if you have a bunch of feeder galleries (galleries that just feed summary blocks or other gallery blocks throughout your site) move those below pages that actually have live content and group them all together. You also shouldn’t feel afraid to delete old pages. Not only do you have 30 days to restore them but I bet you’ll find you never really need them once they’re gone. This will keep the unlinked area of your Pages Panel clean and organized!

Label Your Code

This one is for the developers out there. Keeping your Custom CSS and Code Injection panels tidy is a sanity-saver. Some people don’t like adding comments because they feel like they’re giving away the secrets to what they’ve done. Here’s the thing: it’s all right there for everyone else to see and interpret anyways so you might as well just leave some comments (the text nestled between /* */) to make sure that the hard work you put in doesn’t get messed up by a future developer or the client.

Start all sections with a /* */ and give a brief description of what the code below it does. Better yet, add any notes or parameters in plain English to help you remember why you did this in the first place. Often, as sites grow and change old code needs to get updated, and without comments, it can be hard to start to untangle the source of the various tweaks and customizations.

Why This Matters

On a purely organizational level, keeping things tidy on the back end makes working on your site much easier and less stressful, and if you ever need to hire someone to work on your site, they’ll love and appreciate the effort. You’ll also win from a strategic standpoint: search engine like Google and Bing will get a clear, consistent message about who you are and what you do. This should also help you create compelling content that converts visitors into customers and at the end of the day, that’s exactly why we all have a website.

Kristine Neil

Kristine Neil is Owner & Creative Director at Markon Brands, a creative studio that designs Squarespace websites that move brands forward. With a focus on building sites that support small business growth, Markon Brands has a diverse international client base and works with service-based businesses and e-commerce retailers alike.

Lead generation on autopilot

Get more exposure for your freelance or agency services

Knock out your next project

Find the perfect Squarespace designer for your unique needs