Automatic Image Optimization in Blogger For SEO

How to Optimize Images in Blogger Automatically For SEO - This is done so that the images on your blog pages indexed automatically by the search engines like google so you are not bothered by adding it manually (add a description in the <img alt = "description of the image" height = "125" scr = "/ image.png" width = "125" /> when posting pictures).

The way it can be said to be a hassle. With this automatic way, each image has the same description with the title picture. Therefore, you have to give them appropriate names for each picture to be posted. 

Why Automatic Image Optimization For SEO? Because the image on the blog page is one medium that can be used for traffic on the search engines because the majority of internet users are very likely to seek or just browsing to see the pictures. 

Here's how to install automated image optimization in your blog template, As usual, go to your blogger dashboard > then go to the template section and click edit HTML then copy and paste the below code just before the </body> tag

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
<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('.')));
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>

Then save the template. Now any image that you are installed on your blog that has an automatically generated SEO friendly code. 

Thanks for reading! Stay tuned for more blogger tricks!