SEO-friendly picture description labels.

This may come in handy:

There are cases in which You may find appealing to display description labels on top (or next to) Your blog posts' pictures. You might prepare some CSS/HTML code snippets to insert those labels - which is, however, an additional work to do. And, more importantly, it makes Your code less flexible (what if You'd like to introduce more serious changes within the layout over the time? - for example, if You'd like to remove those labels, even if You hide them via CSS, code-wise much unnecessary stuff will still remain).

Moreover, if You care about SEO, every time You insert an image You probably fulfill its "title" and "alt" attributes within the actual HTML code itself. To add an extra label displayed on the screen seems to be more hassle.

What if, however, You could utilize those already existing image descriptions and make them visible on top (or next to) Your pictures? In such a case:

1. You don't need to double picture description labels.
2. Your HTML template code remains flexible because it doesn't involve any additional code snippets (HTML <img> attributes won't interfere with any layout changes in the future).
3. Overall, the whole code is more SEO-friendly, i.a. because it doesn't involve doubled code snippets (which for search engines could look suspicious).

A nice thing here is that - although an <image> attributes mentioned above are parts of HTML programming language - You don't need to write any code per se to fulfill them, because Blogger provides You with an easy way to do that within its own editor (just double-click an image and choose "Properties"). If You use Open Live Writer, it also enables You to easily handle those attributes - just double-click an inserted image and choose "Alt text" on the "Format" bookmark.

So, let's see how You can utilize <img> attributes and use them as visual image labels - first the overall idea:

1. To each picture with a title attribute attach a container for its visual label.
2. Point out the source of content for each label.
3. Fill the label container with the proper content (source).

Let's look at the actual code:

1. To each picture with a title attribute attach a container for its visual label.

/* attach a container for the label */

$(".post-body img[title]").after('<span class="PostIMG"></span>');

This code means that after each of Your blog post's pictures with a title attribute there will be a .PostIMG container attached. This is Your picture visual label - You can define its appearance via CSS. I've used <span> and .class because I want My code to be able to attach labels to more than one image within the same single post - so there may be several instances of the same (.PostIMG) container. In such a case You should always use .classes instead of #id's (the latter are supposed to be used in case they are present only once on a single page).

Furthermore, "img[title]" stands for images which are equipped with the title attribute. There are cases in which You don't need (or want) to describe some of inserted pictures - those pictures should be then skipped by the code, because there is nothing to do regarding them.

2. Point out the source of content for each label.
Before You write this part, ask Yourself how many post's pictures You want to include within this mechanism? Although a natural conclusion seems to be: "all of them" - You need to define the precise - maximum - number (the code won't cover any more pictures than defined by this number). Below You'll see the code for four pictures - feel free to add more just by changing eq(3) into eq(4), eq(5) and so on, within new (copy&pasted) code lines.

/* the source for each picture label */

var PostIMGTitle1 = $(".post-body img[title]:first").attr('title');
var PostIMGTitle2 = $(".post-body img[title]:eq(1)").attr('title');
var PostIMGTitle3 = $(".post-body img[title]:eq(2)").attr('title');
var PostIMGTitle4 = $(".post-body img[title]:eq(3)").attr('title');

What does this code mean? The first line, for example, means that the title of the first picture (which has a title attribute) can be recalled by the PostIMGTitle1 "nickname" :) . Within programmers' nomenclature You could say that You've created a variable called PostIMGTitle1, which consists of this picture title attribute. The second line means the same - but regarding the second picture, and so on.

3. Fill the label container with the proper content (source).
However many posts You include, the same number You need to cover this time (again, to include more pictures just change the eq(3) part):

$(".PostIMG:first").text(PostIMGTitle1);
$(".PostIMG:eq(1)").text(PostIMGTitle2);
$(".PostIMG:eq(2)").text(PostIMGTitle3);
$(".PostIMG:eq(3)").text(PostIMGTitle4);

What does the code mean this time? The first line means that the first container with a class called PostIMG should consists of something which has a nickname PostIMGTitle1 :) (see earlier on).

So now You have all the pieces :) .