Getting images indexed

Using Highslide gets thumbs indexed instead of main images

[JWJonline]

I'm frustrated with the best way of getting my images indexed and am hoping someone here can help. I use Highslide to display my artwork and the code for displaying a typical image would look like this ...

<div class="Picture">
 <a id="castle" href="art/castle.jpg" onclick="return hs.expand(this)">
 <img class="tnail" src="art/castle-th.jpg" title="Castle" alt="some suitable alt text"/></a><div class='highslide-caption'>a caption that sits beneath the picture describing it</div>
 <h2>Castle</h2>
</div>

The main (larger) image is castle.jpg and the small thumbnail is castle-th.jpg. Because the image within the <img> tag is the thumbnail and that's also what is associated with the Title and Alt attributes, that is the image that is getting indexed by the search engines. I have made it this way so that the initial page load only has 20 small thumbnails to handle, the larger images being served up as requested.

As an alternative I could dispense with the thumbnails and live with the slower loading pages. That might get my main images indexed but I'm aware Google in particular doesn't like slow pages.

I'd be very grateful for any thoughts and suggestions as to which method is likely to be the best. I'm also aware that I could create an image sitemap in which I need list only the larger images ... might that give me the best of both worlds.

[lammert]

Did you try the HTML <picture> tag with images with different sizes in a source set?

[lucy24]

Are the “real” images getting crawled? They should be, since the major search engines can read scripts. If not, is something preventing search engines from crawling the script that would tell them about the image?

Question I can't currently answer, but which is relevant: When there is a page >> thumbnail >> script >> larger image sequence, will image-search results still be able to say what page the image “belongs” to? Presumably you want people to go to the page itself, since you don’t get any benefit from them just looking at the image in a SERP.

[JWJonline]

@lammert, I know nothing about the <picture> tag or source sets .... I'll go and look them up.

@lucy24, I suspect the image in the <img> tag is being crawled but very few seem to be indexed. With regards to your question, if I find one of my images in image-search then it is usually associated with the relevant page. As you say, I want people to go to the page and not just view the image.

[JWJonline]

@lammert, as far as I can see <picture> and source set allow different size images to be served up according to the screen size. I can't see a way of selecting a single thumbnail and having it enlarge, which is what I need to do.

[lammert]

You can change the size of an element containing an image with some small CSS code without JavaScript. The following code switches between a thumbnail and a full size picture. This is a simple example with only one image, but you can expand it with an image set with both low-res and high-res versions.

.imag { width: 200px; }
.large:focus ~ .imag img {
 width: 500px;
}
.small:focus ~ .imag img {
 width: 200px;
}

<span class="large" tabindex="0">Enlarge</span>
<span class="small" tabindex="0">Thumbnail</span>
<div class="imag" ><img class="imag" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/1200px-Google_Images_2015_logo.svg.png"></div>

What it does is first showing the picture in thumbnail size. Clicking on the Enlarge text will enlarge the image. Clicking on Thumbnail will bring it back to the original size. If this uses an image set, chances are pretty high the larger version of the image will also be seen and indexed by Google.

[JWJonline]

Thanks for that lammert. I'll have a play around with it and see how it might work for my situation. First I'd like to try and find out more about how Google is reacting to my existing pages. In the absence of an answer to my specific question I've gone ahead and made an image sitemap. I'll give it a while to see if it helps before I start thinking of rebuilding my site.

[NickMNS]

The most likely reason that Google isn't indexing your large images is that you may not be actually linking to them. I'm speculating but based on this code:

<a id="castle" href="art/castle.jpg" onclick="return hs.expand(this)">

hs.expand method most likely calls event.preventDefault() which stops the browser from going to the linked content, and then I assume it uses ajax to get the image and then displays it in modal in it's expanded form. Thus, Googlebot is unable to follow the link to the image file. One possible solution would be to add a true link to the image file somewhere on the page, but adding an image sitemap may be sufficient.

Let me just add, be careful what you wish for, Google images doesn't drive the traffic as it once did, instead your content goes to populate their pages and ads. The most likely traffic it will attract is spammers and scrapping bots that will hot-link your images and display them on tens of thousands of spam websites. If you haven't already, I strongly suggest that you implement hot-link protection for all your image files.

[JWJonline]

Thank you for the explanation NickMNS. Without understanding the technical aspects of it, I've long suspected the Highslide method (hs.expand) to be a barrier between my images and the SE's. For a long time I had it configured differently and that method was leaving me without alt tags, which I eventually determined was definitely harming my image rankings. I like the responsive image zoom feature of Highslide but wish there was a more SE-friendly option.

I hear what you say about spammers and hot-linking. I have near to 300 images out there being used by such people. I have switched on hot-link protection and am currently working my way through the rest with 'take down' notices, which is working but it's a slow and laborious task.

An art site, such as mine, relies on it's images being found so I can only battle away at trying to get the best indexing I can. It's very frustrating that images I used to post on my blog, and those 'stolen' by spammers, are being indexed in preference to the originals on my website.