How to Write the Best Alt Text for Your Images (w/ Examples)

Images provide context to your articles, web pages, and other campaigns, but what provides them context?

Alt text is often seen as a tool to improve search engine optimization (SEO), and they wouldn’t be wrong. But it serves a purpose beyond that. A purpose that not many people pay much attention to, which often leads to the abuse and misuse of alt text.

But not to fret. There’s a method to the madness.

What Is Alt Text?

It’s easier to understand how to best use it if you know what its actual purpose is.

Alt text, also known as alternative text or alt tag, is a short description of the image that displays when a user can’t access the image.

There’s all sorts of reasons as to why an image wouldn’t appear:

• Weak wi-fi
• Broken image link
• The photo size is too large
• Wrong file name
• The user is using a screen reader

Alt text lets the user know what value the image contributes to the messaging on the page. It also relays whether the image is simply decorative or not.

It’s a simple feature, but to those who can’t see what you’ve thrown up, it can make all the difference in understanding the page.

What Does Alt Text Have to Do With SEO?

The answer is a lot.

SEO best practices are what most people associate with alt text, and for good reason. Search engines place a lot of value in the practice when considering ranking and relevance, especially Google. Alt text helps them consider what’s in the image and how it relates to the text around it.

If the image features a product, then you can include the product name into the tag for those who can’t see the image. They’ll still receive full context of the page in its entirety.

Of course, it also helps when you can include keywords into it as well since the alt text is crawled by Google. But it’s important to note that keyword stuffing isn’t a best practice.

In fact, you’re actually ruining the user experience if you try to abuse it in that way.

How Alt Text Affects User Experience

For those who are vision impaired, alt text is critical while consuming content. Without it, a user’s screen reader can let the user know that there’s an image there, but it won’t be able to describe the image or any information that the image provides.

Accessibility is important. You’ll have readers, subscribers, and customers of all walks of life with varying capabilities and experiences.

If you can minimize the number of hurdles they have to leap over to engage with you and your brand, you should.

Going back to the different reasons why an image may fail to load or appear, sometimes technology just fails us. But people are still going to try and process your content the best they can.

The present alt text saves them the headache of trying to guess what may be sitting in that empty space on the page. Is it important? Is it decorative? If they need access to the information in that image in order to better understand the rest of the content, then make sure you supply it to them, with or without a solid internet connection.

How to Write Alt Text for Your Images

When you view the source code of your page, you can identify where the image is by looking for a line of code similar to this one:

Do you see where it says “alt="alt-text-example-1.jpg"”? That’s where your alt text lives. The actual image looks like this:

Clearly, “alt text example 1” isn’t exactly an all comprehensive description of everything happening in the image. But what it does describe is the context and purpose of the image. The user doesn’t necessarily need to know every line of text in the image since, in reality, that’s not what’s important.

The image is just an example of alt text in action.

When deciding what to fill in there, it’s important to consider what you’re looking to communicate to the user. You want to be detailed, but you want to be relevant.

So where’s the line of being too descriptive and falling out of context? 

If you can describe what’s important in the image in a single sentence, then you’ve hit the sweet spot. It’s not a great idea to list out every single, minuscule detail, but you also don’t want to be too shallow.

For example, there’s a difference between “cookie” and “gooey melting chocolate chip cookie with 20 chips on a porcelain plate with floral detailing.”

It’s not about one extreme or the other. A great happy medium would be “plate of fresh baked chocolate chip cookies”.

At times, an image not actually serve any sort of purpose. It’s purely decorative and isn’t communicating any important information. Those are the few instances when it’s actually okay to leave your alt text empty, like this:

<img src="image.png" alt="">

The user will assume that it’s nothing of relevance sitting there if it doesn’t load properly.

How to Add Alt Text to an Image

It’s really easy to add alt text once you know where it’s meant to live in your HTML code. It’s even easier if you’re using software, like HubSpot’s CMS, that allows you to click on an image to optimize it or access its rich text module.

If the software provides a menu for it, locate the field specified for the alt text and enter it there.

If you’re left to your own devices working in HTML, then do a quick search of your image’s file name. Plugging in that short snippet of code is all that’s necessary to implement it into your images. Here’s a generic, default line to use:

<img src=“image.jpg” alt=“image description”>

10 Tips to Optimize Your Alt Text

Whenever you aim to optimize anything, it’s a good idea to look into best practices. There’s rules to everything across the internet, and if you’re not up to speed on what’s happening, then you’re written off as a waste of digital space.

