Viewing entries tagged
website design

1 Comment

SEO Setup Guide for Your Squarespace Website

Bold & Pop : SEO Setup Guide for Your Squarespace Website

One common misconception of Squarespace is that it’s not good for SEO (search engine optimization). That’s a big ol’ lie. You just have to know how to optimize your site properly, just like with any platform! We know SEO can be a complicated topic and really confusing so we’re giving you a step-by-step guide to help you optimize your site so you can rank higher and higher on search engines pre- and post-launch!

Backend Setup

There are several things to update in the settings area on the backend of your Squarespace website prior to launching (if you've launched and haven't done this, don't worry! You can still go in and update now). This includes:

  • Your Business Name

  • Site Description

  • Search Engine Description

  • SSL Certificate

  • Page Titles and SEO Descriptions

Business Name: Chances are you have a logo that you’ll be using on your website but you also want to fill out your Business Name under the business information. If you do have a logo, you’ll want to also consider adding some keywords after your business name. Because you have a logo, these won’t show up on the actual website but it still gives search engines some keywords to crawl right in your website name.

You can edit your business name by going to Settings > Business Information > Business Name

Example: Bold & Pop | Social Media, PR, Branding and Website Design

Site Description: Depending on your template, this may or may not show up on the website but this is a great place to give a succinct overview of what your brand offers. Make sure you include the essential keywords in this section.

You can edit this by going to Settings > Basic Information > Site Description

Search Engine Description: This description is what is used in the search results of search engines like Google. In one or two short sentences, describe your business here. (You can also use the same description as the site description to make life a little easier.) Again, make sure to include essential keywords so these are front and center for search engines to crawl. 

You can edit this by going to Settings > SEO > Search Engine Description

SSL Certificate: Google has announced that SSL-secured websites may receive a minor ranking boost so you want to make sure you have this enabled. Luckily, Squarespace makes this insanely easy and offers free SSL certificates for all Squarespace domains and third-party domains connected to a site.

To make sure this is enabled, go to Settings > Security & SSL > Choose Secure option

Page/SEO Titles and SEO Descriptions: Every single page on your site now allows you to update the SEO titles, page titles, navigation titles and page descriptions. Here’s how these break down:

Bold & Pop : SEO Setup Guide for Your Squarespace Website
  • SEO titles: These appear in search results and are indexed by search engines.

  • Page titles: These are only available on some templates but these can be longer than navigation titles. If there's no SEO title, the page title displays in search results instead.

  • Navigation titles: These are the titles that show up in your navigation. It's best to keep these short, like "About" or "Contact."

  • SEO Descriptions: Similar to your overall site description and search engine description but these are specific for each page on your site. These will display under the corresponding page in search results so make sure to keep these short, relevant, and descriptive.

You can find page titles and descriptions under each page’s settings (pictured above).

Headers

If you didn’t know, Squarespace produces pages with clean HTML markup that is indexable by search engines. This means there’s no need to add <h1> and <h2> tags in HTML. All you have to do is select a Heading style, and those tags are created for you.

Most of the time you’re going to use these Heading styles to highlight your key points on your website and these should include keywords. These headers are prioritized as important pieces of information (in order of Header 1, Header 2, Header 3, and then body text) when search engines crawl your website so you can see why having keywords in these is so important.

Pro tip: If you have a blog, your blog titles are categorized as Header 1 so make sure those are descriptive and include keywords!

Bold & Pop : SEO Setup Guide for Your Squarespace Website

Image Filenames

In Squarespace, images contain proper <alt> and <title> tags, improving search engine indexing. All meta tags for pages and <link> tags for RSS feeds are automatically generated in Squarespace and image descriptions are converted to <alt> tags. Because of this, you need to make sure you give every image on your website a filename.

You can find this right under where you upload the image. It says it’s an option which means it’s often overlooked but SO important for SEO. As with everything else, you want to make sure you include keywords but make sure the filename also provides an accurate description of what the image is (this pops up if the images doesn’t load).

We like to structure our filenames as Company Name :: Keywords/Description

Unlike most of these other SEO tips, this is something you may need to continue to do on a regular basis. If you decide to change an image or add a new one, you need to rename or name those images each time. This is especially important if you have a blog or shop that you update regularly.

Pro tip: This is also the text that is pulled if someone pins an image or graphic from your website to Pinterest! 

Connect to Google Analytics

So how in the world do you know which keywords to optimize? Good news is you can connect your site to Google Analytics and it will pull in the search terms people actually use to find your website!

This will be really important for your ongoing SEO strategy so we highly recommend doing this and checking the keywords on a monthly basis in your Squarespace Analytics.

If you need help connecting your Google Analytics, here’s a guide.

Submit Sitemap to Google

The great news on this piece is Squarespace automatically generates and links a proper sitemap.xml, which enumerates every URL and image metadata on your site with proper priority for perfect indexing even if you use a Javascript-heavy template.

So while Squarespace does this automatically for you, you still need to submit your sitemap and verify your website with Google. Luckily, this is also super easy and Squarespace provides a step-by-step guide.

  • How to verify your site with Google Search Console

  • Once you verify your site, you can click the option to submit a sitemap. Basically your sitemap can be found at http://www.yourdomain.com/sitemap.xml. So just enter the sitemap.xml into the space provided and submit!

And there you have it! A lot of little steps but all very easy and doable to help boost your SEO. If you want to learn more about the other built-in SEO features Squarespace offers, check out their overview.

Pro tip for ongoing SEO:

While taking care of all of these backend SEO pieces prior to launch is always a top priority for us, we also always suggest adding a blog and updating it regularly. This gives search engines fresh content to crawl on a regular basis. Trust us, this is not an opportunity you want to miss out on. Consistently blogging has probably been one of the biggest pieces to boosting our SEO.

If you decide to add a blog or if you already have one, there are plenty of steps to take to make sure your blog post is in tiptop shape before you hit publish. Luckily, we have a whole checklist for you in our content upgrade library! Sign up here or below to get access with our super duper top secret password.

P.S. Exciting news! We launched a free #GoingBold Facebook Group and would love for you to join us! Come on over!

1 Comment

Comment

2019 Website Trends: Micro Animations and How to Do Them

Bold & Pop : 2019 Website Trends: Micro Animations and How to Do Them

If you haven’t noticed having an interactive element to your website has become increasingly more popular over the last few years. And we’re here to tell you this trend isn’t going anywhere anytime soon!

Luckily, you don’t have to go crazy when it comes to adding these interactive elements. Think banner slideshows, rotating testimonials, hover animations, and our new favorite… micro-scroll animations! This is where an element appears on your screen (slides in, floats up, bounces in, etc.) as you scroll through the site. Having an interactive element like this on your website keeps the user engaged and actually helps improve their user experience as well!

Keeps the User Engaged:

Our eyes are naturally drawn to movement meaning that elements appearing upon scrolling is more visually interesting than static text and images. This means your website visitor’s interest will be held longer as they continue to scroll further down your page.

Improves User Experience:

Along with keeping users’ engaged, scrolling animations can help direct your website visitors around your website. These animations can help draw attention to specific sections or key content on the page. It’s almost like giving your visitors a map of where they should go next while on your site, but in a fun and interactive way! For example, you may have static text and the animation piece is when a “Read More” button appears as users begin to scroll. Their scrolling indicates that they have finished reading and are now ready for the next action on the site (the “Read More” button). This helps provide them with easy navigation throughout the site and ultimately, a positive user experience.

So what do micro-scroll animations look like?

There are a lot of options out there but here are a few examples:

Fade In

Slide Up

tada



Cool! How do I add this to my site?

First thing you need to do is add the below code to your sitewide code injection. To find this, go to Settings > Advanced > Code Injection and then copy and paste this into the header code injection.

<!--Micrco-Scroll Animation Code Injection-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Next up, you need to add a code block to the page you’d like the animation on. (Pro tip: Make sure this block is below what you’re animating or it won’t work. We typically add it to the bottom of the page!)

Once you add the code block, copy and paste the below code into the block. You then need to change the spot where it says #block-name and className. Block name is the block ID so you can target that specific content block to animate. If you don’t know how to find this and you use Chrome for your browser, add this extension.

Then to change the className, you want to head over to this site. Here you can see the different types of animation options available. Once you choose, the className is literally just the name in the dropdown you chose (case sensitive!).

So you’ll simply add the #block-name and className to the code in the code block then hit save!

<!--Code Block-->

<script>
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
$('#block-name').addClass('wow className');
</script>


<!-- Duration -->
<script> $('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.4s'}); </script>


