CODEWITHSUNDEEP
htmlimageurlschema.orgmicrodata
Adam
Adam

Reputation: 6122

itemprop=url property on picture element not validating

I have the code below which if I test it on https://search.google.com/structured-data/testing-tool, I get an error

A value for the url field is required.

on the image element.

I tried placing the itemprop='url' attribute on the picture, source and img element but the error remains the same. How can I add the url property so Google accepts the structured data?

<li itemscope itemtype='http://schema.org/LocalBusiness'>
<div>
    <div itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
        <a href="http://www.example.com/venues/220/studio-54">
        <picture>
            <source itemprop='url' type='image/webp' data-srcset='/images/venues/medium/220_663_studio-54.webp'>
            <img data-src="/images/venues/medium/220_663_studio-54.jpg"/>
        </picture>
        </a>
    </div>
    <div>
        <h3><a href='http://www.example.com/venues/220/studio-54'>
        <span itemprop="name">Studio-54</span></a></h3>
        <div itemprop='address' itemscope itemtype='http://schema.org/PostalAddress'>
        <a itemprop='addressLocality' href="http://www.example.com/vendors/venues/c/netherlands/north-holland/amsterdam">Amsterdam</a>, <span itemprop='addressRegion'>North-Holland</span>
        </div>
    </div>
</div>
</li>

Upvotes: 2

Views: 1959

Answers (1)

unor
unor

Reputation: 96547

See the Values section in the Microdata spec (Working Draft):

  • When adding the itemprop attribute to an img or source element, Microdata uses the value of the src attribute.

  • When adding the itemprop attribute to a picture element, Microdata uses the textContent of the element.

In your case, you might want to add a src attribute to the img element (which is required by HTML anyway, in addition to the alt attribute), and move the itemprop from source (which requires a srcset attribute) to img:

<img itemprop="url" src="/images/venues/medium/220_663_studio-54.jpg" data-src="/images/venues/medium/220_663_studio-54.jpg" alt="" />

If you want to keep the attributes like that (e.g., for lazy loading), you could use a link element to provide the URL of the image (browsers don’t load this):

<div itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>

  <a href='http://www.example.com/venues/220/studio-54'>
    <picture>
      <source type='image/webp' data-srcset='/images/venues/medium/220_663_studio-54.webp'>
      <img data-src='/images/venues/medium/220_663_studio-54.jpg' />
    </picture>
  </a>

  <link itemprop='url' href='/images/venues/medium/220_663_studio-54.webp' />

</div>

Upvotes: 3

Related Questions