How to Add Alt and Title Tags to Blogger Images Automatically

We're always worried concerning our blog SEO and with regards to images it's very difficult to add Alt tags manually and quite difficult to optimize every image on your website for Search Engines. An Alt tag is an attribute to your blog post images which tells google or any search engine crawlers about what your article is about and if you are not using them then this images on your website are invisible to google. So here’s a javascript code to suit your needs which will care for all the required attributes for images, for example, Alt, Title, for example. and in my view, this is the best and simplest way to optimize your current blogs images with the SEO. So let's start the tutorial.

How It Works:

This script simply takes the image name and use it as the title and alt tag of that particular image.
So to use this script carefully, you have to name your post images correctly. An example of an image with alt and title tag is below:

How to Add this Script:

1.     Go to Your Blogger Dashboard.

2.     Open the Template option.

3.     Wait for the full page load.

4.     Create a backup of your Template.

5.     Edit your template.

6.     Search the </body> tag in your template editor.

7.     Then paste the below code before the </body> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/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>

8.     Now save it.