Blog Tips Tuesday 3: How to add titles and alt text to images
We all know that it’s important to include at least one image in every blog post – they break up the text, give you something interesting to look at, and provide the reader with an idea of what the post will be about at a glance. But thinking you can just plonk any old image in your post and be done with it is a mistake – try taking two minutes to add titles and alt text to your images to improve your SEO.
This is an ‘intermediate’ blog tip, aimed at people who already have a blog set up and who want to improve their SEO to gain readers and build traffic.
How to add titles and alt text to your images
SEO can be really confusing to beginner bloggers, but here’s something really simple you can do to gain search engine traffic.
What is alt text?
An alt tag is an html attribute that explains what an image shows. You know how sometimes when your Internet is playing up, instead of an image loading properly you’ll see a little red cross with some writing next to it? That’s the image’s alt text. It’s also used by blind people who use a screen reader – the alt text is what will be read out loud, to allow the person to know what to image shows.
So why should you use alt tags? Well, as well as being helpful to blind people, they’re great for your SEO. Google isn’t a person – it can’t look at an image and know exactly what it shows. Instead, we need to tell it in words. If you do a Google image search for ‘veggie pot pie’, it’s not going to be looking at the images themselves, it’ll be looking at their alt text, so only images with that alt text in place will show up.
If possible, try to get your blog post’s keywords into your alt text – again, this is really straightforward for a food blog (we have an easy ride!) because your focus keyword is usually going to be the name of the recipe, and your photos are usually going to be taken of the recipe too. Occasionally you’ll need to use other words for your alt text, but that’s ok – it’s better to use relevant words that accurately describe your image than to force in keywords where they don’t belong.
What are image titles?
You can also add a title to an image, which is the text that appears when you hover over the image, like this:
As you can see, the title of the image appears in a little yellow box if you hover the cursor over the image for a couple of seconds. Adding titles is also great for your SEO.
Sometimes your alt text and image titles will be the same, other times they may not. It’s up to you to use your common sense to decide what’s appropriate in each case. For example, if my image showed just one slice of my ricotta and tomato tart, I might decide to keep the title as ‘ricotta and tomato tart’, but change the alt text to ‘slice of ricotta and tomato tart’, since that phrase more accurately describes the picture.
How to add titles and alt text to images on WordPress
If you’re on WordPress, it’s really easy to add all this information without knowing anything about html. Just insert your image, click on it, then click the ‘edit image’ button in the top left corner (see blue arrow):
This will bring up the image editing window, where you can add your title and alt text. You can also add a link here if you want the image to link to a different page when clicked.
How to add titles and alt text to images on Blogger
I don’t currently use Blogger, but I did for over a year, so I can still help even if you’re not on WordPress! The method is very similar on Blogger: add your image, and then click on it, and this little bar will pop up:
Click ‘properties’, and then simply fill in your title and alt text in the spaces provided:
How to add titles and alt texts to images using html
If you’re not on WordPress or Blogger, or if you’d just prefer to add your title and alt text manually, you can do so with a really simple bit of html. If you don’t understand html or you’re perfectly happy using one of the above methods, ignore the following!
Just go into your html editor (which you can find by clicking the ‘text’ tab in your WordPress post editor or, unsurprisingly, the ‘html’ tab in Blogger) and add this to your image’s code:
alt=”alt text goes here”
(you need to keep the quotation marks in all these examples, and be really careful about where you add spaces, etc – one little mistake can ruin your coding!)
The html for an image’s title is
title=”title goes here”
It doesn’t matter what order you put these two tags, as long as they go within the image’s code. So your code could end up looking something like this:
<img src=”http://www.mysite.com/imagelocation” title=”title goes here” alt=”alt text goes here”>
That’s all you need to do to add your title and alt text.
If you want to take things one step further and have the image linking to a page when clicked, you can keep these same title and alt tags, but just add your link code around the image, like so:
<a href=”http://www.siteimlinkingto.com”><img src=”http://www.mysite.com/imagelocation” title=”title goes here” alt=”alt text goes here”></a>
It might look a little confusing but if you take each element one at a time, it makes a bit more sense. Remember you can also add target=”_blank” to your link code to make it open in a new window, like I mentioned when I talked about bounce rate.
And there you have it! You should now be able to go and add titles and alt tags to every single picture on your blog. It might take a bit of time, but the improvement in your SEO should be worth it. Just a few small changes like this can really help you get search engine traffic!
As usual, let me know if there’s anything in particular you’d like me to talk about next week!