34

I am replacing an image with a <div> with background-image for the reason of background-size: cover; The page is structured the same way as before with a image just that "the image" is a div now.

Does is makes sense to give that itemprop to a <div>?

yangli-io
  • 16,760
  • 8
  • 37
  • 47
Wayne's World
  • 387
  • 1
  • 3
  • 11

3 Answers3

55

CSS is not recognized by any Microdata parser that I'm aware of. You'll need to add a meta tag to specify the image like this:

<div itemscope itemtype="http://schema.org/Article">
  <meta itemprop="image" content="bg.jpg"></meta>
  <div style="background-image:url('bg.jpg')"></div>
</div>
علیرضا
  • 2,434
  • 1
  • 27
  • 33
Shawn Simister
  • 4,613
  • 1
  • 26
  • 31
  • Ahh thanks! Nice and totally unexpected, did not know I could to stuff like this. `` and the image both need to be childs or inside of `itemscope` for this to work correctly I guess? – Wayne's World Aug 08 '13 at 22:58
  • 1
    Yeah, they both need to be children of the itemscope node but not necessarily direct children. They can be nested inside other elements as long as there's no new itemscope declared. – Shawn Simister Aug 09 '13 at 21:54
  • 1
    FYI In HTML5 meta tags outside of the head element are invalid. – jwillmer Jun 01 '16 at 12:21
  • 1
    I'm not convinced this associates the image with the itemscope. – chovy Apr 15 '17 at 09:56
  • 1
    @jwillmer meta is allowed outside of head. Aside from reading the spec, you can verify this using the w3c validator. For example using the above example, if you drop the meta tag in, the validator will complain that the "itemprop" isn't in an item. Add the surrounding itemscope and re-validate, and it'll pass. So the w3c validator show it's actually validating the MDF as well, and it passes. – seth Feb 01 '18 at 06:16
  • you can add also urlencode() to avoid empty spaces or special chr solved by scr – open-ecommerce.org Oct 30 '19 at 13:05
11

this is a good use for a meta tag within the containing div for your itemscope.

The two attributes you want in that meta tag are itemprop and content

<meta itemprop="image" content="/some/url/to/an/image.gif" />

You can verify that meta information is, in fact, read just fine by testing it here: http://www.google.com/webmasters/tools/richsnippets

Kristian
  • 21,204
  • 19
  • 101
  • 176
  • Giving a div a src is invalid html I guess. I think I worry to much, obviously this is stupid or not? – Wayne's World Aug 08 '13 at 21:36
  • 1
    i think shawn's suggestion was good: add a meta tag to specify the url and the property. by doing that, you dont need to worry about your markup being perfect – Kristian Aug 08 '13 at 22:01
  • 1
    Kristian you are wrong. The url to the image is provided by the **content** attribute in the meta.`` as a child to the div is NOT buggy. – Nepaluz Sep 11 '13 at 13:39
  • interesting. i must have had a different opinion on the matter when I originally wrote the answer. because I, too, use the meta tag to do the exact same thing. :) I'll update my answer. – Kristian Sep 11 '13 at 16:44
0

Why not specify the img in the content and hide it with CSS if it needs to be seen in the DOM but manipulated visually as a background-image? Keeps the meta tags out of your body making it slightly more traditional in my eyes as well as retaining the default browser functionality users anticipate with images such as saving an image (menu tree on right click) and cursor highlighting, etc.

<div itemscope itemtype="http://schema.org/Article">

    <style scoped>
    /* I only use scoped to avoid excess classing in this demo.
       Read: http://caniuse.com/#feat=style-scoped */
      figure
      { position: relative;
        background-size: cover;
        background-position: center center }

      figure > img[itemprop=image]
      { opacity: 0;
        position: absolute;
        left: 0; top: 0;
        width: 100%; height: 100% }

      .specific-image
      { background-image: url(/path-to/image.jpg);
        width: 300px; height: 150px }
    </style>

    <figure class="specific-image">
        <img itemprop="image" src="/path-to/image.jpg" width="150" height="150" alt="image">
    </figure>

</div>

Resource is only downloaded once since it's the same URL path, no additional HTTP requests.

darcher
  • 3,052
  • 3
  • 24
  • 29
  • 1
    slower to render the page. – chovy Apr 05 '17 at 23:29
  • @chovy if it's content, page load speed is negated by semantic meaning. If it's purely visual it should be in css only anyways. Page render speed will be unnoticeable unless you have large images/large amount of images, in which case there are ways to accommodate that. – darcher Dec 16 '17 at 13:33