Mobile app version of vmapp.org
Login or Join
Shelton105

: 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

@Shelton105

Posted in: #Google #Html #Indexing #Seo

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:



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

10.03% popularity Vote Up Vote Down


Login to follow query

More posts by @Shelton105

3 Comments

Sorted by latest first Latest Oldest Best

 

@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.

10% popularity 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.

10% popularity 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;
}

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme