Using a different image for microdata that isn't displayed in the article?

Question

I'm working on a website that has a bunch of articles.

I'm looking to find a way to add an image that is invisible without putting it inside a hidden div.

When users add an article, there is a "main" image of the specific proportions that the users upload (which I'd like to use for microdata). There are also other images that get tossed in a carousel that they upload.

At the moment the only way I can get the microdata testing tool to use my image is by doing the following:

<div class="hidden">
    <img itemprop="image" src="link/to/image.jpg" />
</div>

What I'd like to do is use a meta tag, but this doesn't seem to work:

<meta itemprop="image" content="link/to/image.jpg">

I haven't found anything relevant for microdata, although Open Graph and Twitter Cards support meta tags for images. Does anyone know whether its possible for microdata or not, or even whether its "that" important?

I just don't want to have a hidden image that adds to load times if possible!

Answer 1

You can use JSON-LD instead of microdata.

That way you add everything you want in JSON data that is not displayed in the page, but recognized by most search engines.

Here is an example taken from http://schema.org/CreativeWork:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "CreativeWork",
  "name": "My Article",
  "image": "http://your.image.url.com"
}
</script>

Answer 2

With Microdata, you may use meta and link elements in the body.

If the value is a URI, you must use link instead of meta.

So in your case, the markup would be:

<link itemprop="image" href="link/to/image.jpg">