Recently I’ve been working on some custom content management code, but yesterday switched over to WordPress to do some maintenance on this site. Going from ‘coding mode’ to using a third-party user interface made me remember that there are some things ‘coders’ take for granted – in this case how an image is represented using HTML (HyperText Mark-up Language – this is the code behind web pages).
Helpfully the WordPress admin panel allows us to customise the attributes of each image, which is all well and good if we know what should go inside each bit. So here are a few tips…
Before uploading your file, give it a sensible filename. WordPress will preserve the filename when the image is uploaded, so this is the filename as it will appear on your website. Use a filename that is not stupidly long, but is descriptive and contains keywords. As we should all know by now, ‘keyword stuffing’ serves no benefit. Stick to lowercase letters and use hyphens instead of spaces.
Once you have uploaded your image, WordPress will helpfully use the filename as the image title. Since WordPress 3.5 was released this title no longer makes it into the HTML (a discussion and plug-in code restoring this functionality can be found here), but whether or not you intend to use this in the code it makes sense to have sensible, meaningful titles. The title is displayed inside the WordPress media library – good titles will let you track down images in a large library with minimal fuss.
The image caption is displayed below your image in the post. If you leave this blank then no ‘shortcode’ will appear in the post, and so no HTML will be constructed for it when the page is viewed. The caption should be short and include supplementary text about the image. If you want to know more about the caption element in WordPress and its customisation then Justin Tadlock has an entire blog post about it here.
Below the caption in the WordPress admin panel for each image you’ll see an input box for this. The ‘alt’ text as it’s generally known is important for accessibility: this text will be displayed if the visitor has images turned off or if they have a page reader that needs to describe in words the content of the image. It is also worth considering the implications for SEO (Search Engine Optimisation), since Google relies heavily on the ‘alt’ text when trying to work out what the image is showing. Remember to always write the ‘alt’ text so that it is useful – as with the title text, keyword stuffing won’t do you any favours.
This is a longer description of the image than the caption, providing useful supplementary information. Depending on how you have your website configured this may appear alongside your image when viewing it as an attachment, for example if a user clicks on a thumbnail image. As with the other fields, consider what’s useful to the user and write it to be clear, informative and to-the-point.
So there you have it. Putting time into your image attachments and ensuring that all the necessary fields are carefully completed will make for a better post for your visitors and may improve your page’s ‘quality score’, which you should always have in mind.
LATEST FROM US.More from the blog
If you haven’t heard the term responsive web design before thats ok. Its a fairly new way of designing websites which has gained momentum over the past couple of years with the mobile web boom. Today it is seen as the industry best practice by the search engine market leader, Google. This is why it’s worth taking note.
Check out the new responsive website design for the UK charity Citizens Advice Bureau which we launched today. Also find out more about the web design process by reading our case study on this project.
Recently I've been working on some custom content management code, but yesterday switched over to Wordpress to do some maintenance on this site. Going from 'coding mode' to using a third-party user interface made me remember that there are some things 'coders' take for granted.