What Is Alt Text?
Alt textual content (different textual content) is a written description of an internet picture that gives an different when the picture is inaccessible to the person.
Alt textual content offers display readers one thing to learn aloud to customers with visible impairments, helps search engine bots perceive picture contents, and will seem on a webpage when the picture fails to load.
(This is in distinction to an picture caption. Which at all times seems on the web page.)
Alt textual content is often added by way of the alt attribute in a picture’s HTML code.
Like so:
alt=“Alt text goes here”>
That’s why it’s generally referred to as the “alt attribute” or “alt tag.”
Most content material administration programs (CMSs) have a devoted area for alt textual content. So you don’t have to edit the HTML straight.
Here’s an instance from WordPress:
You may also use picture alt textual content on social media platforms like Twitter.
Here’s an example from Dogs Trust:
Why Is Alt Text Important?
Alt textual content is essential as a result of it makes photographs extra accessible to individuals and search engines like google and yahoo. Even once they can’t be displayed.
If you don’t present acceptable alt textual content, individuals utilizing display readers can’t get info from photographs. This unfairly excludes customers with visible impairments. Which can hurt your model repute, site visitors, and conversion price.
Plus, internet accessibility is sweet for SEO.
Google and different search engines like google and yahoo use alt textual content to find out what photographs painting (or hyperlink to). This can improve their understanding of your content material and subsequently result in increased rankings.
Alt textual content is especially useful for picture SEO—i.e., rating excessive in Google Images and different picture outcomes.
This kind of publicity can drive priceless site visitors to your website.
For instance, the search engine outcomes web page (SERP) for “corgi puppies” is dominated by photographs. Which hyperlink by means of to the homeowners’ websites.
Many of those photographs use the key phrase “corgi puppy” or “corgi puppies” of their alt textual content.
Because alt textual content is essential in on-page optimization, it’s generally known as “SEO alt text.”
How to Write Alt Text (Best Practices)
Learn the way to write alt textual content that improves your website’s accessibility and SEO.
We’ve rounded up three alt textual content finest practices that will help you write excellent alt textual content:
1. Add Alt Text to the Right Kinds of Images
Don’t write alt textual content for purely ornamental photographs (just like the one under). These descriptions could cause distraction and confusion for customers with visible impairments, moderately than including helpful context.
Instead, present a null (empty) alt attribute. Like so:
This tells screen readers to ignore the image.
If you leave out the alt attribute altogether (as below), assistive technologies may read out the image file name instead. Creating a poor user experience.
Do write alt text for all other images—images that provide additional meaning to the reader.
For example:
- Images of useful text (e.g., screenshots of social media posts)
- Icons that denote functionality (e.g., shopping cart icons)
- Photos that provide supplementary information (e.g., a smartphone size comparison)
- Charts that illustrate otherwise unmentioned data
- Graphics that demonstrate processes (e.g., how to hold chopsticks)
Tip: If you draft content in Semrush’s SEO Writing Assistant, the tool will remind you to add image alt text. It also provides readability, SEO, originality, and tone of voice suggestions.
2. Be Descriptive Yet Concise
Alt text should be “the most concise description possible of the image’s purpose,” according to the Web Accessibility Initiative (WAI).
What’s important about an image depends on context. So take the surrounding content and audience into account when writing alt text.
Consider the photo below. The alt text “Woman doing yoga” would be appropriate in many contexts.
But in a workout guide, a detailed description of the woman’s pose could be necessary.
When writing alt text, think about how you’d describe an image to someone in a phone conversation.
Don’t include the following details in your alt text:
- Photo credits and copyright information—include in the image caption instead
- Redundant phrases like “image of” or “photo of” (unless the format is particularly relevant)
- Information that all your readers need—add this to the caption or body content instead
- Information that’s already provided via the image caption or body content
Tip: Some people recommend sticking to a maximum of 125 characters when writing alt text for images. That’s because many assistive technologies stop reading alt text at 125 characters. But it’s not a strict limit. If you need to write much more, see the WAI’s advice on complex photographs.
3. Include a Keyword
Adding relevant keywords to alt text can help your images rank in Google image results.
For example, this alt text tells Google that our marketing funnel guide contains a helpful marketing funnel illustration:
Meaning it would be a relevant Google image result for queries related to marketing funnels.
To understand which keywords to include in alt text, you’ll need to do some keyword research.
Try conducting keyword research with Semrush’s Keyword Magic Tool.
Just enter a keyword related to your image then click “Search.”
Go to “Advanced filters” then “SERP Features.”
Then verify “Image” and “Image pack” earlier than clicking “Apply.”
The tool will show keywords that contain your starting keyword (or a variation) and generate image results.
These words and phrases are great candidates for your image’s SEO alt text. As long as the image will meet searchers’ needs.
Alt Text Examples
Let’s look at three alt text examples that follow best practices.
Example 1: NASA
This blog post is about a photo taken by the Hubble Space Telescope. NASA provides highly descriptive alt text to ensure users with visual impairments can understand what’s in the photo.
Alt textual content: Spiral galaxy with vivid core, spiral arms, and a slight glow surrounds it. Below, strands manufactured from vivid blue patches path down like tentacles. Galaxy is simply touched by a second, faint galaxy on left.
Example 2: Bureau of Internet Accessibility
The Bureau of Internet Accessibility homepage features logos of the brands it’s worked with.
When customers don’t have entry to those photographs, the alt tags present a substitute.
Example 3: The Guardian
In this product review, The Guardian uses alt attributes and image captions to give readers and search engines the information they need.
- Alt text: The back of the Pixel 7 Pro showing the aluminium camera bar.
- Image caption: The camera bar design still divides opinion but there is no doubt it stands out against the crowd. Photograph: Samuel Gibbs/The Guardian
Notice that the alt text acts as a replacement for the image. Whereas the caption provides extra information, such as the photo credit.
How to Find & Fix Missing Alt Text
To check if there’s missing alt text for images on your site, use Semrush’s Site Audit tool.
Enter your domain and click “Start Audit.”
Then observe the prompts to configure the device.
Once the audit is prepared, click on on the “Issues” tab.
You’ll see an inventory of errors, warnings, and notices.
Search for “alt attributes.” Then see in case you have the “# images don’t have alt attributes” warning.
If you do, click on the “# images” hyperlink to see affected URLs.
Click the “open link” icon beside every web page title to view any web page or picture.
Found a picture that doesn’t want alt textual content? Click the attention icon to cover the warning.
Or use the filters, verify bins, and “Hide selected” button to take away warnings in bulk.
Ready to work in your alt textual content? Use the verify bins and “Send to…” button to create duties within the Semrush CRM, Trello, or Zapier. (You might have to arrange the corresponding integration first.)
Then add lacking alt textual content by way of your CMS.
Make positive to rerun your Site Audit afterward. Just click on on the gear button and hit “Rerun campaign.” And watch your picture alt textual content warnings disappear.
