SEO: Double your key words when using an image for a link
In the course of optimizing a client's website for search engine spiders, I ran across an interesting difference between Internet Explorer and Firefox, which I decided was worth sharing.
One legitimate way to get more keywords into your web page, and at the same time make it more accessible, is to use the alt attribute in image tags. Another less-often-used method uses the title attribute in the anchor tag for links. [1]
Here's how to use both techniques when using an image as a link.
With a bare minimum of coding, you can get away with something like this:
<a href="contact.shtml"><img src="gifs/contact.gif /"></a>
For better accessibility, add the aforementioned attributes, like so:
<a href="contact.shtml" title="Send us your feedback here"> <img src="gifs/contact.gif" alt="Send us your feedback here /"> </a>
Now you have doubled any key words that happen to be in these attributes, you have made the information available to users who can't see the image, AND you have perhaps given the user some useful information that was not in the text of the webpage.
Of course, you probably should also add other attributes, which I assume you are familiar with, such as width and height.
Back to the browser difference. Internet Explorer shows the information from alt in a small popup tooltip when you hover over an image. Firefox does not do this, but it DOES show a tooltip with the information from title.
When both attributes are used in an image link, IE will show the info from alt, and Firefox will show the info from title. So using both tags for an image link ENSURES that a popup tooltip will appear on MouseOver.
See it in action: Hover over the image link below, and see what happens with YOUR browser. The coding contains both alt AND title, as in the example above.
Incidentally, the links in the footnote below show that the title attribute may also be used in other tags, such as the <a> tag.
Update (July 29, 2006): The "See it in action" above is somewhat of a "cheat". Since we're now using a "hoverTip" script, what you're seeing in both browsers when you hover over the image is really the text of the title attribute. This new script will soon be available as the topic of a new "code snippet".
[1] SEOS: Search Engine Optimization Strategies, Dennis Gaskill - Lesson 5. This ebook by Boogie Jack is an excellent webmaster resource. I use his techniques to optimize all my websites.
SEO: Double your key words when using an image for a link
In the course of optimizing a client's website for search engine spiders, I ran across an interesting difference between Internet Explorer and Firefox, which I decided was worth sharing.
One legitimate way to get more keywords into your web page, and at the same time make it more accessible, is to use the alt attribute in image tags. Another less-often-used method uses the title attribute in the anchor tag for links. [1]
Here's how to use both techniques when using an image as a link.
With a bare minimum of coding, you can get away with something like this:
<a href="contact.shtml"><img src="gifs/contact.gif /"></a>
For better accessibility, add the aforementioned attributes, like so:
<a href="contact.shtml" title="Send us your feedback here"> <img src="gifs/contact.gif" alt="Send us your feedback here /"> </a>
Now you have doubled any key words that happen to be in these attributes, you have made the information available to users who can't see the image, AND you have perhaps given the user some useful information that was not in the text of the webpage.
Of course, you probably should also add other attributes, which I assume you are familiar with, such as width and height.
Back to the browser difference. Internet Explorer shows the information from alt in a small popup tooltip when you hover over an image. Firefox does not do this, but it DOES show a tooltip with the information from title.
When both attributes are used in an image link, IE will show the info from alt, and Firefox will show the info from title. So using both tags for an image link ENSURES that a popup tooltip will appear on MouseOver.
See it in action: Hover over the image link below, and see what happens with YOUR browser. The coding contains both alt AND title, as in the example above.
Incidentally, the links in the footnote below show that the title attribute may also be used in other tags, such as the <a> tag.
Update (July 29, 2006): The "See it in action" above is somewhat of a "cheat". Since we're now using a "hoverTip" script, what you're seeing in both browsers when you hover over the image is really the text of the title attribute. This new script will soon be available as the topic of a new "code snippet".
[1] SEOS: Search Engine Optimization Strategies, Dennis Gaskill - Lesson 5. This ebook by Boogie Jack is an excellent webmaster resource. I use his techniques to optimize all my websites.
SEO: Double your key words when using an image for a link
In the course of optimizing a client's website for search engine spiders, I ran across an interesting difference between Internet Explorer and Firefox, which I decided was worth sharing.
One legitimate way to get more keywords into your web page, and at the same time make it more accessible, is to use the alt attribute in image tags. Another less-often-used method uses the title attribute in the anchor tag for links. [1]
Here's how to use both techniques when using an image as a link.
With a bare minimum of coding, you can get away with something like this:
<a href="contact.shtml"><img src="gifs/contact.gif /"></a>
For better accessibility, add the aforementioned attributes, like so:
<a href="contact.shtml" title="Send us your feedback here"> <img src="gifs/contact.gif" alt="Send us your feedback here /"> </a>
Now you have doubled any key words that happen to be in these attributes, you have made the information available to users who can't see the image, AND you have perhaps given the user some useful information that was not in the text of the webpage.
Of course, you probably should also add other attributes, which I assume you are familiar with, such as width and height.
Back to the browser difference. Internet Explorer shows the information from alt in a small popup tooltip when you hover over an image. Firefox does not do this, but it DOES show a tooltip with the information from title.
When both attributes are used in an image link, IE will show the info from alt, and Firefox will show the info from title. So using both tags for an image link ENSURES that a popup tooltip will appear on MouseOver.
See it in action: Hover over the image link below, and see what happens with YOUR browser. The coding contains both alt AND title, as in the example above.
Incidentally, the links in the footnote below show that the title attribute may also be used in other tags, such as the <a> tag.
Update (July 29, 2006): The "See it in action" above is somewhat of a "cheat". Since we're now using a "hoverTip" script, what you're seeing in both browsers when you hover over the image is really the text of the title attribute. This new script will soon be available as the topic of a new "code snippet".
[1] SEOS: Search Engine Optimization Strategies, Dennis Gaskill - Lesson 5. This ebook by Boogie Jack is an excellent webmaster resource. I use his techniques to optimize all my websites.
SEO: Double your key words when using an image for a link
In the course of optimizing a client's website for search engine spiders, I ran across an interesting difference between Internet Explorer and Firefox, which I decided was worth sharing.
One legitimate way to get more keywords into your web page, and at the same time make it more accessible, is to use the alt attribute in image tags. Another less-often-used method uses the title attribute in the anchor tag for links. [1]
Here's how to use both techniques when using an image as a link.
With a bare minimum of coding, you can get away with something like this:
<a href="contact.shtml"><img src="gifs/contact.gif /"></a>
For better accessibility, add the aforementioned attributes, like so:
<a href="contact.shtml" title="Send us your feedback here"> <img src="gifs/contact.gif" alt="Send us your feedback here /"> </a>
Now you have doubled any key words that happen to be in these attributes, you have made the information available to users who can't see the image, AND you have perhaps given the user some useful information that was not in the text of the webpage.
Of course, you probably should also add other attributes, which I assume you are familiar with, such as width and height.
Back to the browser difference. Internet Explorer shows the information from alt in a small popup tooltip when you hover over an image. Firefox does not do this, but it DOES show a tooltip with the information from title.
When both attributes are used in an image link, IE will show the info from alt, and Firefox will show the info from title. So using both tags for an image link ENSURES that a popup tooltip will appear on MouseOver.
See it in action: Hover over the image link below, and see what happens with YOUR browser. The coding contains both alt AND title, as in the example above.
Incidentally, the links in the footnote below show that the title attribute may also be used in other tags, such as the <a> tag.
Update (July 29, 2006): The "See it in action" above is somewhat of a "cheat". Since we're now using a "hoverTip" script, what you're seeing in both browsers when you hover over the image is really the text of the title attribute. This new script will soon be available as the topic of a new "code snippet".
[1] SEOS: Search Engine Optimization Strategies, Dennis Gaskill - Lesson 5. This ebook by Boogie Jack is an excellent webmaster resource. I use his techniques to optimize all my websites.