Adding text to image,confirmation required

**theremotedr** · 10-08-2013, 01:17 PM

I would like to add some text for the images on my site & place it into my code for search engines purposes

A section of my code at the moment is as follows.
<img src="fiat/flip-remote-3button.png" width="150" height="52" class="imgshadow" /></a>

If i add the following
alt="IMAGE DESCRIPTION HERE"

Is this then correct,so i can continue.
<img src="fiat/flip-remote-3button.png" alt="IMAGE DESCRIPTION HERE" width="150" height="52" class="imgshadow" /></a>

Just looking for confirmation,many thanks

**jscheuer1** · 10-08-2013, 03:14 PM

Yes, that's how to do it. You should not have </a> at the end there unless the image is linked.

Like the other attributes of tags, it can go anywhere within the (opening*) tag.

In older IE, the alt attribute is treated as a title attribute when no title is present. Other browsers will not do this. You should decide if you also want this information as a title. Titles appear as tool tips on hover of the image. If not, add a blank title:

Code:

<img src="fiat/flip-remote-3button.png" title="" alt="IMAGE DESCRIPTION HERE" width="150" height="52" class="imgshadow" />

If you do want it as a tool tip in all browsers, make it the same as the alt:

Code:

<img src="fiat/flip-remote-3button.png" title="IMAGE DESCRIPTION HERE" alt="IMAGE DESCRIPTION HERE" width="150" height="52" class="imgshadow" />

Or you can make it something different:

Code:

<img src="fiat/flip-remote-3button.png" title="Some other text" alt="IMAGE DESCRIPTION HERE" width="150" height="52" class="imgshadow" />

All browsers will show/not show a tool tip under these conditions.

Or, you can ignore older IE by using no title at all, and let it show that alt as a tool tip. Less typing.

* img is a self closing tag, so has only an opening section

**Beverleyh** · 10-08-2013, 03:17 PM

Yes, the alt attribute offers an alternative text for screen reader/those with images turned off and gives meaning/worth/value to search engines. I try to make my image filenames keyword-rich and the alt attribute equally so but slightly more verbally descriptive. If you get a few good keywords in both the filename and alt, they have more chance o coming up in google image searches too.

Here's and article that you might find interesting: http://sixrevisions.com/content-stra...images-videos/

And also, optimise, optimise, optimise!

DD has a good online optimiser tool: http://tools.dynamicdrive.com/imageoptimizer/

For offline and batch compression, I like PNGGauntlet (free): http://pnggauntlet.com/ and Shrink-O-Matic (free): http://toki-woki.net/p/Shrink-O-Matic/ at about 70% quality for jpeg

I've heard that RIOT (free) is also good for jpegs: http://luci.criosweb.ro/riot/ although I haven't personally used it.

I tend to opt for Adobe Fireworks when it comes to jpeg - it isn't free but it seems to beat all the jpeg optimisation tools (that I've tried) hands down.

**theremotedr** · 10-08-2013, 04:42 PM

Basically i do not wish to see any text when you hoover over an image,so by using the following code will cover me for IE chrome & Firefox etc ?

<img src="fiat/flip-remote-3button.png" title="" alt="IMAGE DESCRIPTION HERE" width="150" height="52" class="imgshadow" />

I thought the alt option was that search engines would crawl my site and display in the search results etc as with no alt nothing would be recovered.
All my photos are not dsc123456.jpg etc but a description of the item like hondacivickey.jpg
So i think thats covered correctly.
I was thinking of using the alt option so when people type in say google honda civic key it would also collect from photo.
If you then look through the list of results returned by google and click on my photo you then have the option where it reads something like go to this site.

Have i got the understanding of the alt correct ?

**Beverleyh** · 10-08-2013, 05:52 PM

Well the alt attribute text is more for screen readers and something to be visible if images are turned off. They'll show up in Google image search results too but that's more of a happy side effect from the evolution of new algorithms and search behaviour - it isn't the original function, which is to enhance user experience. It does help though. I *believe* that greater weight is placed on file names as keyword/search terms used there form part of the image URLs so there is a stronger relationship with the resource than what is covered in HTML markup.

Here are Google's own recommendations relating to images : https://support.google.com/webmaster...r/114016?hl=en

**theremotedr** · 10-08-2013, 06:03 PM

ok good.
So at the top of each page i have put the name of the page in the title tags.
This is also good for search engines ?

**Beverleyh** · 10-08-2013, 06:13 PM

The title tag becomes the clickable link in search results so aim to make it enticing to folks browsing the web. You need to reach a happy medium with regard to tailoring it to include keywords, while keeping it descriptive and inviting for human visitors.

I would love to chat more about this area as its something that I find really interesting (and its a big part of my employment) but today is my boyf's birthday and I have to dash now and take him cake!