Do You Put Schema Microdata Meta Tags in the HTML Body

Do you put Schema Microdata meta tags in the html body?

If a meta element

  • has an itemprop attribute and a content attribute, and
  • has no name attribute, no http-equiv attribute, and no charset attribute,

then it’s valid to have this meta in the body. (If the value is a URL, you must use link instead.)

Why? Because the Microdata specification changes HTML5.

(Note that RDFa also changes HTML5 by allowing meta in the body in some cases.)


If you were to keep the meta tags in the <head>, then how would you relate these two dates to their reviews?

You could use the itemref attribute:

<!DOCTYPE html>
<html>
<head>
<title>Using itemref for meta in the head</title>
<meta itemprop="datePublished" content="2011-03-25" id="date">
</head>
<body>

<div itemscope itemtype="http://schema.org/Review" itemref="date">
<span itemprop="name">…</span>
</div>

</body>
</html>

itemref takes a space-separated list of id values, so you can even reference two or more elements. Just add the id of all elements (containing itemprop attributes) that should be added to the item to its itemref attribute, e.g.: itemref="date author rating".

Why Google suggesting to use META TAGS in Body?

Some meta tags are allowed inside <div> and <form> tags inside the document body. See <meta>: The metadata element - HTML: HyperText Markup Language | MDN which says:

Permitted parents

  • ...
  • <meta itemprop>: any element that accepts metadata content or flow content.

From the page about flow content, the elements that allow flow content include both <div> and <form> which are used in the <body>.

So while many meta tags only belong in the <head>, when a meta tag has itemprop it can go in the <body> (or in the <head>).

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

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).

How to implement Schema.org properties in meta data?

Using Microdata, if you want to provide structured data that is not visible on the page, you can make use of these elements:

  • link (with itemprop) for values that are URLs
  • meta (with itemprop) for values that aren’t URLs
  • div/span (with itemscope) for items

So your example could look like this:

<div itemscope itemtype="http://schema.org/ImageObject">
<div itemprop="copyrightHolder" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="legalName" content="ACME Inc." />
</div>
</div>

If you want to provide the whole structured data in the head element (where div/span aren’t allowed), see this answer. If you only want to provide a few properties in the head element, you can make use of the itemref attribute.

That said, if you want to provide much data in that hidden way, you might want to consider using JSON-LD instead of Microdata (see a comparison).

Adding schema.org tags to a site's header: how and which schema?

Update: The below answer is not fully correct. It is possible to express every Microdata within the head element, there is no need for a parent item on the head or html element. For an example, see this snippet from my comment on a related Schema.org issue, which uses a style element to create a top-level-item:

<head>
<style itemscope itemtype="http://schema.org/Thing" itemref="i1a i1b"></style>
<meta id="i1a" itemprop="name" content="Top-level item 1" />
<meta id="i1b" content="" itemprop="image" itemscope itemtype="http://schema.org/ImageObject" itemref="i1b-1a i1b-1b" />
<meta id="i1b-1a" itemprop="name" content="Nested item 1" />
<link id="i1b-1b" itemprop="contentUrl" href="image.png" />
</head>

Not a good practice, and it becomes chaotic because of all the needed itemref/id values, but it’s valid.


From the snippet you included in your question, only these elements contain Microdata:

<meta itemtype="http://schema.org/Product" itemscope="itemscope"/>
<meta content="Cheap Flights | Cheap Flights to Europe | Ryanair" itemprop="headline"/>
<meta content="Book Cheap Flights direct at the official Ryanair website for Europe's lowest fares. Fully allocated seating and much more now available online" itemprop="description"/>
<meta content="/static/images/seo/seo-logo-200.png" itemprop="image"/>

This code is not valid, and not doing what they probably want to achieve.

If you want to provide Microdata only in the head element (which wouldn’t make much sense, but let’s pretend) you need an element that can have child elements. Otherwise you can’t create a top-level Microdata item.

The only candidate is the head element itself, so you could only provide one item in the head, and it could have no properties that take another item as value. For properties you would use link elements (if the value is a URI) and meta elements (if the value is not a URI).

