0

I have a website that 40 babynames are shown in each page, each name have some photos that are uploaded by users. I use iframes to show the images of each name when the user clicks on "show photos button" (iframe is created dynamically after click). Well in this case images are never indexed with search engines.

If I load them right after each name (and not in a iframe) then the page size will be very large and will load very slow.

I'm looking for a way that load images on demand (just as it is now) without using iframes. setting the src on demand will be in-vane as search engines won't have access to them and setting them will make page very heavy as I said before.

Any suggestions on how to do this?

Yojimbo
  • 20,032
  • 5
  • 39
  • 45
Ashkan Mobayen Khiabani
  • 30,915
  • 26
  • 90
  • 147
  • What exactly is your question? You want the images to be visible in Google? – Tasos K. Aug 30 '14 at 11:51
  • I want them to be visible to google but without having to load all of them every time the page loads – Ashkan Mobayen Khiabani Aug 30 '14 at 11:53
  • Check this older post http://stackoverflow.com/questions/5117421/how-to-load-images-dynamically-or-lazily-when-users-scrolls-them-into-view. One answer suggests the jQuery lazyload plugin which makes the images to load only when needed – Tasos K. Aug 30 '14 at 11:57

2 Answers2

1

You could use a php script that displays one singe thumbnail (1x1 pixels) when the query string ends on "small"; with ajax you can now access every single image and remove the ending "small" so that the php script uses the original file. http://php.net/manual/en/function.imagejpeg.php might help ^^

So you access "image.php?myimage.jpg-small" and the script loads the fixed thumbnail that will get cached after the first load. Then, you change the img src property using ajax to "image.php?myimage.jpg" and we're done...

You could use a .htaccess - rewrite for better look of the image source...

  • well actually I'm programming with asp.net but however you gave me a nice idea. I would make srcs aspx scripts without query string that loads 1x1 image when called from my own website but full image when called from other domains and replace src with real ones on demand – Ashkan Mobayen Khiabani Aug 30 '14 at 11:50
0

You can't really get Google to index the images if they're not there to start with - could you use thumbnails instead for each image avoiding slow loading speeds and allowing Google to index them? Then on click you could replace the src tag with the full size image.

There's libraries like Timthumb that can generate and cache thumbnails for you if you don't want to write all the resizing code.

Code Synthesis
  • 470
  • 4
  • 10
  • Actually the images I'm talking about are thumbnails but imagine 400 thumbnail (each about 10kb) would be 4MB on each page and as users come to find names for their new born babies they normally view lots of pages. – Ashkan Mobayen Khiabani Aug 30 '14 at 11:39
  • I can't see a technical solution within the current structure - either you show the images and there's overhead of loading them, or you load on demand but Google wouldn't be able to index them from that page's content. You might want to consider a different approach to your structure though, e.g. a sub individual 'baby' page that has the thumbnails instead, so you're not loading them all at once, but Google can still index them. – Code Synthesis Aug 30 '14 at 11:48
  • have a look at @Pi_isnt_42 answer and my comment, what do you think? – Ashkan Mobayen Khiabani Aug 30 '14 at 11:52
  • Nice idea, I don't know if Google would have any way of detecting this manipulation (as in theory it could be abused), but I can't see how a indexing bot would know by looking at the source with the htaccess addition. You might also want to consider an image sitemap to improve the ranking chances: https://support.google.com/webmasters/answer/178636?hl=en – Code Synthesis Aug 30 '14 at 12:07