Here are some tips to perfecting your alt text game that will have your content one step closer to perfection:

1. Keep It Short.

It needs to be simple and concise. Users are looking for a quick description that’s easy to digest. The average screen reader cuts off after 125 characters, so aim to stay under that.

2. Remember Relevance.

Even though you’re looking to keep it short and sweet, it still needs to be contextual. Make sure the alt text is communicating relevant, valuable information to the user and not just acting as a placeholder.

3. Repeat Text in the Image (As Necessary).

If your image has any sort of necessary text within that will improve user experience, then include it in the alt text. This isn’t always necessary, so make sure you take a beat to consider relevance and context.

4. Never Stuff Keywords.

Keyword stuffing is never a best practice in any form or fashion. It looks unattractive and most search engines will penalize you for it. Don’t do it.

5. Don’t Use Quotes.

Your raw HTML uses quotation marks to identify where your alt text begins and ends. Any additional quotation marks will cause the HTML to break.

6. Never Use an Image as Text.

When you learn how alt text populates on a web page, you may get the idea to use it as a replacement for text in sentences. Again, don’t do it. It looks absolutely ridiculous to have a thought interrupted by an image in the middle of a paragraph.

7. Be Specific.

You want to be as accurate as possible when describing the image. Use descriptive words that are really going to get the point across.

8. Remember Your Buttons.

It’s not uncommon to have an image act as a button on a page. If you have any serving this purpose, you’ll still want to give it an alt tag. Simply describe the function of the button, like “submit,” “search.” or “apply now.”

9. Indicate Decorative Images.

We said earlier that you can leave design image tags empty, but you can also be explicitly clear about it by simply marking the alt text as “decorative image.”

10. Test Everything.

It doesn’t take all that long to look at a quick preview of the page once you’ve finished adding all your alt text. It would suck to do all of that work and then none of it actually populates correctly.

Always, always, always test a page whenever you’ve done anything with the HTML code.

3 Alt Text Examples

It can help to see what's right and what's wrong when deconstructing what you need to do to master something as important as alt text.

We've broken down three alt text examples to clearly define what's good and what's just plain ugly.

Keeping Up with Keywords

Let's say the keyword we're trying to rank for is "Halloween." That term can be pretty tricky since it's not a tangible object, it's just a concept. An idea.

So, the easy way would be to stuff it in to the alt text as best we can, right?

<img src=“fake name.jpg” alt=“halloween fall season pumpkin bucket and candy”>

This is a terrible way to go about it. Sure, we used relevant words that relate to the image, but we haven't actually provided any context to the user.

A much better alt tag would be:

<img src=“fake name.jpg” alt=“A pumpkin bucket spilling halloween candy and spooky toys”>

See the difference?

Soft on Specificity

Source: SFGate

Okay, so we get that we need an actual sentence and not just a scramble of keywords that we feel make sense. We know to be specific and contextual.

So let's give this one a shot:

<img src=“another example.jpg” alt=“two basketball players stand close to each other”>

This is better than what we were trying for before, but it's still not quite there. Remember when we said you should be specific where you can?

In this image we have two known basketball players, Steph Curry and D'Angelo Russell, who both play for the Golden State Warriors. And they appear to be in the middle of a game, discussing plays.

<img src=“another example.jpg” alt=“Steph Curry and D'Angelo Russell discuss plays during a basketball game”>

This is a lot more specific and lets the user know exactly what's going on, instead of a general "two players" situation.

Constructing Context

This image is a great example of instances when a picture doesn't have clear context. This is pretty common in stock images, where you're allowed to interpret it however you'd like.

We'll go over how to write alt text for two different use cases.

Let's say the first is meant to be seen as a workshop.

<img src=“fakeity fake.jpg” alt=“Marketing professionals attending a workshop on blogging best practices”>

Pretty clear, right?

Now let's interpret it as an internal presentation at a company.

<img src=“fakeity fake.jpg” alt=“A sales team attending a pipeline review presentation”>

With certain images you're able to build your own context and write whatever story suits your content best.

Have Your Cake and Eat it Too

The secret to great alt text is knowing that the marketing and accessibility methods to coming up with alt text aren’t mutually exclusive.

You can (and should) sprinkle keywords into your alt text descriptions as long as they don’t interfere with the clarity of the message.

This nets you the best of both worlds with clear textual descriptions of images for visitors who can’t view them, while also getting your site some of that sweet, sweet SEO juice.