ALT alt text fix for WordPress images


When uploading images via WordPress in the default mode, the alt text “ALT” for images is not specified automatically. Images must be available even if no text is specified, in other words, an empty tag

alt=""

In this case, no errors will appear when checking the standard specifications for a particular article, but it is not a good idea, especially if you focus on search engines.

Alt text provides Google with useful information about the subject of the image. We also use this information to help determine the best images that can be shown based on a user’s search query.

Excerpt from Search Console Help

By the way, the problem with the alt text did not appear in the old versions of WordPress. I don’t know in which version exactly they removed the tag, but in version 4.7 I think the tag appears with the image, but it is empty

Illustrations of the alternate text problem

The first image when uploading images, the alternative text is not selected

image upload empty alt attribute - WordPress Magazine

The second picture, when checking the standard specifications for a specific page, shows errors

Nu Html Checker img alt missing - WordPress Magazine

How to fix alt text

For me, I tried two add-ons, but to no avail, the first did not show me any change in the images, and the standard errors kept appearing, and the second needed to re-upload the images again, and this is a cumbersome work, of course, for the two add-ons that I tried are as follows:

  1. Add SEO Friendly Images
  2. Add Format Media Titles

There are other add-ons that I have not tried, but I tried one of the hacks and it turned out that it only adds an empty tag, and this is not what I was looking for. The important thing is that the hack was like this:

/*
* Add Missing Alt Tags To WordPress Images : paulund.co.uk
*/
function add_alt_tags($content){
global $post;
preg_match_all(‘/<img (.*?)\/>/’, $content, $images);
if(!is_null($images)){
foreach($images[1] as $index => $value) {
if(!preg_match(‘/alt=/’, $value)) {
$new_img = str_replace(‘<img’, ‘<img alt="’.$post->post_title.’"’, $images[0][$index]);
$content = str_replace($images[0][$index], $new_img, $content);
}
}
}
return $content;
}
add_filter(‘the_content’, ‘add_alt_tags’, 99999);

Hack website source:  paulund

I modified it to extract words from the image name, for example, if the image name was Search-Console-Remove-URLs-Submit-request.jpg, the hack will extract the words to become as follows: Search Console Remove URLs Submit request with adding the site name at the end of the alternative text in case If the image contains the image size, for example 150 x 150, it will remove these numbers as well, so that the alternative text becomes useful for your site in search engines

1/*
3* Add Missing Alt Tags To WordPress Images : advanced
4* source : https://www.mwordpress.net/repair-alternative-alt-text-for-wordpress-images/
5* Mwordpress.net – مجلة ووردبريس
6*/
7function fill_alt_tags($content){
8
9global $post;
10preg_match_all(‘/<img (.*?)\/>/’, $content, $images);
11
13$site_name = get_bloginfo(‘name’);
14
15$char_array = array();
16$char_array[] = ‘-‘;
17$char_array[] = ‘_’;
18
19if(!is_null($images)) {
20foreach($images[1] as $index => $value) {
21
22preg_match( ‘/src\s*=\s*([\'”])?((?(1).+?|[^\s>]+))(?(1)\1)/’, $value, $source );
23
24// ALT tag : Not Found
25if(!preg_match(‘/alt=/’, $value)) :
26$file = preg_replace( ‘/\-*(\d+)x(\d+)\.(.*)$/’, ‘ ‘, $source[2] );
27$filename = pathinfo($file, PATHINFO_FILENAME);
28$text = str_replace( ‘/\-*(\d+)x(\d+)\.(.*)$/’, ‘ ‘, $filename );
29$title = str_replace( $char_array, ‘ ‘, $text );
30$new_img = str_replace(‘<img’, ‘<img alt=”‘.$title.’ – ‘.$site_name.'”‘, $images[0][$index]);
31$content = str_replace($images[0][$index], $new_img, $content);
32endif;
33
34// ALT tag : Empty
35if(preg_match(‘/alt=/’, $value) and strpos($value, ‘alt=””‘)) :
36$file = preg_replace( ‘/\-*(\d+)x(\d+)\.(.*)$/’, ‘ ‘, $source[2] );
37$filename = pathinfo($file, PATHINFO_FILENAME);
38$text = str_replace( ‘/\-*(\d+)x(\d+)\.(.*)$/’, ‘ ‘, $filename );
39$title = str_replace( $char_array, ‘ ‘, $text );
40$new_img = str_replace(‘alt=””‘, ‘alt=”‘.$title.’ – ‘.$site_name.'”‘, $images[0][$index]);
41$content = str_replace($images[0][$index], $new_img, $content);
42endif;
43
44}
45return $content;
46}
47
48}
49add_filter(‘the_content’, ‘fill_alt_tags’);

As for the hack, it is included in the functions.php file to make it work for you

A simple add-on has been made that you can install and activate in case you are not familiar with dealing with codes, download the add-on:

Plugin : Add Missing Alt Tags

The important thing is this is the method that was used to solve the “alternative text” problem for images in WordPress. This method will be included in the templates that I design in the next updates, God willing. There is no need to add it currently in the templates for the WordPress magazine

Here, we have finished explaining how to fix the ALT text for WordPress image

Leave a Comment