: Cropping images & SEO 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
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..
More posts by @Pope3001725
2 Comments
Sorted by latest first Latest Oldest Best
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.
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.