CODEWITHSUNDEEP
htmlschema.orgmicrodata
juFo
juFo

Reputation: 18567

How to correctly reference Microdata item from meta tag in header?

<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/WebSite">
<head>
  <meta itemprop="creator" itemscope itemref="mdFoo">
</head>
<body>

 <div id="mdFoo" itemscope itemtype="http://schema.org/LocalBusiness">
        <meta itemprop="name" content="Foo comp">
        <meta itemprop="telephone" content="0">
        <meta itemprop="legalName" content="Foo comp Ltd">
        <meta itemprop="url" content="http://www.foo.com">
        <meta itemprop="email" content="[email protected]">
        <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
            <meta itemprop="streetAddress" content="mystreet">
            <meta itemprop="postalCode" content="1233">
            <meta itemprop="addressLocality" content="London">
            <meta itemprop="addressCountry" content="UK">
        </div>
    </div>

</body>
</html>

when validating with Google ( https://google.com/webmasters/markup-tester/ ): "WebSite is not a valid type."

Using https://validator.nu/ gives me "Element meta is missing required attribute content".

Any suggestions on how to fix this?

Upvotes: 0

Views: 1179

Answers (1)

unor
unor

Reputation: 96567

You have to specify the itemref on the itemscope to which you want to add properties (i.e., the html element in your case). And the element with the corresponding id would have to get the itemprop.

However, in your case you don’t need the meta element, and you don’t need to use itemref:

<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/WebSite">
<head>
  <title>…</title>
</head>
<body>

  <div itemprop="creator" itemscope itemtype="http://schema.org/LocalBusiness">
  </div>

</body>
</html>

But let’s say you use another itemscope (e.g., for a WebPage item) on the body, in which case you’d need to use itemref:

<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/WebSite" itemref="mdFoo">
<head>
  <title>…</title>
</head>
<body itemscope itemtype="http://schema.org/WebPage">

  <div itemprop="creator" itemscope itemtype="http://schema.org/LocalBusiness" id="mdFoo">
  </div>

</body>
</html>

Now the creator property will be applied to both items (WebSite thanks to itemref, and WebPage because it’s a child).

Upvotes: 4

Related Questions