Adding alt text to images

Write clear, concise image descriptions to help your SEO and make your content more accessible.

Last updated December 31, 2024

Alt text is text you add to images to make them more accessible to visitors. Search engines also use alt text to identify the content of the image, so it’s a great way to give your site an SEO boost. In some places, your image’s file name serves as the alt text if you don’t manually add alt text. For image blocks and auto layouts, you need to manually add alt text. 

Alt text is also helpful for assistive screen readers or browsers with images disabled. If a browser can't display the image, the alt text may be displayed instead. Alt text doesn't need to be visible as plain text on the page for a screen reader to read it. When you add alt text, use short, readable terms that describe the image. Follow our tips to make your images accessible.

This guide reviews how to add alt text to your site's images, and images that include alt text automatically.

Watch a video

Alt text best practices

When writing alt text, remember that you're writing for humans who use assistive screen readers or who disabled images in their browser. Keep in mind:

  • Be descriptive and helpful. How would you describe this image to someone who couldn't see it?
  • Keep the text short, typically twelve words or fewer.
  • Optimize your text for search by incorporating keywords, but avoid keyword stuffing.
  • Write in real sentences; don't use hyphens to separate words.
  • You can omit words like "the" and "a," and terms like "photo" or "picture." For example, instead of a picture of a green vase, use green vase.

Image file names

An image's file name acts as alt text if there isn't any other alt text added, except for image blocks and auto layouts. We recommend using our alt text best practices when you create image file names for your images.

To change the file name, update it in the Asset library.

Tip

Only use letters, numbers, underscores, and hyphens in file names.

The filename field in the Image Block editor

The filename field in the Image Block editor

The site title serves as the alt text for the site logo.

Image blocks

You can add alt text of up to 250 characters to any image block layout. If you don’t add alt text to image blocks, the image is hidden from assistive technologies, like screen readers. How you add alt text to an image block depends on which version of Squarespace your site is on.

  1. In the image block editor, click the Content tab.
  2. Go to Image alt text, then enter your alt text in the field.
  3. The alt text saves automatically.
  1. In the image block editor, click the Content tab.
  2. Go to Image alt text, then enter your alt text in the field.
  3. The alt text saves automatically.

image_block_with_alt_text.png

Accessing this feature

Auto layouts and gallery sections are only supported in version 7.1.

You can add alt text to auto layouts and gallery sections, but each uses a different method.

Auto layouts

If the image alt text field doesn't appear in the Elements tab, switch the Show image toggle on. To add alt text to images in auto layout sections:

  1. While editing a page, hover over the auto layout section and click Edit Content.
  2. Click the Content tab.
  3. Click the image you want to add alt text to.
  4. Scroll to Image Alt Text and enter your alt text in the field.
  5. Click Back, then click Save.

If you don't add alt text to auto layouts, no alt text displays.

Gallery sections primarily showcase images. If you add a description to gallery section images, it automatically becomes alt text and the caption for the image.

Accessing this feature

In version 7.1 you can only add gallery blocks to blog posts, product items, and individual events.

To add alt text to an image in a gallery block:

  1. Double-click the gallery block or click Edit.
  2. Find the image to edit, hover over it, and click .
  3. Add alt text to the Enter an image title field. If you don't add an image title, text in the description field becomes alt text.
  4. Click Save.
The image editor with title and description fields.png

Blog post and event featured images

The title of a blog post or event serves as the alt text for the post or event featured image. For Event Pages, this is the same on both list and calendar layouts.

File names serve as alt text for page featured images. Ensure that you name all featured images as you want them to appear before uploading them.

Video block thumbnail image

When you add video blocks to your page using a URL, the block automatically generates a thumbnail image and appears as an overlay. If you add a custom thumbnail, the file name appears in the static URL, but not as alt text. It's not possible to add alt text to video block thumbnail images.

Product images

You can add alt text of up to 200 characters to any product image. If you don't add alt text, the product name becomes alt text. To add alt text:

  1. In your store page, hover over a product, then double-click it.
  2. Hover over the product image, click the three dots, then click Edit metadata.
  3. Add your text to the Alt text field.
  4. Click Apply.

Cover page images (version 7.0)

To add alt text to a cover page image:

    1. In the cover page menu, click the Media panel.
    2. Hover over the image and click .
    3. Add alt text to the Enter alt text… field.
    4. Click Save.

To add alt text to an image in a gallery page:

  1. Click the gallery page in the Pages panel.
  2. Find the image to edit, hover over it, and click .
  3. Add alt text in the Image Title field. If you don't add an image title, text in the description field becomes alt text.
  4. Click Save.

Email Campaigns image, blog, and product sections

In Squarespace Email Campaigns, you can add alt text to images, blog posts, and products you add to your campaign:

  1. In your campaign draft, click an image section, blog section, or product section.
  2. In the right panel, click the image, blog post, or product where you want to add alt text.
  3. Add alt text under Image Alt Text. The alt text saves automatically.

If you don't add alt text to these sections, no alt text displays. It's not possible to add alt text to images or logos in the campaign header.

Section background images

It’s not possible to add alt text to background images. Purely decorative images, like abstract background images or graphics separating content, don't require descriptions. To learn more, review the Web Content Accessibility Guidelines.

If you’re still interested in adding alt text to a background image, one workaround is to use an image block as a section background, fill the block, and add alt text to it.

You may also be able to add alt text to a background image by adding custom code. To learn more, visit this post in the Squarespace Forum. Keep in mind, custom code modifications fall outside the scope of our support. This means we’re unable to help you set up or troubleshoot code-based solutions.

Next steps

Tip

Help ensure your image sizes, filenames, and alt text are optimized for search engines and visitors by connecting the TinyIMG extension. TinyIMG also provides an SEO audit that identifies issues affecting your image SEO. While we work with third-party services to ensure Squarespace Extensions work properly, extensions fall outside our scope of support. We can help with connecting or disconnecting your extensions. For all other questions, contact the extensions provider directly.

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.