Adding Microdata for background images on simple HTML site

Question

I am trying to enhance our old html site (webstore) with schema and am having some difficulties getting started. We have over 1,500 individual html product pages that I would like to start adding Schema to, so getting this correct to begin with is a must.

The biggest issue thus far is how to add the product image code as our site layout is table based with the main product image inserted as a background element. Most of the research examples I have found so far show different implementations, is this possible?

Here is a code example:

<TR>
   <TD COLSPAN=2><IMG SRC="images/spacer.gif" WIDTH=122 HEIGHT=10 ALT=""></TD>
</TR>
<TR>
  <TD COLSPAN=2><IMG SRC="images/spacer.gif" WIDTH=122 HEIGHT=18 ALT=""></TD>
</TR>
</TABLE>
</td>

<td valign="top">
  <table width="599" border="0" cellpadding="0" cellspacing="0" background="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg" style="background-repeat: no-repeat;">
  <tr>
  <td width="259" valign="top"><span class="style2 "><IMG SRC="images/spacer.gif" alt="" WIDTH=259 HEIGHT=150 border="0"><br></span>
    <table width="238" border="0" align="right" cellpadding="0" cellspacing="0">
      <tr>
        <td colspan="2"><span class="style109 style31">The HOBBIT<br> BILBO'S STING SWORD</span><span class="style117"><br> <span class="style33">UC2892 United Cutlery</span></span></td>
      </tr>

From this code, I would like to highlight images/LOTR/BKG_Hobbit-Sting-UC2892.jpg as the product image via Schema.org.

I first tried adding the info to the <HEAD> section, but it does not check out correctly on Google's structured data testing tool:

<div itemscope itemtype="schema.org/Product">; <meta itemprop="image" content="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg"></meta>

Also, testing in Bing Markup tester gives me the result:

We are not seeing any markup on this page. Please ensure the markup has been implemented correctly.

Is it not okay to add the Schema data via <div> to the head area?

Also, should the image link be a complete URL www.example.com/images/LOTR/BKG_Hobbit-Sting-UC2892.jpg?

After lots of research, I've solved the issue by choosing to go with JSON-LD and adding all Microdata via a script. https://developers.google.com/search/docs/guides/intro-structured-data — Tyler Timpe, Aug 17 '17 at 09:51

unor · Accepted Answer · 2017-08-17T16:05:35.363

As your table markup doesn’t seem to be very maintainable, and as the (obsolete) background attribute can’t be used for Microdata, the best way in your case would probably be to duplicate the content and mark it up with meta/link elements.

You can add this markup in the head or in the body, but you can’t use div in the head, so it’s easier to do it in the body.

So in the body, you could simply add this:

<div itemscope itemtype="http://schema.org/Product">
  <link itemprop="image" href="images/LOTR/BKG_Hobbit-Sting-UC2892.jpg" /> 
</div>

You have to use link instead of meta if the value is a URL. And this allows you to specify any kind of URL, absolute or relative (just like in the a element).

(Also note that neither meta nor link have a closing tag, so it’s <meta> or <meta />, but not <meta></meta>.)

That said, Microdata works best if you mark up your existing content, without duplicating it. If you would have to duplicate it, it might work better for your to use JSON-LD instead of Microdata.

Agree, JSON-LD is in this case (old table layout) probably the better choise. — Oops D'oh, Sep 23 '17 at 23:36
Thanks so much Unor, extremely helpful information! Here is what I settled on using JSON (no Bing usage): `` — Tyler Timpe, Sep 26 '17 at 20:49

Adding Microdata for background images on simple HTML site

1 Answers1