Add Automatically Title/Alt tag to Images in Blogger

SEO optimization is very necessary for your blog. And you need to optimize all the elements of the site according to SEO. Image Alt tag is very important. Because google can't read the images, but google determines the type of image from its alt text. So, in order to get your image in Google Images search result you need to add the title and alt text to your images. So, here I am going to share another amazing blogger widget which will automatically adds the title and the alt text to all bogger images.


Have Lots of Images?

If you have lots of images, then it is very very time consuming and boring to add the alt and title text to each image one by one. To make this work easy I have designed a little plugin for blogger which will automatically adds the alt and title text to all images. Means you don't need to add the alt text manually. Just upload the images and you are done. The work of adding title and alt tag to images will done this plugin.

 Also if you have some old post images which are also missing the title and alt tag, then you don't need to add alt tag to images manually, this script will automatically adds the title and alt tags to all images of your blogger site. Great na!!

How to Add Automatically Title/Alt tag to Images in Blogger

Want to install this widget? if yes then follow the below simple steps:

Goto Blogger Dashboard

Goto Template Tab

Click on Edit HTML

Now search for the </body> tag

Now paste the below code just above the </body> tag.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> 

<script type='text/javascript'> 

 //<![CDATA[ 

 $(document).ready(function() { 

  $('img').each(function(){ 

   var $img = $(this); 

   var filename = $img.attr('src') 

   $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.'))); 

   $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.'))); 

  }); 

 }); 

 //]]> 

 </script>

Now click on Save Template.
That's it you have successfully installed the widget

Customization

Most of the blogger templates have already add the Jquery Library. So, if the jquery library is already presents in your blogger template then just remove the highlighted code line from the code. But if the jquery library is not present in your template then don't remove the highlighted text, otherwise the widget don't work.

How This Widget Work

If you are curious about the widget that how it works? How it adds the title and alt text to images and from where it gets the title and alt text? Then here I am going to explain it. This widget gets the name of the image which you have entered to image before uploading and adds that name as a title and alt text of the image.

Note: So, keep in mind that before uploading the images don't forget to properly rename the image files according to your post topic, so that you get the right alt text to your images.

Final Words

Hope guys that this widget might helps you in optimizing your blogger site. In my case, this widget helps me a lot. At first I designed this widget for my images site where I upload different types of images like wallpapers, gifs, comics etc. But after I see the benefits of this widget I decided to share it with you guys. Let me know if you have anything to say in below comment box.

Don't forget to share this post, and Stay blessed, Stay Smiling and Happy SEO and Blogging. :)