Do you put Schema Microdata meta tags in the html body?
If a meta
element
- has an
itemprop
attribute and acontent
attribute, and - has no
name
attribute, nohttp-equiv
attribute, and nocharset
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
(withitemprop
) for values that are URLsmeta
(withitemprop
) for values that aren’t URLsdiv
/span
(withitemscope
) 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
Detect When an Html5 Video Finishes
How to Set the Equivalent of a Src Attribute of an Img Tag in Css
How to Create Your Own HTML Tag in Html5
Use Images Instead of Radio Buttons
How to Position One Image on Top of Another in Html
How to Change Bootstrap 3 Column Order on Mobile Layout
Using HTML and Local Images Within Uiwebview
How to Have Two Background Colors For a Single HTML Element
Does ≪Style≫ Have to Be in the ≪Head≫ of an HTML Document
Change Bootstrap Tooltip Color
Limit Number of Characters Allowed in Form Input Text Field
Get Second Line of Bullet Item to Indent as First Part - Not Underneath the Bullet
What Does Appending "V=1" to CSS and JavaScript Urls in Link and Script Tags Do