Monday, 3 March 2014

How to Add Alt and Title Tags to Blogger Images Automatically?

We're always worried concerning our blog SEO and with regards to images its 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 serahc rngine 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 lets start the tutorial.

How It Works:

This script simply take 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 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 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='' 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.

Final Touches:

You have successfully added this script and all of the images in your blog will automatically add Title and Alt Tags and improves your search visibility. Now It's your turn to share this post with your friends and share your views in comments till then Peace, Blessings and Happy Adding.

No comments:

Post a Comment