<!-- Init. script -->
<script>
       new WOW().init();
</script>

If you want to add more lines than the 5 provided (or you have less than 5), just add another (or delete the remaining):

$('#block-name').addClass('wow className');

at the end before </script>.

If you want to have the same animation for all, you can just add the #block-names all in the same section. For example, it would look like:

$('#block-name, #block-name, #block-name').addClass('wow className');

in that particular section of the code.

And last but not least, if you want to change the timing of your animations, go to the section that says <!-- Duration -->. You’ll add the #block-name again and then you can adjust 'data-wow-delay':'0.4s'. For example, it would look something like:

<script>
$('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.4s'});
$('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.5s'});
$('#block-name').attr({'data-wow-duration':'1s','data-wow-delay':'0.6s'});
</script>

This will change the timing of when your animations float onto the page (like the examples we provided above).

And there you have it! Simple animations to make a BIG impact on your Squarespace site!

If you add this to your site, we’d love to see! Drop a link to your site in the comments!

P.S. Exciting news! We launched the free #GoingBold Facebook Group and would love for you to join us! Come on over!

Comment

Comment

Hair Unique Website Design

Bold & Pop : Hair Unique Beauty Salon Squarespace Website Design

We work with clients across the country (and sometimes the world!) but there's something about getting to work with a business from your hometown that you've gone to since you were a kid that is just a little extra special. We had the opportunity to do just that with Hair Unique. Based in Mallory's hometown of Mystic, CT, the salon was looking for a new, updated website. They hadn't updated their website in years and wanted to fresh new look that spoke to their client base better. And we were happy to do just that for them! 

Bold & Pop : Hair Unique Beauty Salon Squarespace Website Design

The Project:

The Design:

The design was focused on creating a clean, modern website with a streamlined user-experience and cohesive look that pops. After chatting them the ladies at Hair Unique a few times, we wanted to focus on the following for their website: 

  • Keep their current logo but change the color scheme from the current website
  • Source images that were cohesive with their original photos of their salon and team
  • Highlight their team and key services 
  • Make the website easy to update in the future 

The ladies at Hair Unique really trusted us with the design so after discussing these key components, we ran with our ideas for them! Take a peek at how the website turned out: 

Bold & Pop : Hair Unique Beauty Salon Squarespace Website Design
Bold & Pop : Hair Unique Beauty Salon Squarespace Website Design
Bold & Pop : Hair Unique Beauty Salon Squarespace Website Design
Bold & Pop : Hair Unique Beauty Salon Squarespace Website Design

Adding some sourced photos mixed in with their original photos, keeping the color scheme simple, and highlighting a few of their key services really helped bring their new website to life while also providing a streamlined user-experience. If you're ever in the Mystic area, stop by and say hi to this amazing team! 

Bold & Pop : Banner
Bold & Pop : Digging what you see? Let's Work Together! Branding and Web Design Package
Name *
Name
Bold & Pop : Banner

Comment