4

I have a page full of thumbnails, when clicked it opens the Full size image in new tab.

The problem is that Google is indexing the Thumbnail photos only, and leaves the Large images that it links to.

I need the alt attribute text of the Thumbnail to lead to the Original image when searched in Google Images.

My code is below:

<div class="thumb">
  <a href="images/wallpaper.jpg">
    <img src="images/wallpaper-small.jpg" target="_blank" alt="wallpaper-description">
  </a>
</div>

And this is an illustration of how my page works:

enter image description here


What I am doing wrong? what can be done to index Large images and leave Thumbnails?

  • Also, check through Google's Image publishing guidelines – DocRoot Dec 2 '17 at 16:43
  • You can prevent Google from indexing the thumbnails using robots.txt or X-ROBOTS header – Stephen Ostermiller Dec 3 '17 at 0:05
  • @DocRoot Thanks, I have read that article several times before. – MEGA Dec 3 '17 at 8:10
  • @StephenOstermiller Yes I did that on another page as a test, lets see how it goes. – MEGA Dec 3 '17 at 8:11
4

The issue is that Google only sees one ALT tag therefore the other image is without description and will not rank in image search results.

If using a lightbox then preferably you should code or use one that supports HTML5 data- e.g:*

<div class="thumb">
    <img src="example.jpg" data-src="example-thumbnail.jpg" alt="example">
</div>

If you are using only CSS and HTML then you COULD use one of 3 methods that I can think of:


Method 1: Scrap the thumbnails and resize the larger image down to thumb size:

<!-- HTML -->
<div class="thumbnail">
    <img src="example.jpg" alt="example">
</div>

/* CSS */
.thumbnail img {
    max-width: 200px;
}
.thumbnail img:hover {
    max-width: 100%;
}

You could even spice this up by using a Pure CSS lightbox


Method 2: Link to a valid page rather than a image:

<!-- Embedded Small -->
<a href="/path/to/example.html" title="View Image Full Size">
    <img src="example.jpg" alt="thumbnail of example">
</a>

Method 3: Show and Hide:

<!-- Both Images -->
<div class="thumbnail">
    <img src="example.jpg" alt="example">
    <img src="example-thumbnail.jpg" alt="example thumbnail">
</div>

/* CSS */
.thumbnail img:first-child {
    max-width: 200px;
}
.thumbnail img:last-child {
    max-width: 100%;
    display: none;
}
.thumbnail:hover img:first-child {
    display: none;
}
.thumbnail:hover img:last-child {
    display: block;
}
  • Thanks for your input, but I am not using any Lightbox. its plain CSS/HTML as in the code and photo I have provided. – MEGA Dec 2 '17 at 12:48
  • 1
    Okay, but the issue is the same. No ALT. Google can't index or rank images without a description, it does not use <a title=""> or the filename. – Simon Hayter Dec 2 '17 at 12:53
  • Updated the answer but you simply can't do what you want Google to do without doing something similar, how ever much you dislike it, all major search engines work in this way. – Simon Hayter Dec 2 '17 at 13:26
  • 1
    Method 1 wont be ideal as the page contains hundreds of images, scaling down would slow down the page. Method 2 is not practical, as I would have to create thousands of pages. For Method 3 I have to take a look at that and see how it functions. – MEGA Dec 3 '17 at 8:20
  • Method 1, 2 and 3 are slower. method 3 is slower than method 1 since it downloads both thumbnail and larger image since browsers download elements that are hidden. – Simon Hayter Dec 3 '17 at 12:01
2

For your images, you can apply the structured data as a property ImageObject. Something like this: to rdfa

<div class="thumb" vocab=http://schema.org/ typeof=ImageObject>
<a href="images/wallpaper.jpg" title="wallpaper-description" property=contentUrl><img src='images/wallpaper-small.jpg' alt="wallpaper-description" property=thumbnailUrl></a></div>

to microdata

<div class="thumb" itemscope itemtype="http://schema.org/ImageObject">
<a href="images/wallpaper.jpg" title="wallpaper-description" itemprop="contentUrl"><img src='images/wallpaper-small.jpg' alt="wallpaper-description" itemprop='thumbnailUrl'></a>

Check this on Google tester for structured data.

  • Another person have suggested Structured Data too, I am still confused on this structured data scene. Let me do some research of what it is exactly. Thanks. – MEGA Dec 3 '17 at 8:21
  • To compress your images/thumbnail, you can use this tool imageoptim.com/online – nikant25 Dec 3 '17 at 10:47
  • 1
    ALT is not valid code within a HREF and will be ignored by Google and may cause problems with impaired users. Title tag is for HREF but is not factored in when indexing content. – Simon Hayter Dec 4 '17 at 20:13
  • @Simon Hayter I agree. So I changed my answer. – nikant25 Dec 5 '17 at 6:53
  • @nikant25 src within <a> is also not valid code. – Simon Hayter Dec 5 '17 at 9:27
1

The target attribute should be on the link and not the image. That is not your issue anyway. The real issue is that google has no idea what is in your images.

The real way to fix this is to create an image sitemap. The Google documentation is here. Basically it lets you tell Google what is in the image, the caption, and give it a title. This not only allows Google to index it better, it allows then to provide better relevance to searches.

  • Do you mean I should include large image link and leave out the thumbnail? like this: <image:loc>/images/large-image.jpg</image:loc> <image:caption>Caption here</image:caption> <image:title>Title here</image:caption> – MEGA Dec 4 '17 at 10:30
  • No. Thumbnails are important but put the large images in the image sitemap and do not list the thumbnails there. – Itai Dec 4 '17 at 14:43
  • @Itai Google does not factor in title when ranking. – Simon Hayter Dec 4 '17 at 20:14
  • No but it does affect relevance and what is shown in results, even if it does not give rank. – Itai Dec 4 '17 at 22:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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