How can I automatically add the image "alt" attribute using image filename if it is missing, using php?

Question

I need to add an image alt tag to hundreds of images. Problem is this would take forever and anyway there seems to be an easier solution.

I have been able to achieve this somewhat using javascript, as follows:

<script type='text/javascript'>  
 //<![CDATA[  
 $(document).ready(function() {  
  $('img').each(function(){  
   var $img = $(this);  
   var filename = $img.attr('src')  
    if (typeof attr == typeof undefined || attr == false) {
        $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
    }  
  });  
 });  
 //]]>  
</script>

What this does is exactly what I want, so for example if I have this image:

<img src="http://mywebsite.com/images/the-image1.jpg" />

then the javascript will add the alt automatically like this:

<img src="http://mywebsite.com/images/the-image1.jpg" alt="the-image1" />

Well, that is all fine and dandy, but now I want to do it with PHP instead, because the problem is that this is only adding the tags into the front end which means it isn't visible from page source (only inspect element), which means that the search engine won't see the alt tag, which means that the only way to do it is to put it right into the page using php.

So how can I do my above javascript solution using php?

Answer 1

Does the filename consistently provide a meaningful slug? If not, you are better off just having empty alt tags. Web crawlers are already getting the image filename, so adding the last bit is only going to help if it is actually descriptive of the image. (It's also not 100% true it won't be indexed via JS, some bots, notably Google, do parse JavaScript to some degree.)

If the filename is not descriptive, it's probably going to do more harm than good (for SEO and screen readers). I assume you either are or will give descriptive filenames if you plan to use this scheme moving forward.

I'm assuming the images aren't content-managed in some way that you could pull from a caption or description for alt (and/or longdesc) attribute?

If it's a one-off fix, again depending on the quality of the naming, it might be ok. A few hundred images might not take that long, and there is always [advert removed] :)

Alternative text serves several functions:

• It is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.
• It is displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.
• It provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone.

http://webaim.org/techniques/alttext/