How to Format Images on Your Squarespace Website for SEO
How you present your images on Squarespace affects more than just the looks of your site. It also effects how your page loads when a visitor lands on it. Plus, it has an affect on your website's SEO (Search Engine Optimization). I recently prepared a quick guide with important guidelines and resource links for one of my workshop participants who is building an artist portfolio for herself. So I decided to share it with you as well:
14 things you can do to your images that will help your SEO
1. Gallery Blocks Vs. Gallery Page:
Understand how the benefits of a Gallery Block Vs. a Gallery Page. There are clearly some benefits of using a Gallery Block Vs. a Gallery Page. For instance, Gallery Pages are better for sharing images on social media because of a unique deep link that is associated with each image. On the other hand, gallery blocks are best when you want a mix of gallery of images and text on a page. Check out the detailed explanation in this article below so you know which one to use.
https://support.squarespace.com/hc/en-us/articles/206542467-Gallery-Blocks-vs-Gallery-Pages
2. Gallery Page Display List by Template:
Select the right template for your images. Some Gallery Page displays are unique to certain templates. So when it comes time to add images, you want to make sure that you have already started with the right template. Take a look here to see a gallery page display list by template.
https://support.squarespace.com/hc/en-us/articles/208415198
3. Tool for compressing images.
Here are two resources that you can use to compress your images and not lose image quality. The bigger the image, the longer it takes to load your site and that effects your mobile-friendliness and SEO rankings.
4. File types to upload:
.jpg, .gif or .png are best to use. I prefer .png to .jpeg for various reasons but one of them is that if you have text in your image, it renders better if the file is a .png.
Squarespace doesn't accept certain file types. So do not use .pdf, .psd, .tff and .doc files.
5. Style Editor Images:
Some images will need to be uploaded via the Style Editor, such as a background image. In this case, Squarespace always displays at original image width. Heed the recommendation from Squarespace: these images should be maximum 2500 pixels along their longest edge. (Want more details on image formatting here: https://support.squarespace.com/hc/en-us/articles/206542517)
6. Image Resolution Limit:
There's another guideline to help you: keep your image resolution at 60 MP.
7. Color Mode:
Save images in RGB mode as the print mode (CMYK) won’t render on most browsers. Save images in sRGB to show better on mobile devices.
8. Image width:
Use images that are between 1500 and 2500 pixels in width. Resize them before uploading them to Squarespace.
9. Auto-resize of some images:
See that you format your images before you upload them. Squarespace will reformat large images to a max width of 2500 pixels but not all images. Background images and site-wide banner images will load the way they are originally and cause loading issues.
10. Consistent width and length:
See that the width and length of your images are consistent. This will make sure that they will appear correctly especially if there’s some cropping that happens on a gallery page or block.
11. Squarespace Guide on resizing photos:
For different ways of resizing photos using Squarespace see this article: https://support.squarespace.com/hc/en-us/articles/206566727
12. Keep file size under 500 KB:
As simple as that.
Bonus:
13. Page Size:
Keep Page Size down at 5MB and no more than 60 blocks per page: https://support.squarespace.com/hc/en-us/articles/115011721167
14. Is your site mobile friendly?
Do a mobile friendly test to find out if your site is mobile friendly:
https://search.google.com/test/mobile-friendly
Well, I hope these steps are useful for you as you build / improve your Squarespace site. I certainly have a few things to do from this list as I am always learning myself how to optimize my Squarespace website.
Let me know if you have any questions: so@ sophiaojha.com
Peace, Sophia