Search engines and robots cannot describe images, but images play an essential part in describing a particular website or article. That’s why the alt-alt text tag solves this problem by providing text that search engines can read.
So what exactly is Alt text? How to understand and how to make good use of alt text in the lesson? EQVN will answer your questions right in this article!
Table of Contents
1. What is Alt Text?
Alt Text there are alternative text is an image description in a web page’s HTML code that provides information about the image’s appearance and function. Alt text is also known as “alt attribute” or “alt tag”.
This is what it looks like in HTML code:
Description of the alt text of an image
2. Why is alt text important?
Alt text has two main purposes:
- To improve the user experience (CX) and accessibility of the website
- To improve website’s image SEO and ranking
2.1 – CX and accessibility
The original purpose of alt text was to describe an image for visually impaired people who could not see what was on the image and thus make it more accessible to them.
These visitors use different screen readers or browsers to help them better understand what’s on the site, including images.
Instead of showing the image to the user, a screen reader looks at the alt text of the image and reads its contents. As a result, users can understand what is on the image and get a better overall experience.
2.2 – Image SEO
Alt text isn’t just important from a UX perspective; it can also improve on-page optimization and topic relevance.
Search engines like Google can’t really “see” the image so they can misinterpret its purpose or context within the web page.
Therefore, they use alt text as a way to better understand the image and how it relates to the surrounding content.
As stated in the Image best practices by Google :
“Google uses alt text together with computer vision algorithms and the content of the page to understand the subject matter of the image.”
The most important reason to use the alt attribute is that alt text can help images appear and rank in Google Images.
With a good alt text description and correct keyword usage, images can:
- Improve the thematic relevancy of the page
- Serves as a potential ranking signal for Google
Note: Unnecessary alt text is only used for images on web pages.
You can also add alt text to images on social networks (Facebook, Twitter, or even images in email templates) and improve accessibility.
Model of the topic cluster of keywords for the website
3. Alt text best practices
When writing a good alt text, several factors need to be taken into account.
Remember: The purpose of the alt attribute is to help visually impaired people understand the content of the image as well as to help search engines like Google crawl and index your image correctly.
Here are common practices and rules that will help you achieve these two goals.
3.1 – Please describe
Alt text should always be as specific and precise as possible.
You should write a clear and objective description of the image so that any person (or search engine) who cannot see the image can have a clear idea of what is in the image.
If it makes sense, try to add an appropriate keyword phrase to the alt text – it will signal to search engines that the image (or overall web page) may be eligible for queries. certain search.
If the image itself contains important text, it must also be transcribed as an alt attribute – unless it is in the text surrounding the image.
Do SEO for image alt text
3.2 – Be brief
Alt text should be short and concise – a few words at most. While the text should be as specific and descriptive as possible, it shouldn’t be written in lengthy sentences. Users may find long alt texts annoying and exhausting.
Besides, most screen readers or browsers don’t read alt text longer than 125 characters.
Note: If you need to use a much longer description to fully and accurately describe the image (for example, a graph, chart, or map image), you can use “longdesc” attribute as a reference to the longer description page.
3.3 – Avoid keyword stuffing
Don’t stuff keywords in alt text just for the sake of it. Filling in alt text with lots of irrelevant keywords can degrade the user experience.
Furthermore, keyword stuffing can be a signal to search engines that your site is spammy and not very useful to visitors.
Always focus on an honest description of the image first and then (if possible) add a relevant keyword to that image.
3.4 – Do not use “images of…”
Screen readers and search engines assumed the description belonged to the image. So there’s no need to use the phrase “picture of…” – just start writing the actual description of the image.
On the other hand, you can describe the type of image if it is necessary (eg illustration of…, painting…, chart, etc.).
4. Example of a good alt text
Writing a good alt text doesn’t have to be complicated. Here are three examples that will demonstrate different types of alt text for images.
Example 1
- Bad alt text: alt = “La Fiesta Mexican restaurant top meals Restaurant serving Mexican dinner”
The first example is a common practice to write alt text as it is just filled with keywords without any proper description.
Always avoid keyword stuffing as it doesn’t bring any value to visually impaired users and only hurts your website from an SEO perspective.
- Alt text is: alt = “La Fiesta Restaurant”
This example is a bit better because it provides a general description of the picture and doesn’t contain spammy keywords.
On the other hand, it’s not the best alt text because it’s not too specific and doesn’t provide a detailed description of the image.
- Best alt text: alt = “La Fiesta Authentic Mexican Restaurant Sign”
This is probably the best alt text you can write – it’s very descriptive, the text from the image is transcribed, and it also tells the user that it’s the “sign” of the restaurant, not the restaurant itself. restaurant.
Example number 2
- Alt text xấu: alt = “guitar”
While this example isn’t necessarily the worst alt text you can write, it’s not a good one either.
The alt text is short and tells the visitor what’s on the image, but it’s not descriptive and rather vague (we don’t even know what kind of guitar it is).
- Alt text is: alt = “Les Paul guitar”
This example is a bit better because it informs us about the brand.
On the other hand, it still isn’t very specific and descriptive, especially when it comes to products like guitars.
- Best alt text: alt = “60s Epiphone Les Paul Standard Iced Tea”
This is the most descriptive and accurate alt text you can use for images. It tells the user what kind of guitar it is, what model it is, even what its color is.
It is good practice to be very specific about product images, especially for e-commerce sites with many different product pages.
Example: 3
- Alt text xấu: alt = “”
Since the example doesn’t contain any text, it’s impossible for a visually impaired visitor or a search engine to know what the image is about.
With a few exceptions (see below), you should always fill in the alt attribute with some descriptive text.
- Alt text is: alt = “Snorkeling in the sea”
The description in this example can be considered good and relatively accurate. But it’s still a bit abstract and ambiguous. The context of the image is missing, and the visually impaired visitor can envision something completely different.
- Best alt text: alt = “Divers discover wreckage of an airplane”
Here is a much better alt text example when compared to the previous example. It provides accurate descriptions with context in mind and is therefore immediately clear what is in the image.
5. How to Add Alt Text in WordPress
Adding alt text to images in WordPress is a pretty easy and straightforward process:
- Open a new or existing post/page in your WordPress editor
- Upload an image or click on an existing image – it will open the image settings in the sidebar
- Click on the empty alt text box and add alt text
- Click the “Update” button
Another way to add alt text in WordPress is through Gallery » Media
Simply upload a new image and click the “Edit” button – you will access the image settings where you can add alt text.
6. Is it always necessary to use alt text?
Adding alt text to your images is a good practice in most cases. But there are some exceptions when it is not necessary or even recommended.
Let’s look at a few situations when you should leave the alt tag blank.
6.1 – Illustrations have no useful content
Many websites use illustrations or archived images for aesthetic purposes or just as a visual element familiar to the visitor.
While these types of images may look good and serve as decorative paintings that convey some emotion or feeling, they do not provide any useful content to the visitor.
6.2 – Image surrounded by descriptive text
If an accurate interpretation and description of the image is presented in the surrounding text, then an empty alt attribute (alt = “”) is probably the best practice because writing the same information in the alt text will is superfluous.
Take a look at this example from the tutorial for our SERPWatcher tool:
The description of the image has been provided in the text right above the image.
Although we could write a short descriptive alt text (e.g. “Desktop/Mobile Switcher in SERPWatcher”). It will be quite useless to the user – the information from the image will be repeated twice.
6.3 – Decorative images
Decorative images, icons, visual spaces, etc. should always have blank alt text (alt = “”).
These types of images do not carry any important information – their sole purpose is to improve the visual appearance of the website.
Here is a simple example of decorative elements:
Internal links in the main menu of the website
Small icons just act as visual elements in the top menu.
As images, they do not convey any content or provide any information that needs to be read to the visitor via alt text.
The null alt attribute (alt=””) is therefore appropriate – any other description would be rather confusing, unnecessary, or offensive to the user.
Note: While it’s a good idea to leave the alt text for decorative images blank, it’s best to remove them from your site’s HTML entirely and use them as a background via CSS.
Series of important articles:
:
