Image links have an alt attribute that reflect their purpose

[Solved] Yoast SEO: Images on this page do not have alt attributes that reflect the topic of your text

Yoast SEO is a plugin we usually installed when we use WordPress to build our website. Its biggest use is to help use confirm whether the currently edited article complies with Search Engine Optimization.

Generally, the better the SEO, the higher the ranking in Google search.

After activating Yoast SEO, we will see the plugin field under the WordPress editor.

Yoast SEO in the WordPress editor

It can help us edit the keywords, the Meta of the article description. and score according to the structure of our articles. Among them, presumably many people will encounter Yoast SEO when they use the following warning message:

And this article is taking about the explanation and introduction of this «improvable message», and how to improve it step by step.

The «alt» attribute on the image

The first thing we need to know is that this message is telling us that the alt attribute of the «picture» in this article does not reflect the subject of the article.

What is the alt attribute?

The alt attribute is a parameter of the image in HTML, and it is the remedial text when the HTML image object cannot be displayed normally-that is, if the image does not appear, it will be presented with the description of the alt attribute.

Yes, the alt attribute is actually just a text description, and its main function is to introduce this picture. What Yoast SEO reminded is that you hope your alt attribute can fit the subject of the article.

Set image alt attribute

So, where should the alt attribute of the image be set? There are roughly two ways to set it.

1. The sidebar of the WordPress editor

Click on the picture in your article, and then open the «Block» field of the gear icon on the right, and the «Alternative Text» block under «Picture Settings». This block of alt text is the alt attribute.

2. Ctrl + Shift + Alt + M to edit HTML file

There is another very quick method: use Ctrl + Shift + Alt + M to switch to the HTML format editor, Ctrl + F to search all alt=»» fields, and fill in the required alt attribute descriptions in sequence.

Both of the above methods can give the image the alt attribute. After filling in, let’s take a look at Yoast SEO’s improvement information:

The green light is already on, and you’re done!

Image alt attribute best practices

What exactly is the intended use of the alt attribute on tags?

Should it describe the image, or should it provide meaningful replacement text for screen-readers (and people who have images turned off)?

For example, if I have a short biography of a person on my website, and include a small photo of them, is it really meaningful to visually impaired users to have «Photo of John Smith» read out to them?

10 Answers 10

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

The HTML 5 spec has a huge section on this.

I think the idea is to use the alt text to communicate the same information as was intended with the image. This depends on what the image is.

Navigational elements are perhaps better described by their function («next page», «back») than their appearance («right arrow»).

The photo of John Smith might be replaced with a description of John Smith, or a description of the event taking place, etc.

While alternate text may be very helpful, it must be handled with care. Authors should observe the following guidelines:

Its provides «alternate» text if the image could not be loaded for some reason. In your example I would say yes it would be appropriate.

The «alt» attribute is an alternative (textual) representation of the semantics of the image. This is not just used for images that can’t load: it’s also used for screen-readers or text-only browsers.

In your particular case, including the alt-text kind of depends on whether you think it’s important to note that the page contains a picture of the person or not. If it’s a purely visual item, you may not want any alt-text. If it’s also used as a link of some sort, you probably do want some alt-text so that a person using a screen-reader has some clue about what following the link might do.

first hit on google for this [img alt accessibility] gives Consider what the page looks like or sounds like when images are not shown. Then, write for each image an alt text that best works as a replacement (Guidelines on alt texts in img elements)

Issue an alt attribute for image in HTML

I have an one doubt in in HTML. When add image in HTML, the alt attribute is need or not.

But I know the use of alt atrribute, when remove this attribute, there is no change in my web page.

So I want to know the alt attribute is needed or not?

3 Answers 3

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

Switch to Trending sort

The alt tag is used to make your website more accessible to those using screenreaders and such or non-visual browsers, as they won’t be able to view the image.

If you have an alt tag, it will be used instead.

A text equivalent brings the following benefits to your web site and its visitors in the following common situations:

Nowadays, Web browsers are available in a very wide variety of platforms with very different capacities; some cannot display images at all or only a restricted set of type of images; some can be configured to not load images. If your code has the alt attribute set in its images, most of these browsers will display the description you gave instead of the images.

Some of your visitors cannot see images, be they blind, color-blind, low-sighted; the alt attribute is of great help for those people that can rely on it to have a good idea of what’s on your page.

Search engine bots belong to the two above categories: if you want your website to be indexed as well as it deserves, use the alt attribute to make sure that they won’t miss important sections of your pages.

The alt attribute is required according to the HTML 4.01 specification, but your page will display whether the alt attributes are present or not. It will only display differently if you turn off image loading in your browser.

It’s up to you whether you’d like to make your website more accessible to those not willing or able to view images or not.

ALT attribute not found for images in galleries #12057

Comments

RolfKyburz commented Jan 17, 2019

Please give us a description of what happened.

My blog post (draft) has

Nevertheless, the analysis result claims that only one image has an ALT attribute with the key phrase

