Image SEO optimisation: Alt tags and title tags

Image SEO optimisation

The new SEO is now the speed of a site, and this is achieved by correctly optimising your images for your website. You also shouldn’t forget to give your images good alt attributes: alt tags and title tags do strengthen the message towards Google’s search engine spiders and improve the accessibility of your website.

The term “alt tag” is a common abbreviation of what’s actually an alt attribute on an img tag. For all images on your website, the alt tag needs to describe what’s on it. Screen readers for the visually impaired will read out this and which makes your image accessible for anyone who can’t see property.

What is a alt tags and title tag?

Below is a screen shot of HTML image tag:

The alt and title attributes of an image is usually referred to as alt tag or alt text and title tags even. The alt text describes what’s on your image and what it’s function of the image is on the webpage. For an example if you have an image that’s used as a buy button, your alt text should say: “buy button”.

The alt tag is used by a screen reader, a browser which is used by the visually impaired tells them what’s on the image. The title attribute is shown as a tooltip so when you hover over an element, for example an image button, the button could contain an call-to-action, like “Buy Now for only $10!”.

Every image should have an alt text, and this is not just for SEO purposes, but also for the visually impaired because they won’t know what the image is for. A title attribute is not required, however it can be useful, but if you decide to leave it out it shouldn’t be much of a problem.

But what if your image doesn’t need one?

If you have images in your website that are just there for design reasons, you’re doing something wrong, because these images should be in your CSS (and not in your HTML). If you can’t change it then give it an empty alt attribute, for example:

What the empty alt attribute does it makes sure that screen readers do skip over the image.

SEO and alt text

If you read the following article from Google, they say a heading “Create great alt text”. Google places a very high value on alt texts to determine what is on the image but also to know the topic of the text around the image.

A fantastic WordPress plugin Yoast SEO has the following stages for images and their alt text when writing your blogs:

 

yoast-seo-no-image-alt-error yoast-seo-no-image-error yoast-seo-image-focus-keyword-notice

 

If you look at the images above, they have the same alt and title tags so you can just hover to view them. These are long and descriptive alt texts, but that what a good alt text should read like.

If your image is something of a specific product, it’s good to include both the full product name and the product ID (if it has one) in the alt tag, this way can be found easily. If a keyword is useful for finding something on your webste then that should be on the image, so include it in the alt tag if possible.

WordPress and alt and title

When you upload an image in WordPress, you can easily set a title and an alt attribute. By default WordPress uses the image filename in the title attribute, so  if you have no alt attribute, it copies to the alt attribute. This is better than nothing but it’s actually not the best. You really should take the time to write a proper alt text for every image you add to your website. The interface makes it easy, click an image, hit the edit button, and then you’ll be shown an interface like the below screen shot:

image alt title wordpress screen shot

So you there is no excuse for not doing this correct, other than be just lazy. Your SEO will truly benefit if you get these little details right plus the visually impaired users will also like you all better 🙂