jQuery Set Image TITLE from ALT Tag

This is a super-useful jQuery Script that gets the Image Title from the ALT Tag if no title is set with a fall-back to the image src.

jQuery(document).ready(function($) {
$("img:not([title])").each(function() {
if($(this).attr("alt") != '') $(this).parent().attr("title", $(this).attr("alt"));
else $(this).parent().attr("title", $(this).attr("src"));
});
});

Benefits of getting the Image Title from the Image Alt Tag

The benefit of setting the Image Title from the Image Alt Tag is for both improved SEO and also UX. Google likes Images Titles as they add a useful content readable tag to images and UX is improved as Image titles have an improved browser hover info. While it is good practice to further improve SEO by having slightly different Alt and Title tags on images this is such a huge time-saver that the benefits seriously outweigh any nominal SEO increase by updating both manually. 

Great for Webflow

Webflow, our favourite Website Builder, has native support for Alt tags for both static and dynamic images, so a quick addition of this code gives you Title tags as well. 

Can work on Links and Div

With a tweak of the target element, this code can also add a title to text links and divs that already have an Alt tag and no title. For example, for all links change the current ‘img’ target to ‘a’. We don’t advocate this usage as you wouldn’t expect a title hover on every link, but there may be some cases where it is useful. Let us know in the comments below if that’s the case!

About the Author
jQuery Set Image TITLE from ALT Tag 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.