: Is there a way to show Google and other robots a URL to original-sized image without anchor? Let's assume I have an image. <img src="book_thumb.jpg"> And I want it to be indexed in Google

@Debbie626

Use Structured Data markup to indicate the contentUrl of the image object.

Here is an example using Microdata syntax:

<div itemscope itemtype="http://schema.org/ImageObject">
<a href="book.jpg" itemprop="contentUrl" itemprop="contentUrl" style="display:none;"></a>
<img src="book_thumb.jpg" itemprop="thumbnailUrl">
</div>


Notice that while there is an anchor tag present, it does not need to be a parent to the img tag.

Test your Structured Data with the Structured Data Testing Tool.



Related: stackoverflow.com/a/20014387/2014893

Vote Up Vote Down

@Harper822

Google indexes two primary types of online information for which you can submit sitemaps for: pages, and images

Access google webmaster tools and verify your site with them, then create a sitemap with a list of URL's to your large and other images you want google to see.

Follow the example at:
support.google.com/webmasters/answer/178636?hl=en
and replace:

<image:loc>http://example.com/image.jpg</image:loc>


with example.com/path/to/whatever/pic/to/be/indexed.jpg example.com/path/to/whatever/pic/to/be/indexed.jpg
where
example.com/path/to/whatever/pic/to/be/indexed.jpg

is of course the full URL to the large image you want google to see.

Once the sitemap is done, upload it to your server so that you can access it by entering a URL in a browser, then submit that sitemap in google's webmaster tools. Then in about 48 hours or so, check back in the sitemap section of webmaster tools to see how many large images it has indexed (made available to the public)

There may be a similar protocol in other search engines, but I'm not sure if they support image search the way google does.

Vote Up Vote Down

@Candy875

There used to be the loresattribute – but that points to the opposite direction, I suppose. Afaik there is no corresponding hiresattribute.

You could however digg into the html5 <picture> element / adaptive images, which could also be useful if you're working on a responsive layout:

<picture alt="screen-image.jpg">
<source src=original-image.jpg media="min-width:1200px">
<source src=screen-image.jpg media="min-width:480px">
<source src=small-image.jpg>
<!-- fallback for browsers without support of picture-element -->
<img src=screen-image.jpg alt="screen-image.jpg">
</picture>


I suppose google knows and respects the html5 specs – so that could be a way to point to the original / hires image while showing the other image to the browser.

Here is the specs at w3.org and here is a brief tutorial on adaptine images.

PS: you would then wrap the link around the picture element.

Vote Up Vote Down