Alt Text: What Is It And How Does It Work? - Semrush
Có thể bạn quan tâm
What Is Alt Text?
Alt text (alternative text) describes an image on a page. Alt text helps visually impaired people understand what the image shows, helps search engine bots understand image contents, and appears on a page when the image fails to load.
(This is in contrast to an image caption. Which always appears on the page.)
Alt text is typically added via the alt attribute in an image’s HTML code.
Like so:
<img src=“image-file-example.jpg” alt=“Alt text goes here”>
That’s why it’s sometimes known as the “alt attribute” or “alt tag.”
Most content management systems (CMSs) have a dedicated field for alt text. So you don’t need to edit the HTML directly.
Here’s an example from WordPress:
You can also use image alt text on social media platforms like Twitter.
Here’s an example from Dogs Trust:
Why Is Alt Text Important?
Alt text is important because it makes images more accessible to people and search engines. Even when they cannot be displayed.
If you don’t provide appropriate alt text, people using screen readers can’t get information from images. This unfairly excludes users with visual impairments. Which can harm your brand reputation, traffic, and conversion rate.
Plus, web accessibility is good for SEO.
Google and other search engines use alt text to determine what images portray (or link to). This can enhance their understanding of your content and therefore lead to higher rankings.
Alt text is particularly helpful for image SEO—i.e., ranking high in Google Images and other image results.
This type of exposure can drive valuable traffic to your site.
For example, the search engine results page (SERP) for “corgi puppies” is dominated by images. Which link through to the owners’ sites.
Many of these images use the keyword “corgi puppy” or “corgi puppies” in their alt text.
Because alt text is important in on-page optimization, it’s sometimes referred to as “SEO alt text.”
How to Write Alt Text (Best Practices)
Learn how to write alt text that improves your site’s accessibility and SEO.
We’ve rounded up three alt text best practices to help you write perfect alt text:
1. Add Alt Text to the Right Kinds of Images
Don’t write alt text for purely decorative images (like the one below). These descriptions can cause distraction and confusion for users with visual impairments, rather than adding useful context.
Instead, provide a null (empty) alt attribute. Like so:
✅ <img src="decorative-image-title.jpg" alt="”>
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.
❌ <img src="decorative-image-title.jpg">
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 images.
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 check “Image” and “Image pack” before 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 text: Spiral galaxy with bright core, spiral arms, and a slight glow surrounds it. Below, strands made of bright blue patches trail down like tentacles. Galaxy is just 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 users don’t have access to these images, the alt tags provide 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 follow the prompts to configure the tool.
Once the audit is ready, click on the “Issues” tab.
You’ll see a list of errors, warnings, and notices.
Search for “alt attributes.” Then see if you have the “# images don’t have alt attributes” warning.
If you do, click the “# images” link to see affected URLs.
Click the “open link” icon beside each page title to view any page or image.
Found an image that doesn’t need alt text? Click the eye icon to hide the warning.
Or use the filters, check boxes, and “Hide selected” button to remove warnings in bulk.
Ready to work on your alt text? Use the check boxes and “Send to…” button to create tasks in the Semrush CRM, Trello, or Zapier. (You may need to set up the corresponding integration first.)
Then add missing alt text via your CMS.
Make sure to rerun your Site Audit afterward. Just click on the gear button and hit “Rerun campaign.” And watch your image alt text warnings disappear.
Từ khóa » Html Alt Tag Meaning
-
What Is An ALT Tag? AT Internet Definition
-
HTML Img Alt Attribute - W3Schools
-
HTML Alt Attribute - W3Schools
-
Alt Text: Why It's Important For Accessibility & SEO - Moz
-
What Is An Alt Tag, And How Does It Impact SEO [2018]? | BigCommerce
-
What Is An Alt Tag - Definition And Examples - CoSchedule
-
Alt Attribute - Wikipedia
-
Image ALT Tag Tips For HTML - Accessibility At Penn State
-
What Is The ALT Attribute? - Raven Tools
-
What Is Alt Text (alternative Text)? - Definition From
-
Image Alt Text: What It Is, How To Write It, And Why It Matters To SEO
-
Alt Tag And Text For SEO: Definition And Best Practices
-
Image Optimization | Alt Text Definition, Tips, & Examples
-
Alt Tag Definition - Loomly Blog