Making Your Squarespace Website SEO Friendly

 | 
By Sara Stuart

In the past, I’ve mentioned my reasonings for choosing Squarespace and why I recommend this website builder to businesses of all shapes and sizes. Today I’d like to talk about a topic I frequently get asked about and that’s search engine optimization (SEO). More specifically, how you can make your Squarespace website SEO friendly right after it’s freshly designed and launched.

Making Your Squarespace Website SEO Friendly

Within each of my web design packages, I provide three optimization services for my clients: Squarespace on-page, Google, and Bing. After the design is finished and approved, I begin the optimization process by checking off a list of items geared to prepare the site for the web and search.

When it comes to on-page optimization for Squarespace websites, I recommend following these best practices: 


Squarespace On-Page Optimizations


Set Title Tags

Title tags show up in the tabs of your window browser and describe the content of that specific page. They're one of the most important on-page SEO elements that also appear on the search engine result pages (SERPs), and through external sites, like social media networks.

Title tag example

Title Tag How-to
Check out Squarespace's default title tag formatting by accessing your main menu bar, Settings, Marketing, then SEO. Here's a snapshot of what mine looks like:

 
Squarespace title tag format
 

To customize your title tags for each page, click on the gear symbol and put whatever you'd like into the Page Title box.

Helpful Hints:

Optimal Format
Primary Keyword - Secondary Keyword | Brand Name

Optimal Length
Under 55 Characters for 95% visibility.

For additional best practices and a pretty cool emulator tool, visit this guide from Moz.

 

Utilize Your Meta Description Tags

Meta description tags are like page advertisements on the SERPs. They have no impact on rankings, but they entice readers to click on your page if it's one of the first ten to show up for a certain phrase or keyword.

Meta Description Tag How-to
On the right of each page, click on the gear to change how the description reads.

Helpful Hints:

Optimal Format
Something catchy with the use of a few keywords.

Optimal Length
155 characters or less.

 

Add Image Alt Tags

Do you have a lot of photos on your website? Utilize those babies by applying an alt tag on each. They help identify the content of an image for bots (since they can only read text), assist screen reader users, and provide primo keyword application opportunities that improve your SEO as well.

Image Alt Tag How-to
Since there are a multitude of ways that you can add images to your site, I suggest visiting Squarespace's alt tag guide before optimizing your images.

I use many image blocks for Sarasure, so I find myself either adding (and hiding) the name in the caption or simply changing the file name. Both are easily converted into alt tags thanks to Squarespace.

Helpful Hints:

Optimal Format
Describe the image in detail with a clever use of your keywords. Just don't go overboard, because that's considered "keyword stuffing." If you need more examples, here's what Google has to say.

 

Organize Your Content 

Header Tags
Establish page hierarchy by applying various header formats to your content. They help divide information up into bite-sized pieces for simple page skimming which becomes great for SEO. Also known as <h1>, <h2>, <h3>, etc. tags, Squarespace automatically formats these within the code so you don't have to. This is another way to add in a couple of searchable keywords.

Tags and Categories
Whilst blogging, use tags and categories to help search engines identify what your post is about. It'll also make your life easier if you should choose to have a blog archive later on.

Helpful Resource: Check out Squarespace's help guide for more in-depth tips on how you can increase your SEO visibility.

Now that we've got on-page optimization squared away, here's a couple more things I recommend for optimal exposure on Google and Bing:


