Disclosure: We are a professional review site that receives compensation from the companies whose products we review. We test each product thoroughly and give high marks to only the very best. We are independently owned and the opinions expressed here are our own.
Today, I decided to write an article about the image tag and its attributes. The article is about how you can add attributes that will make the images search engine friendly and best practices when using the image tags.
How Images are Used In Web Design
In most cases Images are used by websites to enhance the look and feel of the site. As for blogs, authors will use images as a way to break up the text or add value to the article (screenshots and graphics related the content). Then there are sites that most of their content is images (photo sites, portfolios, and photo blogs)
Since search engines can read only text, sites that have a lot of images need a way to get those search engines to read and index those images. Fortunately, images do have a way for search engines to see and know what the image is and What it’s about. It’s all in the code. The web designer just has to add descriptions to code. Once the additional code is added, the search engines will then read the text version of the image.
The Inner Works of an Image Tag
To add an image to a website you have to use HTML. The code needed to insert an image is
[xml] <img src="http://yourdomain.com/image.jpg" alt="" />[/xml]
The code above is the basic code to insert an image. But this code won’t help the search engines. The crawlers will just pass the images by as if they weren’t there. In order for the search engines to read the images, you will need to add additional code. You will need to add the ALT tag and description tag to the line of code.
So it should look like this.
[xml]<img title="add description" src="http://yourdomain/image.jpg" alt="add description here for search engines" />[/xml]
As you can see we added two additional parts to the code (called attributes). For those that are interested in what each part does in the code, I will explain.
title – is called the title attribute. This where you can add a description of the image. This description will show up when a reader hovers the cursor over an image. This tag isn’t mandatory, but it’s helpful for the readers, and it gives a little more text for the search engines to read.src – called the source attribute. This tells the browser where it can find the image file.alt – is the alternative attribute. Sometimes referred to the alt tag. The alt tag is the text version of an image and is used when an image can’t load and this is what the search sees.
Although all you need is the src attribute to display an image with HTML, your code is considered incorrect or invalid when you do not use the alt tag. So always add an ALT tag.
Best Practices for the Alt and Title Tags
I learned early on that adding descriptions and alt tags to your images is a great way to add SEO value to your articles. This is the perfect way to craft your descriptions and alts for your article keywords (DO NOT KEYWORD STUFF!). Just like your article descriptions (meta descriptions), write something catchy with your major keyword or two. Try and keep them closer to the beginning of the description.
If you are doing printscreens for a tutorial or example of the project, write a very descriptive description of what the reader is looking at. Also, you could add at least one image that is the title of your article.
If you like to add images that might seem random but if has some sort of relation to the article, then add a description that explains the image, but make it short.
Take a look at the example image above. Hover over the image to see the description. If I were writing about abandoned cars or Route 66 this would be a great alt and description tag. Its explains what the image is and who took the picture (you don’t necessarily need to add the author name).
Final Thoughts
Adding images is another way that SEO consultants use to help rank sites. Even if your site only has a small amount of images, always add at least the alt tag to each and every image. Every legal step you do towards SEO will help your search engine rankings.
Image Source: Flickr
About James
Using the alt tag etc is probably one of the things that a lot of bloggers just forget to use, I personally always try to remember to add both title and alt, as you say it certainly helps with the seo for any website/blog 😉
Using alt tag is important to use alt tag so that the images are named properly and also it important to use keyword for the Alt Tittle.
Nice tip, I should always remember to add a description to all future images next time. By doing this maybe I can rake in more visitors.
James, since I use WordPress, it’s pretty easy to fill in the Alt info without using HTML. I learned that the primary reason for the alt tag is to inform blind users with information on what the image contains. So whatever SEO stuff I add, I try to keep it in the context of assisting folks understand what they would be seeing. Thanks for these tips.