How to write alt text for images on your website
Another bit of website jargon that you might have heard bandied around is “image alt text”, “alt text” or “image alt descriptions”.
Here I break down what these terms mean, how to use alt text to boost your website traffic and more importantly ensure all visitors, including those using screen readers can access your site.
I’ve also snuck in some examples of alt text done well… and badly!
You can also find a step by step guide to adding alt text to images on your Squarespace website, and the ‘gram!
First things first…
This post may contain affiliate links. These are denoted by a *. If you make a purchase via one of these links I may get a small kickback. I only recommend products and services I use and love myself! Thanks in advance :)
What does image alt text mean?
The phrase “alt text” is short for alternative text, and refers to a short text description of an image on a website, and certain social media platforms that provide this functionality.
Alt text is what is read by screen readers when they relay the content of the webpage to the person accessing it.
Does alt text help SEO?
Alt text helps your SEO in two ways.
The first is that by providing alt text for your images you are providing more information about your page content, therefore helping google understand the page and return it as a useful resource against relevant search keywords.
Secondly, your alt text means that google will pick up your images to show in “image search” and sometimes even in the main SERPs (Search Engine Results Pages) (google is returning images more and more in the main SERPs), giving you all the more opportunities to be found online.
Interested in learning more about SEO? These posts are for you
7 ways to get your Squarespace website to rank on google
Squarespace SEO - everything you need to know about SEO on Squarespace
What are keywords and how to use them: SEO made simple
How to write copy that gets you found on Google: SEO made simple
What are the accessibility requirements for alt text?
Firstly, it should be said that in many countries - including the EU as a whole it is the law to ensure all images on a website have alt text to ensure accessibility to those with visual impairments, so actually having alt text is often a requirement.
Even if it isn’t - it’s highly recommended as of course we want to ensure everyone visiting our websites gets the full experience, and we get an extra SEO bonus boost in addition.
An alt description should be a basic description of the image that allows someone visiting your site to understand the image and what it is showing within the context of the page. Generally speaking you don’t need to add alt descriptions to abstract or purely decorative images, unless it’s necessary for the visitor to understand the page content.
On some websites it’s possible to add an image description as well as image alt text. In that scenario your description would likely be in more detail, and your alt text slightly less involved - I like this article on the difference between image alt text and image alt descriptions.
How long should alt text be?
Alt text for images on your website should be between 100 and 140 characters. Going for slightly less than 125 characters is a good bet as this is the length at which many popular screen readers will cut off.
How to write alt text
Describe the image within the context of the page
An image description should be accurate and useful within the context of the page that someone is viewing. One way I’ve heard this spoken about is to describe the image like you’d describe it to someone on the phone, assuming they have read the rest of the page.
Don’t repeat the caption
You do not need to repeat the caption, or other text around the image as this will have been “read” by the viewer already. It can be useful to read the text above or next to the image and see if your alt text makes sense against this context.
Use less than 125 characters
As mentioned above, less than 125 characters is usually a reasonably good length for an alt description as it give enough space to describe the image without going over the cut-off point for some of the most popular screen readers.
Include keywords (where natural and necessary)
If you’re targeting certain keywords for your page (which is highly recommended to help your chances of getting found on google) you can incorporate these in your alt descriptions if it’s natural and makes sense to do so. Don’t keyword stuff! This means just repeat keywords and variations of them as it gives a terrible experience to those accessing your site with a screen reader, and google is onto it and is not a fan!
Don’t use “picture of” or “image of” in your alt text
You don’t need to state the obvious - people accessing your image with a screen reader know it's a picture or an image, and this is simply a waste of good word space for your alt text.
Examples of good and no so good alt text snippets
Bad alt description:
Blueberry pancakes, pancakes, stack of pancakes, pancakes recipe
Why does it suck? Keyword stuffing
Bad alt description:
Picture of pancake stack
Why does it suck? No need to start with “picture of” and lacks detail
Good alt description:
Stack of pancakes with blueberries and syrup drizzled over the top
Bad alt description:
Eiffel tower, tour eiffel, paris, paris skyline
Why does it suck? Keyword stuffing
Bad alt description:
Picture of tower and river
Why does it suck? No need to start with “picture of” and lacks relevant details
Good alt description:
Eiffel tower at sunset with the River Seine and boats in the foreground
Bad alt description:
Sign on building
Why does it suck? Lacks relevant detail (words on sign)
Bad alt description:
You’re not lost you’re here
Why does it suck? Lacks relevant context (that the text is on a sign)
Good alt description:
Sign that says “you’re not lost you’re here” hanging on stone building
Portfolio piece - Simpul Clothing e-commerce website shown on Ipad
Bad alt description:
Portfolio piece - Simpul Clothing e-commerce website shown on Ipad
Why does it suck? This is already included in the image caption - it doesn’t need to be duplicated
Good alt description:
Nothing! Assuming that there isn’t any additional context required based on the content on the webpage, there is no need to repeat the image caption or add anything in the alt text.
How to add image alt text on Squarespace
Squarespace has recently made it even easier to add image alt text to your website images, which you can do on gallery blocks and individual image blocks. See the step by step guide to adding alt image text to your Squarespace images here.
How to add alt text for instagram
Another great place to add alt text is your instagram posts. Once again, not repeating captions is really important here, but if you love to write a flowery caption that has little to do with your image - adding alt text is a must, and its super easy to do!
Find your image and add your caption as normal
Click on the advanced settings button at the bottom of the post area
Click “Write alt text” under “Accessibility
Type in your alt text using the same guidelines as discussed above
Click done and publish your post as usual!
So there you have it, how to write high quality alt image text snippets that make your website more accessible whilst also improving your SEO. What’s not to love!
Enjoyed this?
Join my email list to get my latest and greatest blog posts to your inbox, as well as exclusive offers and first refusal on custom webdesign slots as they open up.
New on the ‘Gram…
