General Image question regarding search results

[theremotedr]

Here is a page for example.
http://www.theremotedoctor.co.uk/karfiat.html?scrollto=selection

On the page you will see various images with ALT tags which are shown in Google etc.
Fiat + Tel number + Keys & remotes etc

My question is,
When the customer makes a selection,in this case One button key remote, the photo of that item is then shown.
My part number of this item is FIAT 004
No ALT tags has been assigned to it so it will never be found in search results.
I mean as its pulled from a folder and not always on the page i see no way to add an ALT tag to it.

Or am i being thick ?

[Beverleyh]

I think you are mistaken about the purpose of alt attributes. They aren't for Google - although Google may use them - they are to provide a text equivalent description in case the image fails to load. They are used as an in-page accessibility aid. http://www.w3.org/QA/Tips/altAttribute


No ALT tags has been assigned to it so it will never be found in search results.Not so. Google will pay attention to key words in the file names.

Bad - IMG0123.jpg
Good - spiced-biscotti-with-cranberries-and-white-chocolate.jpg

[theremotedr]

Oh dear.
I did know that but i also thought that was also the way for search engines to find them etc.
Now i have a big issue as my images etc are named like this. MAZDA001 HONDA015
These would never be found & i now know that they should be named like honda-accord-2-button-key
My problem now is that the site pulls & loads photos from MAZDA001 etc
Having to go though & sort everything is a huge task.

Do you have any help/advioce ?

[Beverleyh]

Not really other than to tackle it in stages.

The whole URL plays a part too though, so if, for example, your images are stored in a logical/descriptive folder structure, Google will takes cues from that;

'/keys/honda/accord/2-button/HONDA015.jpg' (all the better if HONDA015 is an industry recognised code/part number)

[theremotedr]

Hmmm
The MAZDA001 i mentioned above has a url as shown http://www.theremotedoctor.co.uk/karmazda.html?scrollto=selection
Having said that if i make another selection to say MAZDA007 the url is the same.

[Beverleyh]

Not sure what you mean.

I was referring to the URL of the image outside of the context of a web page - i.e. '/keys/honda/accord/2-button/HONDA015.jpg'

The filename and the URL, when containing keywords, all help Google to understand what the content of the file (image, pdf, etc.) is about in order to serve it in related results.

The link you provided isn't really a URL - more of a URI (a location anchor within a web page that is not really specific enough for Google to identify the image resource)

[Beverleyh]

For reference (and the benefit of others reading this thread) https://support.google.com/webmasters/answer/114016?hl=en

[theremotedr]

Ive seen that and now thinking.
Take this page for example http://www.theremotedoctor.co.uk/karfiat.html?scrollto=selection
Item selection you will see One button key remote.
When you select it then the image is shown.
This image is named FIAT004.PNG and i think this is where my problem lies.
When people search Google etc my image would only realy be shown if people typed FIAT004.PNG
On the other hand if this image was called FIAT ONE BUTTON KEY.PNG there would be a very much higher chance it would be found & shown rather than FIAT004

The code which applied to the selection on the right called One button key remote is as follows.

<li><a href="javascript:" onclick="replaceMainImage('m-images/photos/FIAT004.png', 'Fiat004','<b>£35.00</b><br>Chip Will Require Programming<br>Key Will Require Cutting<br><scan class=keychipColor>+ Virgin Chip & Uncut Key</scan><br><b>UK Recorded £2.50</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><scan class=drColor>The Remote Doctor</scan>')">One button key remote</a></li>

Would it be best for me to just add some relevent text after the FIAt004 file name ?
Just trying to overcome this issue without messing up what is cuurrently a working site.

[styxlawyer]

Search engine robots do not click on menu buttons in any page, so will never see images loaded by JavaScript. However there's a trick you can use to overcome this.

The best way to ensure that Google and other search engines see the "alt" attributes of images is to pre-load them in an invisible part of the page. Put this code in at the start of your page and the search engines will find the "alt" attributes which they use to index images:



<div style="display:none;">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
</div>

[Beverleyh]

Search engine robots do not click on menu buttons in any page, so will never see images loaded by JavaScript. However there's a trick you can use to overcome this.

The best way to ensure that Google and other search engines see the "alt" attributes of images is to pre-load them in an invisible part of the page. Put this code in at the start of your page and the search engines will find the "alt" attributes which they use to index images:



<div style="display:none;">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
</div>
Hmmm, this isn't a great idea because it will have a negative impact on page performance - All the images will download in the background, even though they will not be seen.