So it would have to be (omitting the headline property, because it’s not allowed for Product):

<head itemscope itemtype="http://schema.org/Product">
<meta content="…" itemprop="description"/>
<link href="…" itemprop="image"/>
</head>

That’s pretty limited. So, if you want to use Microdata (or RDFa), you most likely want to make use of the whole document (html, head and body). The whole point of using Microdata/RDFa is to make use of your existing content, without having to duplicate it. If you don’t want to "annotate" your existing content, you could use JSON-LD and simply provide all properties in a script element, e.g., in the head.

About the missing name property: If Google’s Structured Data Testing Tool says that a property is missing, it just means that Google won’t do something with your markup if it’s missing. It does not mean that the code would be invalid without it, as Schema.org has no required properties.

Should SEO microdata for Product include HTML markup in description

Microdata should be embedded in HTML, but tags with microdata in them can contain HTML. Description is a <meta> tag in your code though, so it does not need the HTML because it will never be displayed.

It looks like you are putting key structured data in non-visible tags, that's OK for currency, price, dates, but google states normally you should fit the microdata around your existing displayed data. The microdata can be in many different tags or block structures on the page, as long as they are nested under a single block structure (or a - but and seem most useful). Anything in HTML tags that don't have microdata will not cause problems - it just gets ignored when searching structured data.

Consider altering your code so the microdata is spread out, eg

<div itemscope itemtype="http://schema.org/Product">
<meta itemprop="url" content="http://example.com/sales" />
<h3 itemprop="name">Bo Clark Collection</h3>
<img src.... >
<strong>Product code:</strong><span itemprop="productID">1194</span> (in stock)<link itemprop="availability" href="http://schema.org/InStock">
<br>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">Price: <span itemprop="price">10,00</span><span itemprop="priceCurrency">EUR</span></span>
<div itemprop="description">
<p>Special eye-catcher: the silver Guess Wordmark test test.</p>
<ul><li>Silver Guess Wordmark</li>
<li>Leather in Croco-Style</li>
<li>Inner lining Suede</li>
<li>Tailor-made cutouts for ports and camera</li>
<li>Color: <span itemprop="color">Black</span></li></ul>
</div>
</div>

One piece of microdata can be embedded within another, as I've done here with color (Black) which is also part of Description. It works well for list items. Price done as above follows the google example of price.

where should I place the product schema microdata

Yes, you can (and should) use your existing markup. Be aware that some elements come with special rules.

Yes, you can hide elements containing Microdata. Ideally, you’d use meta and link elements for this purpose (they are allowed in the body exactly for this reason). You could also omit those properties (neither Microdata nor Schema.org define required properties). Note that some consumers, like search engines, might not consider all hidden markup.

Write Microdata just with link and meta

If the value is a URI, use link. Otherwise, use meta.

So <span itemprop="ratingValue">4.6</span> becomes <meta itemprop="ratingValue" content="4.6" /> etc.

If it’s just about having no visible content, you could keep using the parent div elements, e.g.:

<div itemscope> <!-- you can/should give it an itemtype -->

<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<meta itemprop="ratingValue" content="4.6" />
<meta itemprop="ratingCount" content="8864" />
</div>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="price" content="1.00" />
<meta itemprop="priceCurrency" content="USD" />
</div>

</div>

If you also want to omit these div elements, you’d have to use the itemref attribute, because you can’t nest elements under link/meta. And because meta elements used for Microdata require the itemprop attribute, you have to use one parent element (e.g., div, body, html) to specify an itemscope:

<body itemscope> <!-- you can/should give it an itemtype -->

<meta itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" content="" itemref="my-rv my-rc">
<meta itemprop="ratingValue" content="4.6" id="my-rv" />
<meta itemprop="ratingCount" content="8864" id="my-rc" />

</body>

Having said that, if you generally don’t want to markup your existing/visible content, you might want to use JSON-LD instead of Microdata or RDFa.



Related Topics



Leave a reply



Submit