2

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!

Tyler Ancell
  • 35
  • 6

2 Answers2

1

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">
Community
  • 1
  • 1
unor
  • 92,415
  • 26
  • 211
  • 360
0

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>
Gabriel Hautclocq
  • 3,230
  • 2
  • 26
  • 31
  • Thank you Gabriel Hautclocq. Just gave it a try and definitely makes marking up microdata much easier - would definitely up vote if I could. I'm assuming this does not work with Open Graph / Twitter cards? – Tyler Ancell May 15 '15 at 10:33
  • If it does not work yet, then it will soon most probably, because JSON-LD is the next big thing :-) I would be surprised that Facebook and Twitter do not support it though. – Gabriel Hautclocq May 15 '15 at 10:37
  • Definitely makes things a lot easier to consolidate like that, rather than traversing 1000 lines of html/php and adding a bunch of markup. I marked your answer as accepted! – Tyler Ancell May 15 '15 at 10:40