Search code examples
htmlmetaschema.orgmicrodatagoogle-rich-snippets

Microdata markup with 'mainEntityOfPage' for Google Article Rich Snippet

The Microdata example of Google’s Article Rich Snippet contains this meta element with Schema.org’s mainEntityOfPage property:

<meta itemscope itemprop="mainEntityOfPage"  itemType="https://schema.org/WebPage" itemid="https://google.com/article"/>

When checking it with the Nu Html Checker, I get this error:

Element meta is missing required attribute content.

Adding an empty content attribute seems to solve this error. Is it correct to do this?

Solution

  • The Nu Html Checker is correct, Google’s example is invalid. The content attribute is required if the meta element has an itemprop attribute.

    From WHATWG HTML and also HTML 5.1 (W3C Working Draft): "If […] itemprop is specified, then the content attribute must also be specified."
    From the old Microdata (W3C Note): "If a meta element has an itemprop attribute, […] the content attribute must be present."

    Adding an empty content attribute makes it valid, but there are also other options.

    Schema.org’s mainEntityOfPage property expects as value either a URL or a CreativeWork item.

    Google’s own documentation for the recommended/required properties for their Article Rich Snippet says that they expect a URL value, but their examples show how to create an item value.

    All of the following solutions are fine according to the Google Structured Data Testing Tool. (Some examples use the itemid attribute, which is, strictly speaking, not yet allowed/defined for the Schema.org vocabulary.)

    If you want to provide a URL value:

    <link itemprop="mainEntityOfPage" href="https://example.com/article" />

    Straightforward.

    This follows Google’s own recommendation, requires minimal markup, and works in the head as well as the body.

    If you have a visible link, you can of course also use an a element.

    If you want to provide an item value:

    As type you can use CreativeWork or any of its subtypes, like WebPage.

    div element + url property

    <div itemprop="mainEntityOfPage" itemscope itemtype="http://schema.org/WebPage">
  <link itemprop="url" href="https://example.com/article" /> 
</div>

    This creates a WebPage item with a url property. It can only be used in the body.

    If you have a visible link, you can of course also use an a element.

    meta element with empty content attribute and itemid

    <meta itemprop="mainEntityOfPage" content="" itemscope itemtype="http://schema.org/WebPage" itemid="https://example.com/article" />

    This is based on Google’s example, but with an empty content attribute to make it valid.

    Note that Microdata parsers have to ignore the content attribute in that case, because the itemscope attribute is provided (Microdata W3C Note/WHATWG HTML Microdata: "first matching case"). So the itemprop value will be an item, not a string.

    This creates an empty item with an identifier. Works in the head as well as the body. It doesn’t allow to add properties directly to this WebPage item (you’d have to create another item with the same itemid value).

    div element with itemid

    <div itemprop="mainEntityOfPage" itemscope itemtype="http://schema.org/WebPage" itemid="https://example.com/article">
</div>

    This creates an empty item with an identifier. Instead of the meta example, it only works in the body, but therefore allows to add additional properties directly to this WebPage item.

    If you already have a WebPage item:

    If you already provide a WebPage item on your page, e.g.,

    <body itemscope itemtype="http://schema.org/WebPage">

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

</body>

    you can make use of it via Microdata’s itemref attribute:

    <body itemprop="mainEntityOfPage" itemscope itemtype="http://schema.org/WebPage" id="this-page">

  <article itemscope itemtype="http://schema.org/Article" itemref="this-page">
  </article>

</body>

    combined with one of the methods described above, e.g., with itemid or a url property.

    Note that you’d typically use the inverse property mainEntity in such a case, but Google doesn’t document that they’d support it for the Article Rich Snippet, currently.