Alt text is text associated with an image that some browsers display instead of the image. Search engines use it to identify the content of a page. Adding alt text to images is a great way to give your site an SEO boost and make it more accessible. If you don't manually add alt text to an image, the image's file name will usually serve as 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 will display instead. For all these reasons, when you add alt text, use short, readable terms that describe the image and relate to your site content.
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've 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, without "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 Block
How you add alt text to an Image Block depends on the layout.
Inline layout
Captions added in the Inline layout automatically become alt text for the image.
If your image is set to the Inline layout, and you want to add alt text but not display a caption:
- Add the caption text.
- Select Do Not Display Caption.
Note: In lightboxes, captions always display.
All other layouts
For all other layouts (Poster, Card, Overlap, Collage, and Stack), the captions won't become alt text. Instead, add alt text to the Filename box in the Content tab of the Image Block editor.
Gallery Page image
To add alt text to an image in a Gallery Page:
- Click the Gallery Page in the Pages panel.
- Find the image to edit, hover over it, and click
.
.
- Add alt text in the Image Title box. If you don't add an image title, text in the description box becomes alt text.
- Click Save.
Gallery Block image
To add alt text to an image in a Gallery Block:
- Double-click the Gallery Block or click Edit.
- Find the image to edit, hover over it, and click .
- Add alt text to the Image Title box. If you don't add an image title, text in the description box becomes alt text.
- Click Save.
Product image
To add alt text to a product image on the Product Page:
- Hover over the product and click Edit.
- Find the image to edit, hover over it, and click .
- Add alt text to the Image Title field. If you don't add an image title, the product title becomes alt text.
- Click Save.
Cover Page image
To add alt text to a Cover Page image:
- In the Cover Page menu, click the Media panel.
- Hover over the image and click .
- Add alt text to the Enter alt text… field.
- Click Save.
Site logo
The site title serves as the alt text for the site logo.
Blog post and event thumbnails
The title of a blog post or event serves as the alt text for the post or event thumbnail. For Event Pages, this is the same on both list and calendar layouts.
Page thumbnail image
File names serve as alt text for page thumbnail images. Ensure that you name all thumbnail images as you want them to appear before uploading them.
Image file names
An image's name acts as alt text if there isn't any other alt text provided.
To change the filename for most images, re-upload the image with the new name. For Image Blocks, open the image editor and update the Filename field in the Content tab.
Tip: Only use letters, numbers, underscores, and hyphens in file names.
Next steps
- For more tips on SEO, visit How do I increase my site visibility to search engines?
- For more tips on making your site accessible to people with disabilities, visit Making your Squarespace site more accessible.