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

3.5k Views Asked by At

I have a website that provides transportation services, not products (with this I mean that we don't sell widgets of this brand, this other model...; we just provide one kind of transportation service). I'm a bit unclear about how should I add schema.org microdata to my site, so I basically looked at what Ryanair was doing (since our product most resembles theirs) and copied their markup (changing it to our company's name, obviously). Their markup is as such:

<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<meta content="#22356b" name="theme-color"/>
<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" name="description"/>
<meta content="summary" name="twitter:card"/>
<meta content="@ryanair" name="twitter:site"/>
<meta content="Cheap Flights | Cheap Flights to Europe | Ryanair" name="twitter:title"/>
<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" name="twitter:description"/><meta content="@ryanair" name="twitter:creator"/>
<meta content="/static/images/seo/seo-logo-200.png" name="twitter:image:src"/>
<meta content="https://www.ryanair.com" name="twitter:domain"/>

<meta itemtype="http://schema.org/Product" itemscope="itemscope"/>

<meta content="Cheap Flights | Cheap Flights to Europe | Ryanair" property="og:title"/>

<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" property="og:description"/>
<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="http://www.ryanair.com/en/" property="og:url"/>
<meta content="/static/images/seo/seo-logo-200.png" property="og:image"/>
<meta content="/static/images/seo/seo-logo-200.png" itemprop="image"/>
<meta content="article" property="og:type"/>
<meta content="Ryanair" property="og:site_name"/>
<meta content="" property="fb:admins"/><link href="https://plus.google.com/" rel="publisher"/>
<meta content="INDEX,FOLLOW" name="robots"/>
<meta content="NOYDIR" name="Slurp"/>
<meta content="NOODP" name="Robots"/>
<meta content="Copyright Ryanair.com 2014" name="dcterms.rightsHolder"/>

And yet, Google Webmaster Tools shows me an error in the following line:

<meta itemtype="http://schema.org/Product" itemscope="itemscope" />

Saying that it needs a "name" property.

How should I add this? All the examples I've looked at are for situations where you have multiple products and need to mark up each one of them. Also, all the examples I've seen are for adding markup in the webpage's body, not in the header. Which one is correct?

1

There are 1 best solutions below

0
On BEST ANSWER

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.