4

So I have a page with a bunch of images with largely varying sizes. Also the layout of the page is such that the images are all in the shape of square tiles, so just resizing will cause distorted images. What I've been doing previously is when users upload images, I resize and crop them appropriately and display the new image as the thumbnail and load full image when user clicks on it. However, I just realized this is an issue with SEO as google will crawl the thumbnails and stick the thumbnails on Google Images instead of the full images. Is there any way to show a cropped/resized image but have Google Image show the full image? I can do something with css using an enclosing div and overflow:hidden, but I'd imagine the performance on that would be pretty bad. Any suggestions?

Thanks!

PS. I saw this (Make google index the actual image not the thumbnail), but in my case I have users continuously uploading images, and the database of images is always changing and pretty big (thousands), so sitemap will be pretty unwieldy..

Improve this question
4
  • 2
    Isn't there any way for Googlebot to find links to full size images? The link you've mentioned is the answer. Just block thumbnails in the robots.txt
    – AgA
    Jan 28, 2014 at 5:53
  • Hey sorry, while that is a good answer, if I show the thumbnails (which are blocked by robots.txt) and enclose the thumbnail in an anchor tag that links to the full size image, how do I set alt keywords on the full size image since it's a link???
    – user1181950
    Jan 31, 2014 at 1:10
  • You can't but Google should be able to infer it from the alt and title tags of the thumbnails.
    – AgA
    Jan 31, 2014 at 4:51
  • You should not serve Google other info than your users. If they find out, you can say byebye to any PR you got.
    – Martijn
    May 28, 2014 at 11:57

2 Answers 2

Reset to default
1

Disallow the thumbnail image URL's with robots.txt (using the UserAgent below) and set up an image sitemap to automatically only contain the image URL's to the full size images.

User-agent: Googlebot-Image
Disallow: /images/thumbs*

The disallow directive needs to contain the correct URL path that will match all thumbnail images.

Improve this answer
8
  • 1
    Minor point... You don't need the wildcard asterisk at the end of the value, since the given value is already a prefix.
    – MrWhite
    Jan 28, 2014 at 9:53
  • are sitemaps with possibly ten of thousands of pictures considered good practice? since that's the amount I will potentially have (already thousands now)
    – user1181950
    Jan 28, 2014 at 18:34
  • so apparently sitemap limits are 50000, we'll probably breach that limit (not now, but in time)... but maybe do you guys only put the most recent x number of files in sitemap and have a script generate the sitemap regularly (weekly/daily)?
    – user1181950
    Jan 28, 2014 at 19:47
  • @user1181950: There is the other issue, that AgA queried in comments... why are your full size images not crawlable? Are you only using JavaScript to access the full size images? No progressive enhancement?
    – MrWhite
    Jan 29, 2014 at 0:07
  • 1
    yea i saw that and was working towards that too. but say I do <a href="<full image>" onclick="override with my js"><img src="thumbnail"></a> and the img is blocked by robots.txt, will google still crawl to the link pointed to by the img?
    – user1181950
    Jan 29, 2014 at 0:23
1

The trick I use for this is with background images:

<div style="background-image: url('imageA.jpg');"></div>
<div style="background-image: url('imageB.jpg');"></div>
<div style="background-image: url('imageC.jpg');"></div>

div{
    background-position: center center; /* or sometimes center top */
    width:  100px;
    height: 100px;
}

Now, when you resize the images, it should have either 100px as min-height or min-width. I believe Google will detect the images, but I'm not 100% sure (Google can see a lot).

In the end, the most important thing is that your users stay on your page, and this is a very userfriendly solution.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.