Welcome to WebmasterWorld Guest from

Message Too Old, No Replies

Getting Google to Index Images from Lightbox JavaScript



11:22 pm on Dec 23, 2009 (gmt 0)

5+ Year Member

I am using a javascript to call up a number of large images to be displayed in a modal window or lightbox.

The images are not referenced in the webpage itself using the typical <img src> tag, as in:

< img src="www[dot]example[dot]com/images/image_url.jpg" >

Instead, I use a <a href> tag in the webpage and a onclick parameter to call up my lightbox javascript to display the image, as in:

< a href="" onclick="lightbox_javascript('www[dot]example[dot]com/images/image_url.jpg') ... >

The problem is that because I did not use an <img src> tag to reference the image, Google Images will NOT index the image despite the fact that the ENTIRE URL pointing to the .jpg image was part of the html code of the webpage.

Is there anything I can do to tag the large .jpg link so that it will be indexed by Google Images without it being referenced inside the <img src> tag which I cannot embed as a parameter to be passed onto my lightbox javascript?


3:33 am on Dec 24, 2009 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

I've been up against the same challenge. Even though regular Google search is aggressively discovering URLs and content by spidering JavaScript, apparently the image bot is not so inquisitive at this point. This surprised me, because there are many images being displayed through Lightbox scripts these days.

My latest attempt involves making the anchor part of the link a thumbnail image - but the thumbnail is not just a smaller version of the larger image. I use the same exact image file for the anchor, but I resize it on the the page with the HTML width and height attributes. This means that the page loads more slowly, but at least the image bot gets a direct <img src=[url]> style mark-up.

Now the bad news. So far, those images are still not indexed and it's been about 3 months. I'm almost ready to think that those smaller width and height attributes are causing the bot to skip over these images anyway!


4:46 pm on Dec 24, 2009 (gmt 0)

5+ Year Member

Thanks, again Tedster. Please post your feedback should you ever see an uptake of these resized images on your site. I am tempted to do the same as well, but will hold off for now because of your experience.


2:01 pm on Dec 28, 2009 (gmt 0)

WebmasterWorld Administrator brett_tabke is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

What about just leaving the directory of the images open for indexing? Or linking to the images site map style and allowing the crawler to find them that way?


1:19 am on Dec 29, 2009 (gmt 0)

5+ Year Member

Stylistically, I prefer not to expose a plain directory of my site. It looks unprofessional. We thought about just providing a direct link to the image itself such as www.example.com/images/testimage.jpg, but this will mean the image will be indexed WITHOUT context, since the image is displayed outside of any of our site's webpage.

Any other suggestions I can try? Please post them here.

[edited by: engine at 12:27 pm (utc) on Dec. 29, 2009]
[edit reason] please use example.com [/edit]


2:13 am on Dec 29, 2009 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Just today I found one image indexed from a page with ten thumbnails - there's hope!


3:11 am on Dec 29, 2009 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

I'm not sure if it's considered "cloaking," and I don't employ this on my sites, but could you possibly reference your images (<img>) on the page and hide them?

For example, along with your anchor code, also include:

<img src="images/image_url.jpg" style="visibility:hidden;" alt="my image">
<a href="" onclick="lightbox_javascript('images/image_url.jpg')>

Probably not even considered cloaking since you are showing the image on the page through the anchor javascript. But it does create twice the code.


3:25 am on Dec 29, 2009 (gmt 0)

5+ Year Member

That is good news, Tedster. Still, the conversion rate is far less than optimal.

Celgins, your idea is very interesting, though the image will be readily visible if CSS/style sheet is turned off. In addition, because the anchor image is a thumbnail image, BOTH the thumbnail and the large image (which is "hidden" using your method) will be displayed.

Tedster, what do you think of Celgin's trick?


4:15 am on Dec 29, 2009 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

I'm already showing the image in an <img> element on the page - only the width and height attributes scale the full image image down to thumbnail size. I am not comfortable with hiding anything on the page unless an obvious user action- like a click - makes it visible. Since the image in this case does become visible through a click, this might be a useful approach if a page is not already using clickable images in the anchor.


4:06 am on Jan 5, 2010 (gmt 0)

5+ Year Member

I look after a site that is using images that are displayed in lightboxes, some are through prettyPhoto, and others are through a slightly modified version of gallerificPlus. The base code for both is basically the same though, an unordered list that contains the thumbnail images (different file to the full image), which as far as the HTML is concerned are then linked to the larger image file directly. The only reference to the larger image on the page is through the anchor link. The JavaScript is based on jQuery and unobtrusive so there are no onclick attributes within the anchor tags.

If I go to Google Images and search for site:<domain name> I can see that these larger images have been indexed, usually with either the associated page or post title text beneath it depending on the area of the site that the image is found. Occasionally some images even have a snippet of the associated page/post beneath instead of the page title.

Am I missing something or is this not Google Images indexing an image from a lightbox and still maintaining the context from the page which it was found?

I am noticing that there are a couple of images where the context isn't perhaps what it should be as it was indexed from a blog listings page, for example one has the text "Showing 1 - 10 of 65 Posts". But I wonder if this couldn't be helped by making use of the title attribute in the anchor that is linking to it?


6:05 am on Jan 5, 2010 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Hi chip, and welcome to the forums.

There certainly are variants in lightbox scripts. The two sites I work with that are having troubles are using a variation called slimbox. I'm glad to hear you are not having particular troubles. Google's John Mueller commented on SERoundtable [seroundtable.com] that "In general, Lightbox is not a problem."


7:26 am on Jan 6, 2010 (gmt 0)

5+ Year Member

I read the follow-up post, but there is no specific on why this is not a problem. In our experience, the URL to the "larger" image file is referenced inside an onclick() parameter (which means it is not associated with a < a href > tag). The anchor is a typical < a href > tag to a "smaller" image file.

The problem is that only the "smaller" image file is crawled and indexed by Google, not the "larger" one.

The experience reported by chip_d sounded as if these non-href linked images are also indexed. This is not what we are seeing.

Tedster, am I understanding the Mueller's comment correctly?


6:16 am on Jan 7, 2010 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

I think you arre understanding John Mueller the same as I am. As a general rule, there should be no problems and he can't comment on specific problems that some of us have had unless we give him the domain to look at - that's something he helps with for people who post on the Google Groups forum.

Featured Threads

Hot Threads This Week

Hot Threads This Month