Squarespace SEO - Optimising your images to help your SEO

Squarespace SEO is a minefield, isn’t it? Such a big task, but where to even start, especially as there are so many things to consider.

In this article, I’m going to share 8 actionable tips that will help you to increase your SEO by optimising your images.

By the end of this article, you’ll be a whizz and within no time the images on your website will help you gain better visibility!! So let’s get cracking!... Squarespace SEO - Optimising your images to boost your SEO…


As you know, there are quite a few different file types...

  • .jpg, 

  • .gif, 

  • .png

  • .svg

  • .pdf, 

  • .psd,

  • .tff, and

  • .doc

...to name a few! 

It’s worth noting, only the following are web-compatible image formats for your Squarespace website:

  • .jpg, 

  • .gif, 

  • .png

With this in mind, the first thing to keep in mind is…

1 | Save your images in RGB colour mode

99designs - RGB and additive mixing

RGB stands for Reb Green Blue.  This is the standard colour mode for digital images.  So if your designs are going to be on any digital screens - by this I mean on your desktop computer, your laptop, on your phone, and even the TV - then the image should be saved in RGB mode.

CMYK (Cyan, Magenta, Yellow, Key/Black) is the colour mode for printed material.  It’s used for design projects that are printed.  So for example, printed business cards, booklets, brochures, flyers, van signing, restaurant menus, and more.  Essentially CMYK is used for any design material that you can physically hold.

2 | Name your image for search engines

As it stands, search engines can’t technically see or “read” an image.  The image would need to be named. This name helps the likes of Google to identify what the image is, which in turn helps your site ranking.

How does an image name help my website ranking you say? 

Well… an image file name “IMG_2378.JPG” doesn’t tell Google what the image is.  Whereas a file name suitably describing the image, using lowercase letters, numbers, and hyphens, really do help.  Keep in mind that you shouldn’t keyword stuff the name of the image - more on this in the next section.

Tip: I always rename the image at the time of file saving or image creation. That way, when I upload the image to my Squarespace website or my clients’ website, the image is already correctly sized and named.

How do I edit an existing image file name?

To edit an existing image file name follow these steps or watch the video snippet below:

  1. In Editor Mode, find the image you want to edit, and click Edit

  2. Amend the Filename for the image, in the Content tab

  3. Click Apply

  4. Save your changes!

3 | Use keywords in the alt text for SEO

It’s always a good idea to add image alt text because if the image doesn’t load or show up, the alt text will be displayed.  The alt text also helps the visually impaired. Assistive screen readers or browsers with images disabled use the alt text to read the image, so it’s a double whammy to ensure you have filled the alt text in!

That being said, don’t just write a bunch of random words:

  • “Lady sitting colourful top smiling”

Write a sentence so that it makes sense, describe the image as if you are explaining what it is to someone, and get to the point. Ie: 

  • “Krishna sitting, smiling, looking forward wearing a colourful top”.

There’s no need to say “This is a picture of….” and you can add keywords if it works naturally into the sentence...also keep the alt text to a maximum of 125 characters.

There are quite a few different ways to add image alt text to all the different image types, this Squarespace article goes into all the detail for the best practices.

4 | Remove text from main banner images

As Squarespace templates and therefore websites are naturally responsive - meaning the website adapts to the device it is viewed on - you should remove any text that could potentially get cut off.  This means, do not to add any text directly on to the image itself.

Instead, add text ON TOP of the image, using a Text Block.

This will ensure anyone viewing your website is met with a good user experience whilst still helping to improve your SEO.  

5 | Ensure banner images are properly sized

Branded photography or images are an important asset if you have them as part of your brand toolkit. They are also arguably tricky to get right if you use them as banner images on your Squarespace website as you want to ensure you look professional as they will be seen almost instantly.  But….

What is the best size and orientation of a banner image?

Squarespace recommends, for best results, banner images should be 1500px by 1000px in landscape orientation. The maximum width “should be 2500px as anything over that will extend page-loading times”.

6 | Check, and double-check the image on different screen sizes

A golden rule of thumb: whenever you add an image, particularly a background image, to your Squarespace website, always check and double-check how it looks on mobile.  As I’ve previously mentioned in this article - How to make your Squarespace website mobile-friendly, now more than ever people browse the internet on their mobile devices, therefore it’s key to ensure the user experience is on point, so please, don’t forget to check!  

On Squarespace 7.0, if you hover over the site preview frame (within the page editor view) and click the arrow to show the device icons you will see the Device View.  Here you will see icons corresponding to different device sizes. If you then click on one of these you will be able to view how your website appears.

Device view on the backend of your 7.0 Squarespace website

On Squarespace version 7.1, there is no tablet view as this is handled for you.  But by clicking on the Mobile Preview icon in the top-right corner of the site preview frame you will be able to view how it appears on mobile.

Device view on the backend of your 7.1 Squarespace website

7 | High-quality imagery

High-quality imagery is a must.  Not only does it professionalise your brand but it visually makes your website more appealing. The last thing you want on your website is a pixelated or blurry image.  High-quality images help to boost your SEO via organic search so it’s always a better idea to use crisp quality images over poor quality imagery.

High-quality images don’t need to be professional, but they should be on-brand.

Related:

8 | Check the image file size

The image file size is incredibly important.  Bigger is definitely not better when it comes to files sizes so it is recommended to keep the file size for images under 500 KB for each photo.

I’ll be honest though, sometimes it can be difficult to reduce the file size and keep the banner image at the recommended dimension size (1500px by 1000px - landscape).  

On a Mac, you can resize your image by opening your image up in Preview (double click the image to open it).  Then adjust the width of the image (keeping it proportionally correct) and make the image smaller (but not smaller than 1500px wide).  Then save your image and you will notice the file size will be smaller too. 

Note: This method replaces the image upon saving, so if you need to keep the larger sized file, make a copy of it first! 

In case that doesn’t help, you can always use additional software to help bring that file size down.

There are a few different resources out there, a couple of my favourites are:

Conclusion

SEO optimisation is no easy, overnight, winning task. It takes time and it takes a well planned and executed strategy.  Saying that it can be done so even if it is with baby steps and small daily tasks to update a page at a time on your website, rest assured, it can be done.

Good luck with optimising the images on your Squarespace website! Here if you need me, and always championing you on! 

Get 10% off your subscription

If you don’t have a Squarespace website, then what are you waiting for? If you want to give it a test run with a FREE 14-day trial you can sign up via the big blue button below and get 10% off your subscription.

*Affiliate link


Krishna Solanki

Krishna Solanki, founder and creative director at Krishna Solanki Designs (KSD). KSD is an award-winning brand and Squarespace website design agency renowned for our experience, creativity, well-defined processes and confident approach.
Krishna is also an official Squarespace Expert, Squarespace panellist and speaker at Squarespace Circle Day.

https://www.krishnasolankidesigns.com
Previous
Previous

Business love and learnings 2020 - Year 2

Next
Next

Getting your website legally compliant – 3 essential tips