How to fix alt and title image tags in the new wordpress.com
Guest post by Roads
May 1, 2008 Update (see below)
Since the upgrade of wordpress.com at the start of April 2008, image uploading has been far from smooth. It seems more stable now. Richard has provided a workaround to enable you to upload images at full size, and this post aims to help you fix those alt and title tags for your images which did not stick during the upgrade period.
The new image uploader has been stripping these out automatically until very recently.
Without an alt tag, Google will likely fail to index your images correctly according to the keywords you select. Note that it takes up to 6 months for Google image search to find your pictures, but it will miss your pictures altogether if you don’t use alt tags correctly.
Without a title tag, no ‘hover text’ will show up when the mouse passes over your image. Hover text is a useful way of letting your readers know what’s in a picture. It’s a low tech and unintrusive alternative to the ’snap’ feature in wordpress.com (which personally I find irritatingly intrusive).
Until a few days ago, there was no workaround for these problems. But the image uploader seems to be working now, more or less, leaving scope for you to go back and correct any errors that were created. And you might well have some work ahead to fix your most recent posts where the code went missing during the past couple of weeks. So here’s how to do that.
(1) Open the post you want to work on. In the pale blue bar beneath the post title, click on the rectangles icon next to ‘Add media:’ . This opens the image uploader.
(2) In the top bar of the image uploader, click ‘Gallery‘. Then select the image you wish to correct by clicking ‘Show‘ on the right of the pane for each image.
(3) Find the box marked Title (it has a red star next to it). Select the code which describes your file name code. Ideally when defining file names you could use a simple description of the image: e.g ‘fresh-powder-flaine-france
-april-2008-by-roadsofstone’. Copy this file name code (right click -> copy).
(4) Paste this code (right click -> paste) directly into both of the boxes below marked ‘Caption‘ and ‘Description‘.
(5) Open the next image in the gallery. Repeat the process as required, until you have filled these boxes for each image in your post.
(6) Go to the bottom of the image uploader window. When you have finished this step, make sure to click the button marked ‘Save all changes‘.
(7) Close the image uploader by clicking on the ‘x’ in the top right of the image uploader window.
[8] Save the post.
(9) Click ‘Edit Post‘ once more, and select ‘HTML‘ in the post editor. If you’re lucky, the code will now have stuck. For example, this worked for me earlier today, but unfortunately the last time I tried, it didn’t. It’s been that sort of month. But don’t worry, since you can now edit the code manually without it being stripped out.
* The code may well look something like this:
<a href=”http://roadsofstone.files.wordpress.com/2008/04/fresh-powder-flaine-france-april-2008-by-roadsofstone.jpg“><img class=”alignright alignnone size-full wp-image-1175″ style=”float:right;margin:6px;” src=”http://roadsofstone.files.wordpress.com/2008/04/fresh-powder-flaine-france-april-2008-by-roadsofstone.jpg” width=”120″ height=”160″ /></a>
* The ‘class =”alignright [or left] alignnone size-full wp image-1175″‘ code can be stripped out if you wish, depending on just how fed up with image handling you have grown in recent days. However, in the case of huge, unoptimised images, then this chunk of code may stop them from breaking your theme display, so if you’re in the habit of uploading image files straight from the camera, you’d better leave this strip of code in.
* Look closely at the style=”float:right [or left];margin 6px;” If you’re using Firefox for your browser, you’ll need the ‘margin 6px;’ to prevent the text from butting up against your image.
(10) Now back to the title and alt tags:
* Take a close look at the section of code which relates to the image you need to fix. If there is no title tag showing, then after the initial ‘<a’ , insert the following title=”fresh-powder-flaine-france-april-2008-by-roadsofstone”
* And, if there is no alt tag showing, then before ‘width’, insert the following
alt=”fresh-powder-flaine-france-april-2008-by-roadsofstone.jpg” Your final code will (should) now look like this:
<a href=”http://roadsofstone.files.wordpress.com/2008/04/fresh-powder-flaine-france-april-2008-by-roadsofstone.jpg“><img class=”alignright alignnone size-full wp-image-1175″ style=”float:right;” src=”http://roadsofstone.files.wordpress.com/2008/04/fresh-powder-flaine-france-april-2008-by-roadsofstone.jpg” alt=”fresh-powder-flaine-france-april-2008-by-roadsofstone.jpg” width=”120″ height=”160″ /></a>
This process looks quite complicated, but actually it’s very quick to do. You can specify your alt and title tags entirely differently from each other and from the file name if you wish to do so. You can also eliminate the hyphens if you prefer.
In this post I have simply kept the alt and title tags identical to the file titles, adapting the recommendations of <a href=”http://www.pearsonified.com/2007/01/get_53_percent_more_searches_with_one_tweak.php><b>Chris Pearson at pearsonified.com</b></a>. I’ve found this to offer the simplest and fastest workflow, and it’s effective, too.
May 1, 2008
Mayday. Well, Mayday update, anyway.
The saga continues. The image uploader is now saving any alt and title tags you generate. It’s nearly working now. But not quite.
It’s displaying your alt tags correctly.
It’s not displaying your title tags right, though. Here’s an example.
The left image on the page shows how the image is uploaded by WordPress.com
No hover text is displayed.
The right hand image has been corrected, manually in the HTML editor. Hover text is now showing up correctly.
The problem is that although the title tag is currently being written (you’ll see it when you’ve uploaded your image, if you go into the HTML editor) it’s being written into the img src section of code by mistake. That means it’s being erased when you save your post!
To and instead you need to move that into the ref section to make it display as hover text.
To illustrate the problem, this is what the code currently looks like (substituting [] for ):
Left image (no hover text):
[a href="http://energetic.files.wordpress.com/2008/05/dawn-on-coco-beach-bermuda-by-roadsofstone.jpg"><img class="alignnone size-full wp-image-512 alignleft" style="float:left;margin:6px;" src="http://energetic.files.wordpress.com/2008/05/dawn-on-coco-beach-bermuda-by-roadsofstone.jpg" alt="dawn-on-coco-beach-bermuda-by-roadsofstone" title="dawn-on-coco-beach-bermuda-by-roadsofstone" width="120" height="160" /][/a]
When you save the post, that title tag is now erased. So you need to add it back in, near the start of the code string, like this:
Right image: (hover text now displayed)
[a title="dawn-on-coco-beach-bermuda-by-roadsofstone" href="http://energetic.files.wordpress.com/2008/05/dawn-on-coco-beach-bermuda-by-roadsofstone.jpg"><img class="alignnone size-full wp-image-512" style="margin:6px;" src="http://energetic.files.wordpress.com/2008/05/dawn-on-coco-beach-bermuda-by-roadsofstone.jpg" alt="dawn-on-coco-beach-bermuda-by-roadsofstone" width="120" height="160" /][/a]
Clearly there’s been a lot of work going on behind the scenes over the past four weeks since the upgrade on 4th April, and that’s all very much appreciated.
Nevertheless, providing more information about what is going on would be a very positive step towards customer relations and would help these forums to work more effectively for everyone.
Anyway, just one suggestion for improving WordPress and making life easier for staff and users alike. In the meantime, I hope this fix is useful for anyone who needs it.
HTH and happy blogging !
Related posts: WordPress 2.5
Reference
Images: Using ALT attributes smartly (video)
According to the W3C recommendations, the “alt” attribute specifies an alternate text for user agents that cannot display images, forms or applets. The “title” attribute is a bit different: it “offers advisory information about the element for which it is set.”
As the Googlebot does not see the images directly, we generally concentrate on the information provided in the “alt” attribute. Feel free to supplement the “alt” attribute with “title” and other attributes if they provide value to your users!
:: 
:: 
:: 
:: 
:: 
:: 
:: 
:: 
:: 
Tried out the Gallery feature on my photoblog. Unfortunately so far, from looking at the page source, I can’t see that this is giving my Gallery images “alt” tags , only captions underneath the thumbnails on the post where the Gallery appears, which I actually don’t want.
Also, still can’t seem to display the large image on the Page where the individual image is shown, only the medium size. There really isn’t an option to “Edit” the Page that the image appears on because clicking on the Edit button brings you to the Image in the Media Library, not a Page.
Brilliant! Thanks for this, roadsofstone. I’ve been looking for a way to do this and am now going to try it out.
… didn’t work… but it was only my first try and I don’t have time right now to work closely on it.
@jennifer and ian
I will let Roads know that you two have commented so he can get back to you. :)
thanks tt
@Jennifer
Thank you for your comment. The problem here is that gallery page does not any more automatically create alt and title tags for your newly uploaded images.
That’s why you need to go back and fill these in manually.
Concerning the question of how to insert images at full-sized,
Richard has written about this problem within these two earlier posts here:
Inserting images full-sized in the new wordpress.com
More on inserting images full-sized at WordPress.com
@ian – thanks, and it’s very good to hear from you, too.
Once you’ve filled in the alt and title tags manually on the ‘gallery’ or ‘media library’ page – you can do this on either one – it’s unfortunately possible that the tags may still not show up within the code for your post.
If that happens, then you also need to add those code strings manually to the html code for that post.
You can do this within the HTML editor, as I show in the second part of the article above.
Hope that helps, and good luck!
I did go back and open each image as described above. Perhaps because I’m doing this from within a Gallery and not a single image it isn’t behaving as described, but from what I understand from the boxes in the Media Library, adding a Caption should assign the “alt” tag, no? Even after saving all the changes, when I refresh the Gallery page and then each individual page from the post that contains the Gallery, the “alt” tag for each image is still empty.
You can see what I mean by looking at the page source here
http://gammagirl.wordpress.com/2008/04/17/loaves-and-fishes/
I’ve also left comments about some of my other Gallery “discoveries” there.
Hi Jennifer,
I have sent Roads an email so he knows that your comment is here. Please be patient as he resides in the UK (another timezone). :)
Thanks, Jennifer. It sounds to me as though the same thing has happened to you as to Ian above, and as I explained has also happened to me as well.
It sounds like you’ve assigned your alt and title tags to the images, but they aren’t transferring automatically across to your post.
It’s quite possible that they will only do this when you first insert the image into your post – if that is true then assigning the tags once the image has already been inserted may just be too late to solve the problem in one shot.
That leaves you two possible choices to correct the problem. You can either delete the image from its position within your post, and then re-insert it. The alt and title tags being present at the time of re-insertion, we can then hope that they will transfer into your post accordingly.
Alternatively, or if that fails, you can edit the image code section of your post directly, within the HTML editor, as I describe in the second part of my article above.
I hope that helps, and best of luck to you.
Thanks so much, it’s very useful.
I’m glad you are finding these posts to be useful. As soon as I have the time I’ll come and visit your blog too. :)
Putting together a new post with lots of pictures today gave me another chance to try this out .
The image uploader is still working differently day by day. Currently, if you follow the steps in the first part of my article above, then your image will load up with an alt tag. The title tag will still be missing from your post, however, so the hover text still doesn’t work automatically.
To fix this, follow the steps in the second part of my article above. Open the HTML code editor and look for the string of code relating to the image you want to fix.
Right after where it says <a , you need to insert the following:
title=”your desired hover text” – you can choose any hover text you like.
I find that the simplest, quickest and most consistent approach is to copy the alt tag, which you will see slightly later on within the same string. Example alt=”your-file-name-as-uploaded”
You can see where this is going, since this approach moves you towards saving your pictures with descriptive file names, rather than with image numbers.
If you can make the effort to use key words within your image filenames, then this will help Google to recognise and index your images. That’s a good habit to get into and over time it will help to boost your traffic, too.
Hope that helps, and happy blogging.
Mayday. Well, Mayday update, anyway.
The saga continues. The image uploader is now saving any alt and title tags you generate. It’s nearly working now. But not quite.
It’s displaying your alt tags correctly.
It’s not displaying your title tags right, though. Here’s an example.
The left image on the page shows how the image is uploaded by WordPress.com
No hover text is displayed.
The right hand image has been corrected, manually in the HTML editor. Hover text is now showing up correctly.
The problem is that although the title tag is currently being written (you’ll see it when you’ve uploaded your image, if you go into the HTML editor) it’s being written into the img src section of code by mistake. That means it’s being erased when you save your post!
To and instead you need to move that into the ref section to make it display as hover text.
To illustrate the problem, this is what the code currently looks like (substituting [] for ):
Left image (no hover text):
[a href="http://energetic.files.wordpress.com/2008/05/dawn-on-coco-beach-bermuda-by-roadsofstone.jpg"><img class="alignnone size-full wp-image-512 alignleft" style="float:left;margin:6px;" src="http://energetic.wordpress.com/files/2008/05/dawn-on-coco-beach-bermuda-by-roadsofstone.jpg" alt="dawn-on-coco-beach-bermuda-by-roadsofstone" title="dawn-on-coco-beach-bermuda-by-roadsofstone" width="120" height="160" /][/a]
When you save the post, that title tag is now erased. So you need to add it back in, near the start of the code string, like this:
Right image: (hover text now displayed)
[a title="dawn-on-coco-beach-bermuda-by-roadsofstone" href="http://energetic.wordpress.com/files/2008/05/dawn-on-coco-beach-bermuda-by-roadsofstone.jpg"><img class="alignnone size-full wp-image-512" style="margin:6px;" src="http://energetic.wordpress.com/files/2008/05/dawn-on-coco-beach-bermuda-by-roadsofstone.jpg" alt="dawn-on-coco-beach-bermuda-by-roadsofstone" width="120" height="160" /][/a]
Hope that helps and happy blogging.
This solution is just a workaround! It is not written in the IMG-Tag by mistake, it is stripped out by mistake. The title-Attribute can be used universal and it is valid to put it in the IMG-Tag!
The standard configuration of the TinyMCE editor allows “title” in IMG-Tag. So maybe it is just a configuration problem of the editor!?
@torsten
Hello there,
I have contacted Roads as he is the author of this article. He lives in the UK so there will be a time zone delay but he will get back to you. :)
Thanks very much for your input, and thanks, too, for that excellent clarification, Torsten. You’re right that I only present a workaround above. That’s because this is a user-based site, and I don’t write the code for WordPress. Far from it – I’m a geologist and a writer, simply trying to get the best out of the platform that I can.
You’re right that there seem to have been a few configuration problems with the new editor, of which this is one of the less obvious, but possibly one of the most important in terms of the effect it may have on traffic from search engines.
Let’s hope that these problems will be corrected soon. In the meantime, since I use a lot of images I was keen to find a way of making this work more effectively right now and to share my learnings with other users.
It may be worth noting in this regard that I had to go back and backfill many missing tags for all of the images which I’d uploaded since the WordPress.com upgrade on 04.04.2008. I found that inserting a title tag in the IMG-tag didn’t work, but writing it at the front of the code string did. It’s just a workaround as you say, but it works!
Best of luck and happy blogging!
Viel Spass und noch viele Gruesse aus England. Mach’s guat (wie die Schweizer sagen).
I don’t wanted to be unfriendly. This is a great workaround!
I found this bug and did a forum search (I’m a moderator in the german forums at de.forums.wordpress.com, but in the english forums are many more people, so I often found a solution there…) I’m no programmer and use this platform like you.
Back on topic:
I found this Documentation of the TinyMCE-Editor:
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/valid_elements#Full_XHTML_rule_set:
You can see, the IMG-Tag and the title attribute is a valid element.
I have checked this at selfhtml.org and w3c.org, so that I realised: This is a workaround, and it is not recommended, because it would’nt work if you didn’t hava a link (okay, you can use the SPAN-tag…) and it isn’t semantically correct.
It has to be a problem with the editor-configuration, I think.
(Sorry for my bad english. I’m german ;-)
That’s interesting, and many thanks again, Torsten. Are you saying that my workaround won’t be W3C compliant?
If so then it would be all the more reason for WordPress to get on the case sofort and fix how the image uploader saves its code.
Keine Sorgen mit dem sehr klaren Englisch. Ich schreibe genau so schlechtes deutsch wie HTML, eigentlich.
Hopp schwiiz!
It is W3C-compliant, but it is not very semantic, because you want to make a title for the image and you put it in the link-Tag. It it is a classical workaround. It works, but it is not recommended ;-)
Hi there Torsten,
I send Roads and email so he knows you left this comment.
That’s good to know that the method is still W3C compliant, Torsten.
‘Classical, and it works.. but it is not recommended’ – I can live with that.
Let’s go!
I may be a bit dim, but I’m even having trouble with seeing the html! I’ve put a gallery on a page (rather than in a post) and when I look at the html viewer all it says is [gallery] – I want to get rid of the comments box when the individual image is opened…and would like to get rid of the caption but keep the “alt” tags. Editing the html seems like the best route, but how can I get it to show?!
http://www.brooksandboonunspoken.wordpress.com
Thanks, Stephie
When using the gallery function, the HTML is hidden from view which means we cannot change it. It’s called a shortcode.
Comments cannot be turned off only for the gallery individual image pages. You would have to turn comments off for the main post (below the post text area in the post editor) which would mean that no one could comment on the post.[Jennifer has corrected me and comments cannot be turned off on individual gallery posts. See her comment below.]
The gallery has some shortcomings and I’m hoping that they will expand our control over it, but like with all things WordPress, there is no telling when they will and what additional controls they will give us – if any.
Richard, just one correction about the comments on Gallery Attachment pages. You can’t turn commenting off for the Gallery Attachment page by disallowing comments on the Post where the Gallery appears. You actually have to turn comments off for your entire blog. FWIW-I’ve written up an extensive Gallery FAQ on my photography blog, Random Acts of Photography.
Jennifer, Thanks for the correction. I played with the gallery a little when it was first introduced, but found it way too restrictive so I continue to use a combination of the visual editor and hand coding when I do photos. And thanks for pointing us to your gallery FAQ.
Thanks for your help! I have at least managed to hide the comments box on the photos, by turning off comments on the whole blog – just have to remember to switch them on for individual posts now! Finally happy how the blog looks anyway, just a shame you can’t sort the ‘alt’ tags, cos at the moment, to make them look good on the page (ie short!) means that they won’t make much sense as descriptive tags (especially for those with screen readers)… Thanks again.
@narrativeself, sadly there are still limitations to live with here at wordpress.com, but I’ve actually been pleased in general with the new features that have been cropping up over the past six month or so. There have been problems, and not everything is working as smoothly as it should, and some of the features haven’t really gone far enough, but still things are progressing.