6

So I was looking at Schema.org. Do I need to change my <html> tag to this

<html itemscope itemtype="http://schema.org/Article">

or can I just use only the meta tags within my <head></head> block?

<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">
unor
  • 92,415
  • 26
  • 211
  • 360
C0nw0nk
  • 870
  • 2
  • 13
  • 29

4 Answers4

8

Properties need to belong to an item. You create an item with the itemscope attribute (and the itemtype attribute can give this item a type).

Without itemscope, your markup example is invalid.

It is possible to provide Microdata only within the head element, but it’s not recommended for two reasons:

  • Microdata was intended to be used on your existing markup. While it can often make sense to include certain meta/link elements in the head (with itemref, see an example), most of the content is typically in the body. If you only want to use elements within head, you would have to duplicate most your content. But if you want to go that route, you might prefer to use JSON-LD.

  • As head doesn’t allow the use of a grouping element (like div), it gets complex to express Microdata. You would have to use itemref for every property and misuse an element like style for every item (see the first snippet in this answer as example).

Your example could look like this:

<head>
  <style itemscope itemtype="http://schema.org/Article" itemref="p1a p1b p1c"></style>
  <meta id="p1a" itemprop="name" content="The Name or Title Here">
  <meta id="p1b" itemprop="description" content="This is the page description">
  <link id="p1c" itemprop="image" href="http://www.example.com/image.jpg">
</head>

If you can use itemscope on the head element, it would be better:

<head itemscope itemtype="http://schema.org/Article">
  <meta itemprop="name" content="The Name or Title Here">
  <meta itemprop="description" content="This is the page description">
  <link itemprop="image" href="http://www.example.com/image.jpg">
</head>

But as soon as you need more than one item (which is typically the case, e.g., for the Organization/Person which is the author etc.), this doesn’t work anymore, and you would need a solution like in my first snippet.

Note that it’s allowed to use meta/link elements for Microdata within the body element. This makes it way easier, as you can use div elements for the itemscope. So even if you duplicate your content instead of marking up your existing content, it would be preferable to do this in the body:

<div itemscope itemtype="http://schema.org/Article">
  <meta itemprop="name" content="The Name or Title Here">
  <meta itemprop="description" content="This is the page description">
  <link itemprop="image" href="http://www.example.com/image.jpg">
</div>

(I replaced the meta element for the image property with a link element, because using meta is invalid for this purpose.)

unor
  • 92,415
  • 26
  • 211
  • 360
  • 1
    @insertusernamehere: Schema.org and Microdata are different things and projects, so no matter what Schema.org writes, it doesn’t affect what is/isn’t valid Microdata. (By the way, it would be valid in RDFa.) -- Schema.org’s statement about `WebPage` makes sense for consumers of the data (they have to work with invalid data), but, in my opinion, authors should not use `WebPage` implicitly; I recommend that authors follow the advice in the next sentence of the `WebPage` description: "We recommend explicit declaration […]" – unor Oct 06 '17 at 18:43
  • Why misuse ` – lucian Dec 22 '18 at 05:29
  • @LucianDavidescu: The `meta` element must have exactly one of these attributes: `name`, `itemprop`, `http-equiv`, `charset`. – unor Dec 22 '18 at 12:17
  • Indeeed, sorry, i was quite confused. How about `` ? – lucian Dec 22 '18 at 13:55
  • I realise that this may be confusing too I'm afraid. Better come up with an example of what I mean: https://pastebin.com/itaps2Ka This validates and is parsed by Google structured data testing tool with just one warning, that seems to be an issue of double attribution (the first - proper, the second - useless) – lucian Dec 22 '18 at 14:17
  • 1
    @LucianDavidescu: Yes, this works for child/embedded items, but it doesn’t work for top-level items (which can’t have an `itemprop` attribute). – unor Dec 22 '18 at 16:36
1

The section about Microdata on whatwg.org doesn't mention meta-elements in the head-element of a HTML document explicitly. In conclusion you need itemscope to have valid markup.

If you take a look at the description at schema.org you'll find this section about WebPages:

Every web page is implicitly assumed to be declared to be of type WebPage, so the various properties about that webpage, such as breadcrumb may be used. We recommend explicit declaration if these properties are specified, but if they are found outside of an itemscope, they will be assumed to be about the page.

The interesting part is this:

[…] if they [the properties] are found outside of an itemscope, they will be assumed to be about the page.

According to this you don't need to itemscope to the html-element. But it reads more like a suggestion then a definite specification.


You can see this behavior also in Google's Structured Data Testing Tool. When you run this code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta itemprop="name" content="The Name or Title Here">
        <meta itemprop="description" content="This is the page description">
        <meta itemprop="image" content="http://www.example.com/image.jpg">
    </head>
</html>

… you'll find that it doesn't capture any data. It'll start capturing data, as soon as you add itemscope resulting in an Unspecified Type without any error:

Screenshot from Google's tool

Using itemtype="http://schema.org/Article" will fail or at least throw errors as too few properties are given for type Article.


All different types can be found on the WebPage overview on scheme.org. Maybe one is suitable for the whole page.

insertusernamehere
  • 23,204
  • 9
  • 87
  • 126
  • Awesome the more simple and effective the better :) I don't think it is easy for sites to modify their tag anyway since switching between article blog website video etc is why allot of sites don't use it i think and stick to opengraph. – C0nw0nk Oct 06 '17 at 17:24
  • 1
    @C0nw0nk Even for Open Graph you actually need ``, but I think it's not needed by most parsers. See [ogp.me](http://ogp.me). – insertusernamehere Oct 06 '17 at 17:29
  • You said `if only itemscope is present with an undefined type.` Can you give a example of a undefined type would that be useable as universal for all types like article, videos, images, blogs etc. – C0nw0nk Oct 06 '17 at 17:29
  • @C0nw0nk I've updated the answer with some more informations, regarding your questions. – insertusernamehere Oct 06 '17 at 17:46
1

According to the given example from scheme.org, yes both are compulsory for Google.

To validate whether your data is being captured properly you can use this tool:

Structured data testing tool

By using the tool above you can see that if you omit itemtype="http://schema.org/Article" the data will not get captured.

Vincent1989
  • 1,593
  • 2
  • 13
  • 25
  • Thanks for the information :) is there a universal schema attribute i can apply that will work for website, article , videos , images. The itemtype above is just for articles if i can apply one that functions for all would be fantastic. – C0nw0nk Oct 06 '17 at 17:26
  • The most common one would be http://schema.org/CreativeWork, if possible try to narrow things down. :) – Vincent1989 Oct 06 '17 at 17:41
  • Also mind you that schema microdata is getting outdated due to it being rather messy to implement as it interferes with the html. Google has recommended we used JSON-LD instead, https://developers.google.com/search/docs/guides/intro-structured-data. This is much cleaner to implement – Vincent1989 Oct 06 '17 at 17:44
0

You can safely use <html itemscope itemtype="http://schema.org/Article">. This allows you to define itemprop's inside <head> element.

Google Rich Test Snippets and w3 validator, both validate this approach as I have already tested it.

marcanuy
  • 23,118
  • 9
  • 64
  • 113