Optimizing for Google


  • First, create a Google account that will be associated with your site (if you haven't already).
  • Log into to your account and submit your URL to Google.
  • Create a Google Analytics account and fill out the form to obtain your tracking ID. 

What is Google Analytics?
A tool connected to your Google account that allows you to view and measure your website traffic. Best part is that it's free!

What is Google Search Console?
Previously known as Google Webmaster Tools, this is another free, online service that allows you to check the index and search status of your website.

  • Log back into your Squarespace account and verify your website using the code Google provides you.
  • Then watch out for a message that looks like this:
Screen Shot 2015-12-17 at 6.02.41 PM.png

Follow each step using the links from this message. If you're a one-woman band, like myself, you can skip step number four.

For those of you that need extra guidance, here's a breakdown on how I set-up Sarasure:

 

Adding Multiple URL Versions on Google

  • First, I clicked the red "Add Property" button and typed in www.sarasure.com.
  • Then I verified my site through Squarespace using the HTML tag option.
  • Once that was approved, I simply repeated the first two steps to add sarasure.com.

 

Setting Your Preferred URL

Now that I had two URLs added to my Google Search Console, I chose my preferred version (sarasure.com) by doing two things:

  1. On the home menu through my Squarespace account, I clicked Settings, then Domains to set my primary domain to sarasure.com. Then, I made sure the Use WWW Prefix box was left unchecked. (If you need additional help, refer to Squarespace's guide to setting a primary domain.)
  2. On the Google Search Console, I referred back to my message, clicked on the "set preferred version" link, and selected sarasure.com.

Keep in mind that this step is based on personal preference and shouldn't negatively effect your SEO in any way. Your mission (should you choose to accept it) is to keep everything consistent and organized for Google when their bots crawl and index your site.

 

Selecting A Country to Target

This step is relatively simple to follow once you click on the link provided in the message. Since Sarasure is a company located in America, I selected the United States through the dropdown options. Easy, peasy.

 

Submitting Your Sitemap to Google

  • To submit your sitemap, go to the Google Search Console and click on your preferred website.
  • On the left-hand side click Crawl, then Sitemaps. Next, click on the red "Add/Test Sitemap" button.
  • Type your sitemap url into the box provided, click "Submit Sitemap," and wait a few days for Google to process your file.

What's a sitemap?
A file that lists your web pages, records and measures meta data, and essentially tells search engine crawlers how to intelligently decipher your site content by the way it's organized.

Where to find your sitemap:
Thankfully, Squarespace makes it super easy to remember your sitemap name. If you have a custom domain, it's simply http://www.yourdomain.com/sitemap.xml or http://sitename.squarespace.com/sitemap.xml if you don't.

For more information about your sitemap, head on over to Squarespace's help page.

If you'd like to learn more about the Google Search Console, the last link in your message will take you to a help center. I personally enjoyed learning about this through this Beginner's Guide via Moz Blog.

Note: Google takes some time to crawl and index your website, so be prepared to wait a couple of weeks before your website name shows up in the search results.*

*Disclaimer: Although I have had SEO experience in the past, I do not pretend to be an expert on this topic and do not offer extensive SEO services to my clients. However, due to the ever-changing nature of Google's Algorithms and abundance of SEO marketing scams, I strongly urge you to reconsider ranking obsession. If you find that you're not ranking for a certain term or keyword, there could be a large variety of reasons why and I have found that the lack of quality content is the single most important factor. My advice is simple: write about what you know and try to make it as helpful as possible. Steer clear from language that people will not understand, write original content, and don't repeatedly try to sell yourself to your audience. Nobody likes that.


Optimizing for Bing


Why do we need to optimize for Bing I hear you wonder? According to CNN Money, 1 in 5 people still use Bing, so I try not exclude anyone based on their search engine preferences.

If you'd like to rank for both, here are some steps:


One Last Optimizing Tip


Keep Your Information Consistent

Have you ever Googled a business in search of their location or hours of operation and found that their information was completely scattered and outdated? How frustrating! Let's make it easier on your clientele (and Google) by following these tips:

  • In the Squarespace Main Menu, go to Settings, Business Information and then fill out your name, location, hours of operation, email, phone number, etc.
  • Google your business name (or name of your site) and update whatever pops up with the exact same information, grammar not excluded.
  • Update your social media accounts with the same proper information (this includes your Google My Business page).
  • Don't have a Google My Business? Make a page to improve your local search visibility. (Online only businesses should create a brand page.) Since Google is the king of all the search engines, I like to participate in all of their endeavors, like Google+, for example.

Remember: Once you have something to update, make sure you update everything else. If you get in the practice of doing this, you'll be off to a great start.

Just like that, you've optimized your website and are ready to take the world by storm!


Do you have any other Squarespace SEO tips to share? I'd love to hear how others are navigating the mysterious and ever complicated waters of website optimization.

How to Customize Your Squarespace Website: Part 2

 | 
By Zach Stuart

In my last blog, I talked about how Squarespace allows you to make deeper customizations to your website, provided that you know some HTML and CSS. Part two of this blog explores Squarespace’s Developer Mode, and how it enables you to make higher level changes to your blog. However, it’s important that you take caution when it comes to the word developer. Usually, a high-level understanding of code is required. 

On another note, if you’re interested in learning more about Squarespace’s Developer Mode, this is the place to be. Just be sure to read through this entire blog before performing any of the changes mentioned.

How to Customize Your Squarespace Website

Squarespace's Developer Mode


Developer Mode is Squarespace’s response to those who require a more granular level of changes to their website. Squarespace provides a developer centric website complete with full documentation for editing, guides to set up your coding environment, and an overview of the file structure of the template (amongst other things). In order to utilize Developer Mode, you will have to meet the following requirements:

  1. Be on the business or commerce package.
  2. Have an extensive knowledge of web development, or access to somebody that does.

Once these requirements are met, you’re almost ready to turn on Developer Mode. However, I must inform you of the risks, and provide you with a disclaimer.

Risks: Turning on Developer Mode will save all the changes you have made to your template up until you turn it on. However, any further template bugfixes performed by Squarespace will not make it to your website. If you ever wish to turn off Developer Mode, your template will return to the stock template and all of your previous/developer template changes will be lost.

Disclaimer: Sarasure and I are not responsible for any issues that may arise by turning Developer Mode on, nor will we provide any support. Only those that know what they’re truly doing should progress further.


Activating Developer Mode


In order to activate Developer Mode, start by logging into your Squarespace admin portal. From there, open up the sidebar and click Settings, followed by Developer Mode. From here, toggle the developer switch to on. A disclaimer will appear informing you of the changes Developer Mode will make to your website. If you agree to the terms, then continue on.

It is important to reiterate, that any changes you have made up until this point will be saved, but turning the Developer Mode will reset your template to the original stock template, so use this feature at your discretion.

For those of you that are still with me, the Developer Mode sidebar will have a lot more options. Here is a quick rundown of each section:

1. Connectivity Details
The connectivity details are needed in order to make changes to your templates with Squarespace providing two ways to alter the template code.

A. SFTP (SSH File Transfer Protocol)
In order to set up SFTP correctly, you’ll need to install a client. In the past, I have personally used FileZilla due to its ease of use. Once your client has been installed, set up a new connection with the SFTP Hostname, SFTP Port, Username, and Password displayed on the sidebar. The password will be hidden, but it’s the same one that you use to log into Squarespace.

B. Git
Personally, I prefer to use Git as it allows me to keep a history of the changes I made. Git can also be used amongst teams that wish to work on the same code base at the same time. (Here's more information regarding Git.) In order to get started with Git, start by cloning the repository found next to Git Repository.

2. Template Configuration
Information regarding the base template that you chose to create your website from.

3. Template Audit
Any errors that Squarespace has detected in your template.

4. Collections
Template information regarding each of the Collections (Folder, Album, Index, Blog, Gallery, Events, Products). The configurations of each of these items can be changed by altering the .conf files in the template code base.

5. Git History
As mentioned before, I choose to use Git because it provides me with a history of my changes. The last item in the sidebar is a history of the changes you have made through Git. Additionally, each of these items contain when the change was made, the comment that was added to the change, and the user that performed the changes.


Adding the Author


Some Squarespace templates may not give you the ability to edit or add an author name through their CMS. For example, Sarasure was built using the Avenue template, and the design didn’t have this previously set. With the knowledge you possess of the Developer Mode, let’s go ahead and test it out by adding the author's name to each of our blog posts. 

Step 1:  Open your favorite code editor. I prefer to use Sublime Text, but any code editor will do.

Step 2:  Within the code base, open up blog.list and blog.item

Step 3:  In each of the files, locate the code that looks similar to what’s below.

Step 4:  From there, within the meta class, copy the span tag and paste it directly below. From there, change the span tag to look like:
<span class="date"><address class="author">By {author.displayName}</address></span>

Step 5:  Currently, there won’t be much (if any) spacing between the published date and the author, so add &nbsp;&nbsp;|&nbsp;&nbsp; to the end of the first span tag.

Step 6:  If everything was done correctly, your code should look very similar to the code below.

Step 7:  Push your changes to your website with whatever connection method you chose to use.

As you may have noticed, Developer Mode involves only code, so only use it if you’re sure you know what you’re doing.


In conclusion of this two-part series, Squarespace should not be thought of as a cookie-cutter website creator, but rather as an incredibly versatile tool that allows you to create a website the way you want. The Developer Tool provides you with almost total control over your template, but should only be used by those that are comfortable in a coding environment. Stay tuned for more technical blogs regarding the operations of Squarespace.

Have you ever used Squarespace’s Developer Mode? Would you be interested in learning more about this topic? Let us know in the comments below!

How to Customize Your Squarespace Website: Part 1

 | 
By Zach Stuart

When you build a site on Squarespace, you may feel limited in the customization department. I remember having this feeling when I first started my site design for Sarasure. While customization may seem a little hard to come by on Squarespace, I'd like to share my secret solution with you. I'm able to make small tweaks to client website templates with the help of my secret weapon: my husband/web developer, Zach.

Now that the cat's out of the bag, I've asked Zach to share some of his coding insights in this two-part blog series. Part 1 will focus on how you can customize your Squarespace website by utilizing individualized code blocks and custom CSS on each page. Then on Thursday, we'll dive even deeper using Squarespace's developer mode.


Plenty of developers out there will tell you offerings like Wordpress, Joomla, or Drupal are better options over Squarespace when creating a new website for your business. These developers may even go as far as stating that Squarespace blocks you from any real customization, thus hindering your ability to be diverse. As a developer, I am here to inform you that Squarespace does in fact possess a utility-belt like level of customization that allows you to achieve personality in web design.

How to Customize Your Squarespace Website: Part 1

To start, Squarespace does a great job of enabling you to make lower level customizations to your website through the many menus found under the Design tab. However, you may run across changes that you’re unable to perform through the normal Squarespace menus; this is where code comes in.

There are two areas within the normal Squarespace menus that utilize code to bring a higher level of customization to your website.

  1. Applying custom CSS (Cascading Style Sheets) to alter the appearance of your website.

  2. Introducing individual code blocks to the content portions of your website.


Applying Custom CSS


First, it is important to know the location of the Custom CSS menu. From within your Squarespace admin portal, open up the sidebar and click on the Design link. From there, locate Custom CSS towards the bottom of the menu. In the next sidebar menu, there are three important elements to notice.

  1. Open in Window button
    This button opens the coding pane in a new tab to allow for an easier view when editing CSS code.

  2. Coding Pane
    Below the button is the normal version of the coding pane. This is where CSS is either added, altered or deleted. Keep in mind that the coding pane expects code to be in a specific format, so syntax errors may occur if the code isn’t formatted properly.

  3. Manage Custom Files Button
    This button enables you to upload an image for use in the Custom CSS area of the site. After uploading an image, clicking on the name of that image will add a link referencing that image to your cursor location in the coding pane. This is especially important when using the CSS background attribute.

Let’s put Custom CSS to the test by addressing two annoyances that I have noticed in Squarespace. First, the font-size across different form elements is not always uniform. Second, the font in form elements defaults to Arial or Helvetica - not the custom font assigned to your website. To fix these issues, we can add the following lines of code to the coding pane.

.form-wrapper .field-list .field .field-element {
  font-family: inherit;
  font-size: 14px;
}

With this change in place, hit save and check out the now uniform forms.

Of course, in order to utilize this section fully, an understanding of CSS is required. Luckily, great sources exist, such as Codeacademy’s free web course, which will also teach you HTML. After running through the lesson, you should be armed with enough knowledge to fully utilize the Custom CSS section to make your Squarespace website your own.


Individual Code Blocks


Individual code blocks exist as blocks, and can be added when editing any content area of your website. In order to add one, simply add a new block, and select the Code menu item as seen below.

Once Code has been selected, you will be prompted with a new dialog labeled Edit Code. This dialog contains three main elements.

  1. Display Source checkbox
    The Display Source checkbox displays the actual code, rather than what the browser will render it as. For the normal user, this should usually remain unchecked, and should only be checked for those that wish to display the actual code in a friendly format to their readers.

  2. Code Type Select Box
    To the right of the Display Source checkbox is a select box with five different options, where HTML is the default. Here is a rundown of what we can do with the five different types.

    1. CSS: Only for displaying actual CSS code for the audience to read.

    2. HTML: Can either be utilized to inject HTML code for rendering, or for the audience to read the actual code.

    3. Javascript: Only for displaying actual Javascript code for the audience to read.

    4. Markdown: Can either be utilized to inject Squarespace Markdown code for rendering, or the audience to read the actual code. (There isn’t much use for this option because you can use a markdown block instead.)

    5. Plain Text: Only for displaying plain text for the audience to read. (There isn’t much use for this option because you can use a plain text block instead.)

  3. Coding Pane
    Below the previous two items exists the coding pane. Since HTML is really the only rendered code that should be utilized here, it will generally contain the actual HTML code.

Full utilization of this section requires an understanding of HTML. As mentioned above, Codeacademy’s free web course can equip you with these proper tools.


Contrary to popular belief, Squarespace isn’t just a basic template editor. It simply provides users with the proper tools to further customize their website. These two sections can accomplish many of your customization goals including, but not limited to, the creation of custom social media icons, drop-down navigation menus, and personalized call to action buttons. Stay tuned for Part 2 on Thursday when I go over the benefits (and some detriments) of turning on developer mode to gain even more granular control over your website.

Would you like more custom design guides, like creating social media icons for your Squarespace website? Subscribe to the newsletter below to show your interest.