: Why Google is indexing Thumbnails and not Large images? 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

@Shelley277

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.

Vote Up Vote Down

@Jessie594

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.

Vote Up Vote Down

@Turnbaugh106

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;
}

Vote Up Vote Down