Wednesday, February 6, 2013

Alt image tags for blogger

Another problem i meet on my blog last day is about alt image tag, now i decided to write it in order to help a new blogger like me if you really concern about it
specially for user seodoctor or seoquake add-ons mozilla
What is an alt image tag? how important it is?
Alt attribute is important to describe your image, it can make google job easier to identify all image in your blog, remember not everyone use computer to surf, for screen reader users it can provide them a clear text about the image. In SEO view it can raise your rank also.


First method is a basic HTML code for inserting alt tag img <img src="url image" alt="alternative text for image"/>
or <img src="smiley.gif" alt="smiley face" title="smiley icon face" height="80" weight="80"/>
however we need insert it manually for every image in every post we made

Another easy way is to put it directly to our image (for blogger user), you only have to right click after uploaded it, then choose properties
example alt text

it will show title text
alt text (description eg: yellow banana )
this one simple but you can't adjust weigth and height img as HTML one

There is an image that you can't give attribute in your blog page, like avatar in your comment, as a new user you may get missing alt from it, seodoctor plug in will always show that lh5/4/6.googleusercontent.com/AAAA... doesn't have attribute.

luckily you can fix that with this 3rd method, i mean not just fix it but you can make automated alt tag for every image in your blog, follow the step

1. Open your design template,
2. choose HTML
3. expand widget template
4. find </body>  (use cntrl+f)
5. place code below above </body>

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

6. save template

There your done, not just fixing your avatar in comment blog not having attribute text, but all image in your blog now will have alt text automatically, try use seodoctor or seoquake to check again.

2 comments:

Silahkan bertanya dan berkomentarlah sesuai topik

(SPAM) & (ACTIVE LINK) will be deleted,
if can don't use anonymous as it will considered as spam