Using images in website design and the dangers of cowboys

Written by Matthew Simmons
Worries about the impact of images on your website design?

One of our website design clients came in for a coffee the other day – she’d just been to one of those free ‘DIY SEO for Small Business’ seminars locally, and was buzzing with enthusiasm for the benefits of meta keywords (warning flags went up at this point), and how they’d been taught to right-click to see the page source of competitors to help them with their own SEO strategy.

Apart from some quite useful stuff about the use of social signals in outbound marketing, we were quite concerned about the technical on-page advice the audience had luckily not had to pay for. Especially the idea that you could keyword stuff image alt tags and what was actually displayed in a browser.

These guys were confusing alt with title tags.

In fact if we were going to split hairs, there is actually no such thing as an ‘alt’ tag – it isn’t a tag but an attribute.

Also these SEO ‘experts’ had got it totally wrong – not just about keyword stuffing, but they were also effectively advising that title and alt attributes are one and the same thing. They are not.

So here’s what we believe to be the difference, and why its relevant.

Using ‘title’ or ‘alt’ attribute to optimise website images.

The best way to see what is going on here is to consult the oracle first and seek Google’s pearls of wisdom and go from there!
Matt Cutts at Google clarifies the use of these attributes on this post in the Webmaster Central blog.

“Some of you have asked about the difference between the “alt” and “title” attributes. 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! “

So what Is the difference between the ‘Alt’ and ‘Title’ attributes and how do we best use them on our website for SEO benefit?

The Image ‘Alt’ Attribute

‘Alt’ as an attribute here stands for ‘Alternative text’ as is relevant to the image tagged. This is simply text that can be added to the image properties that is used in certain situations.

This alternative text is typically rendered in the browser for a particular image when images are turned off in the browser settings or fail to download. Images can have malware code embedded and the default for email clients such as Outlook is no images to protect the user from attack.

So its good practice to add some alternative text information to describe the image in these situations for website visitors who are unable to see the images in your document. This includes visitors opting not to display images, visually impaired visitors, and screen reader users. Here, the Alt text is displayed instead of an image, not as additional information.

The code looks like this:

<img alt=”image alt text here” src=”image source URL link”/>

The Image ‘Title’ Attribute

Unlike the alt attribute, the title attribute is supposed to provide additional or advisory information about the image. This could be more detail that the visitor might benefit from or maybe information about the destination is there is a link from the image.

With the image title attribute, the text is displayed when a website visitor hovers the cursor over an image as a discreet pop-up.

It is important to have images tagged with these attributes so that search engines can give more priority to your content, but more importantly with SEO these days, if anything enhances the user experience it tends to find favour with the search engines.

The title code looks like this:

<img title=” image title text here ” src=”image source URL link”/>

‘Alt’ vs ‘Title’? Which Is More Important?

The more we explain our content to the search engines, the more they will favour it. There is evidence to suggest that the alt attribute shades it in terms of search engine priority, but using both correctly enhances the users experience and is therefore a good practice.

How to implement Image ‘alt’ and ‘title’ attributes

Typically we all add images after the website or blog content to add relevance to our words. So by the time the images are selected, we’ve have already considered keywords for the page anyway. To add useful keywords and key-phrases into the alt attributes that describe the image and to add supplementary detail about the image or link path for the title attribute, again with useful keywords, would be the best way of enhancing the page.

You pay for what you get!

So you pays yer money – just be very aware of the advice you are getting from business’s offering a FREE lunch – in our experience there’s no such thing!  Also beware of those marketing/design agencies who appear to offer ‘everything’ – especially in such a technical area as SEO – usually they don’t, unless they have a large staff.  In this instance our client would almost certainly have enjoyed at best, total antipathy from Google, and at worst a Google penalty. 

Luckily for our client, we were able to negate the bad advice they had received, and when we dug a bit deeper, these ‘experts’ seem to be simply a bunch of scammers selling cheap websites based on the same low-end WordPress template and don’t have much credible website design experience at all! 

Sadly for the other 30 odd attendees at the FREE seminar, they might have put some of this spurious SEO into practice.

Written by Matthew Simmons

Snap Marketing for graphic design, website design and marketing based in basingstoke hampshire

Interested in how we approach web design, marketing and print?

Talk to Us Join our Mailing List

because...... it's all about getting your foot through the door

Which Web Design Company: Snap Marketing