The importance of alt text and how to add it to images

Squarespace web designer tips - alt text

So you’ve created your Squarespace site and got it live and so you think you’re finished.
”The site is live yay! I get my life back”.

But there are a number of things that you need to do to behind the scenes in your Squarespace CMS to help your site to be found by search engines.
One of them is adding ‘alt text’ to your images. It’s boring work (best done listening to a good podcast or music) but vital in helping you to be ranked higher by Google. So all the hard work you did in creating the site has the chance of being seen by people.

So what is alt text?

Basically, it’s a short image description that search engines use to identify the content of an image.

Note: This is different to the image file name, which should also be descriptive where possible.

Search engine crawler bots understand words, but images are just blank mysteries unless alt text is added.
Search engines can’t serve images accurately in searches without alt text. Your images may still appear without it, but google is just having its best guess.

Screen readers for the disabled also use alt text and if for some reason the browser can’t display your image, the alt text will be displayed.

Best practice is to keep alt text short. 1-4 words is ideal. If you are selling products for example, the type of product and the brand would be a no brainer. eg: Adidas Gazelle Trainers.

Unlike file names, Alt text can be written with spaces and without hyphens or underscores.

How do you add alt text and where in Squarespace?

In Squarespace there are a number of places to add alt text depending on where your image is.
The most common are;

  1. Image blocks that appears in standard pages

  2. Images that appear in gallery pages

  3. Images that appear in product pages

1. Image block that appears in standard pages 

In Squarespace, for a standard image block the caption text acts as the alt text. Add this by clicking and typing under the image.

Squarespace web designer tips - alt text 2
 

If you don’t want this to be actually seen by users, then select ‘Do no display caption’ from the drop down menu.

Squarespace web designer tips - menu
 

Note: if you are using another design layout such as ‘Overlap’ then type in your caption while in ‘Inline’ and then switch back.

Click APPLY.

2. Images that appear in gallery pages 

First open the gallery page. On the left you will see all of the images in your gallery.

Hover over the image and click the gear icon ( i think it looks like a sun icon).

Squarespace web designer tips - images menu
 

Add your alt text in the image title box.

Squarespace web designer tips - alt text box
 

and click SAVE.

In some templates this may display the title you entered under the image and if you don’t want to do this, go to your ‘site styles’ under the DESIGN menu and in gallery preferences there should be an option to not display it. ( it does vary template to template however).

3. Images that appear in product pages

First click on the products page and then select a product and double click.

Squarespace web designer tips - shop alt text
 

Roll over an image and select the gear icon and then enter the alt text in the ‘metadata box’. Click SAVE.

Repeat for each image under the product.

With Google ranking being highly competitive, you need to employ every SEO boost that you can find.
This is one you can do yourself, all it costs is your time.