Would it be best for me to just add some relevent text after the FIAt004 file name ?Do you mean here?;
<li><a href="javascript:" onclick="replaceMainImage('m-images/photos/FIAT004.png', 'Fiat004','<b>£35.00</b><br>Chip Will Require Programming<br>Key Will Require Cutting<br><scan class=keychipColor>+ Virgin Chip & Uncut Key</scan><br><b>UK Recorded £2.50</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><scan class=drColor>The Remote Doctor</scan>')">One button key remote</a></li>No, that wouldn't be the *best* thing you could do because Google wouldn't know how to associate the text with the image. In fact, Google wouldn't be able to tell from the markup that this is an image at all (its an anchor); <a href="javascript:" onclick="replaceMainImage('m-images/photos/FIAT004.png' ...

However, Google *can* tell that this is an image; <img src="m-images/photos/FIAT004.png" alt="Fiat Punto 3 Button Key Remote" /> Because it's programmed to recognise this img element as being an image.

The correct 'tool' for getting Google to associate text with an image is through the alt attribute and title attribute (to varying degrees) of an image tag. You can also use HTML5 captions.

I think the best thing you can do in your case, with the least disruption to your page and keeping the JavaScript functionality as is it, is to rename the files as previously discussed.

However, to do the job *properly* you might want to consider building the web pages over using the correct semantic markup. i.e. figure, img, figcaption, alt attribute and title attribute.

[theremotedr]

Currently its shown as

<a href="javascript:" onclick="replaceMainImage('m-images/photos/FIAT004.png', 'Fiat004','<b>£35.00</b>

By adding a ALT tag it would then be shown as
<a href="javascript:" onclick="replaceMainImage('m-images/photos/FIAT004.png alt="Fiat 1 Button Key', 'Fiat004','<b>£35.00</b>

And scripts etc would be untouched,just making sure this is the correct way in adding the extra alt section before i start ?

Thanks

[Beverleyh]

It isn't an img tag so Google will have a hard time making the association, if at all. Google will not click your link, parse the JavaScript, run the function, build the markup and then interpret it as a dynamic image on the fly. For Google to read and understand an img from markup, it needs to see an <img> element in the markup (HTML not JavaScript).

[theremotedr]

Ok
So im a little confused but understand what you are saying,i understand the link will not be clicked hence why im asking where i need to make the edit.
If currently i have an image named FIAT004
And the code on the page for it is as follows.

<li><a href="javascript:" onclick="replaceMainImage('m-images/photos/FIAT004.png', 'Fiat004','<b>£35.00</b><br>Chip Will Require Programming<br>Key Will Require Cutting<br><scan class=keychipColor>+ Virgin Chip & Uncut Key</scan><br><b>UK Recorded £2.50</b><br><b>International Signed For £10.00<br></b><b>Posted From The UK</b><br><scan class=drColor>The Remote Doctor</scan>')">One button key remote</a></li>
Please advise what/where i need to edit etc so i can continue with this.

[Beverleyh]

There is no benefit in adding an alt attribute on the client-side via JavaScript - Google will not see it in the context of an <img> tag. You will be better off focusing your energies on making changes that Google can see and understand, such as rename files with descriptive keywords.

[theremotedr]

Ok
Tomorrow i will start to rename all images.
I will keep the initial file name Fiat004 etc but add extra text.
Is Fiat004 one button key ok or should i add fiat again like so ?

Fiat004 Fiat one button key

The whole point of doing this is for search engines etc so dont want to do it twice .

Many thanks again.

[styxlawyer]

Hmmm, this isn't a great idea because it will have a negative impact on page performance - All the images will download in the background, even though they will not be seen.

.
.


Yes, I agree that it will slow down the page loading marginally. However, it will achieve what the OP asked for with very little intervention in the source code.

[Beverleyh]

However, it will achieve what the OP asked for with very little intervention in the source code.Not necessarily. Gary Illyes from Google stated this a similar online discussion in late-July 2015;
Hiding the content with a display:none might backfire on you. We are giving hidden content way less weight in ranking.https://www.seroundtable.com/google-display-none-20626.html

theremotedr - if it were me I'd name them 'fiat004-fiat-one-button-key.jpg' so you still get the benefit of your part number for organisation purposes in the backend.

[theremotedr]

So do you advise me to do this.

I will keep the initial file name Fiat004 etc but add extra text.
Is Fiat004 one button key ok or should i add fiat again like so ?

Fiat004 Fiat one button key.png

The whole point of doing this is for search engines etc so dont want to do it twice .

[Beverleyh]

Please refer to my previous post regarding suggested naming convention.