Please describe what you expected to happen and why.

How can we reproduce this behavior?

Technical info

Used versions

The text was updated successfully, but these errors were encountered:

Djennez commented Jan 18, 2019

I was unable to reproduce your problems. I created a new post with different images and galleries and used the keyphrase only on one single image and in all gallery images. There is no warning about the alt text and Image alt attributes: Good job! is shown.

Are there any other matters on your website or in this particular post that might influence this? Were you able to recreate this issue with an empty WordPress install with only the necessary components (WordPress, Classic Editor plugin and wordpress-seo)? We can only investigate this issue if we are able to recreate it.

RolfKyburz commented Jan 18, 2019 •

RolfKyburz commented Jan 26, 2019 •

Image alt attributes: Out of 12 images on this page, only 1 has an alt attribute that reflects the topic of your text. Add your keyphrase or synonyms to the alt tags of more relevant images!

I have the sneaky suspicion that the problem is related to the keyphrase having a dash in it. or is this because the title of my post has «Piano Recital» preceding the keyphrase.

Image Alt Attribute– Relevant for SEO and Usability?

Images are used for various purposes on the web. On a standard website, graphics are used for navigational buttons, bullet points, icons, text graphics or other ways to supplement the text. Most users of the web are able to understand and interpret images by looking at them but there are many users that are unable to view them. They are as follows:

HTML provides us with the image alt attribute to describe the image in readable text format. This helps to compensate for these situations where people or bots cannot interpret the image content. The following is an example of the image alt attribute:

Image alt attribute is certainly significant for SEO and usability. It serves the users mentioned above with enriched website usability and also returns images in relevant search results due to enhanced site SEO. The following is a screenshot from Google Image search for the keyword ‘watches for men’. These are images that have alt text containing the words ‘watches’ and ‘men’ in various combinations.

The following are some factors that help to optimize your images for usability and SEO.

Tips For Your Images:

Use images in the following formats – BMP, GIF, JPEG, PNG, SVG and WebP.

Ensure that the image file name is descriptive of the image content and not a generic name, such as DSC099778.jpg.

Google crawlers usually index images of all sizes but keeping the file size within a certain limit will help your pages load faster. You can do this by cropping any extra white space in the image and reducing the number of colors in the image (do this using Photoshop). Make sure the total size of the page is under 100Kb. You can use online photo resizing tools like Smush.it or ShrinkPictures.com or any photo editor of your choice.

If you have important text, ensure it is not embedded in the image itself. It must be kept in regular HTML.

Specify the height and width of an image. This allows the browser to know the size of the image and it ensures that the space reserved for the image does not change when the page is loading. An example is shown below:

Tips For Your Alt Text Content:

Image alt attribute must contain keywords, but in a readable format. Avoid stuffing keywords, as shown in the example below:

If you have multiple images of the same category of products, such as mens watches, try and differentiate the alt text of each image by specifying the type of the product. Avoid repeating the same alt attribute for all images on a page.

Alt attribute can be the same as that shown on navigation tab images. For example, if a navigation tab reads ‘About Us’ let the alt attribute also be ‘About Us’.

Use ‘Company Logo’ for your website’s logo image alt text. Some describe the alt attribute as the destination of the link on the logo as ‘Back to Home’. It is advised to use the description of the image rather than using the destination it leads to.

HTML for images contains title tags and alt tags that are often confused with each other. While title tag content is for human readers, the alt attribute is for search engine crawlers. Hence, title text can be written to direct a reader, for example, click here to see more men’s watches, while an alt text is strictly meant to describe the content of the image in context, for example, designer men’s watch.

If you have a text image in a specific font style, use the same word/words as its alt attribute.

Use the null alt attribute for spacer images. These images are meant to be invisible and used to create space in the web layout. It is advised to use the null alt attribute rather than not using an alt attribute at all for these spacer images. Null alt attribute is declared in the following format:

Use null alt attribute for bullets, icons and decorative images. Ideally you can include bullet and icon images in your site’s CSS, this will remove the need for alt description completely.

Tips for SEO:

Google tries to understand the content of the images by the text and keywords surrounding it. Therefore, ensure you place your images where they are relevant to the site content.

Google also tries to interpret the content of the image by the anchor text to which it is linked. For instance, if your site’s image is linked by the anchor text ‘watches for men’, then that image is optimized for searches.

The page title (where the image is found) is also considered by Google search engine crawlers.

Submit image sitemaps to search engines as this helps search engines index your images in a much more organized fashion. It will also help search engines decide which images on your site are important. Use image-specific tags in your existing sitemaps or use third party image sitemap generators such as Inspyder or A1 Sitemap Generator.

It is always better to use alt attribute in all the above forms rather than not at all. Search engines can index your images much better with the alt attribute and you can gain search traffic to your site simply by assigning appropriate alt text to your images. By enhancing the usability of your site you enrich the user experience and that indirectly improves your site’s SEO. Thus, ultimately with the proper use of image alt attribute you positively affect search engine rankings of your site.