How To Add SEO Into Your Website Images
SEO didn't really come to mind when i started to build this website, i was more interested in the HTML and CSS, and getting my images to display how i wanted them displayed. If i had known better, i would have also started to implement SEO into my webpages and images as i went along, saving myself a lot of time.
There are a growing number of images on my website, and structuring the SEO around them is a relatively easy task.
The image tag has 4 potential SEO uses. I say potential as in some cases you do not need them all. Lets look at just a basic image tag like the one’s i used in my original HTML -
<img src="img/232.jpg" alt="" />
There are two main attributes that have to be used within the image tag which are -
- src (source)
- alt (alternate text)
I had numerous image tags containing just those two attributes, with most of my alt attributes empty, at the time had no idea of the potential that the img tag could actually deliver in the form of website traffic through image search.
So lets take a look at what we can do and how we can change the img tag to optimize it for the search engines.
There are 4 main SEO factors which should be taken into consideration with the img tag and some extra attributes which are -
- the name of the image
- the title attribute
- the alt attribute
- the attributes for the width and height of the image
I used to name my images using a great little piece of software called ReNamer. It enabled me to quickly rename files sequentially, with a more appropriate name and in relation to the content of the images. Quite often though i would end up with 123.jpg 124.jpg and so on. And into the img folder they would go to be added to my HTML.
Obviously, or maybe not, in SEO terms 123.jpg 124.jpg had no meaning whatsoever. This kind of naming works fine in some cases, but if they are individual images on a blog, it is much better to descriptively name the files in relation to what they depict.
The img tag for the image below looks like this -
<img src="232.jpg" alt="" />
So our first SEO step is to change the name of the image to -
<img src="rob-and-the-red-indian.jpg" alt="" />
Add Content To The ALT Attribute.
Now we can add the alt description like this -
<img src="rob-and-the-red-indian.jpg" alt="image of a red indian and a man called rob" />
The alt attribute is there for accessibility and is an aid to screen readers for the visually impaired, it is also an indication to search engines as to what the contents of the image are. This is a general guideline, however you would have to try several screen readers to discover how exactly the img tag was read out, to get a good gauge of what best works.
In this example just a brief description of the images content will do. However there are times when you might not want to add the alt text, if maybe the image is for decorative use on your website, like a border or a bullet image.
Add Content To The Title Attribute.
We can expand on the alt attribute by adding a title attribute. Within this attribute we can say a little bit more about the image -
<img src="rob-and-the-red-indian.jpg" title="Rob And The Red Indian At The Brandenburg Gate" alt="image of a red indian and a man called rob" />
You can use the title attribute instead of the longdesc attribute which has been depreciated in HTML5. The title attribute will pop up like a tooltip when you hover over the image on the webpage and will also add to the discovery of your image via an image search.
Hover over the image below -
Now do a Google image search for ( rob and the red indian )
This may seem a bit odd, i know, as who is going to do a search for rob and the red indian. However, at the Brandenburg Gate in Berlin there is a red indian, and someone, after visiting Berlin, may wonder about the red indian and do an image search for ( red indian brandenburg gate ), to which they will be drawn to click on my most wonderfully colorful image of said indian.
I use the above methods for searchability of my images and it does a great job.
Add The Width And Height To Your IMG Tag.
The last thing we can do with the img tag is add the width and height of the image like this -
<img src="rob-and-the-red-indian.jpg" width="200" height="250" title="Rob And The Red Indian At The Brandenburg Gate" alt="image of a red indian and a man called rob" />
The width and height attributes optimizes your webpage for speed. When a browser downloads your webpage these attributes help the browser reserve space on the page and arrange the page faster. When adding the image dimensions you do not need to include the px (pixels) as the page will not validate for HTML5, but will still communicate to the browser the size of the image.
It can be tempting to resize the image with these attributes but it is not advisable as it will add time to the rendering of your webpage and can distort your images. Always make sure these attributes match the exact dimensions of the image.
As you you can see its quite easy to add SEO to your images, and as more and more people do image searches, overtime you will see an increase in traffic via those images.
How To Add An Image Sitemap To Your Website.
Now you have your images maxed out with SEO, you can incorporate into your website an image map. The image map is exactly the same as your site map and uploaded onto your website in the same way. It informs the search engine spiders of where your image is located on your website and what the image is about.
A simple image sitemap would look like this -
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"> <url> <loc>http://www.yourwebsite.co.uk/blog/my-blog-post</loc> <image:image> <image:loc>http://www.yourwebsite.co.uk/images/your-image.jpg</image:loc> <image:caption>Description of image</image:caption> </image:image> <image:image> <image:loc>http://www.yourwebsite.co.uk/images/another-image.jpg</image:loc> <image:caption>Another description of an image</image:caption> </image:image> <image:image> <image:loc>http://www.yourwebsite.co.uk/images/and-another-image.jpg</image:loc> <image:caption>And another description of an image</image:caption> </image:image> </url> </urlset>
Ok it looks more complicated than it is, but you can just add to the code, not forgetting that it starts with the image page location opening tage <url> and closes </url> and finally when you have finished ends with the closing </urlset>
A much easier way to do this, is to go to PRO-Sitemaps.com and pay a small amount of money (about £2*) to have them generate the image map for you in less than 30 seconds. Their generated image sitemap uses the title attribute of the image tag for the <image:caption></image:caption>.
But its not all you can do. you can also compress your images so that they download faster in your visitors browser. You can read more on this here Compress Your Images Using Photoshop CS4 For Faster Loading WebPages