How to implement Schema.org properties in meta data? - html

Schema.org describes how to implement object properties using the meta tag but the examples given are properties with primitive types such as Text or Boolean. Let's say I want to display a grid of images and each image is of type ImageObject. The copyrightHolder property itself is either an Organization or Person. If I want to include the organization legal name, how would I do that using only meta data?
With "regular" HTML elements I would write:
<span itemprop="copyrightHolder" itemscope itemtype="http://schema.org/Organization">
<span itemprop="legalName">ACME Inc.</span>
</span>
This obviously doesn't look right:
<meta itemprop="copyrightHolder" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="legalName" content="ACME Inc.">
</meta>
The only thing that comes into mind is using a set of hidden spans or divs.

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

I was reading Getting Started again and noticed 2b that states
When browsing the schema.org types, you will notice that many properties have "expected types". This means that the value of the property can itself be an embedded item (see section 1d: embedded items). But this is not a requirement—it's fine to include just regular text or a URL.
So I assume it would be fine to just use
<meta itemprop="copyrightHolder" content="ACME Inc.">

Related

SDTT: "A value for the image field is required"

I have this snippet in a LocalBusiness listing (based on this example):
<div itemscope itemtype="http://schema.org/LocalBusiness">
<div itemprop="image" itemscope="" itemtype="http://schema.org/ImageObject">
<img itemprop="contentUrl" src="/images/trouwlocatiefotos/medium/315_24_83_Veranda-005.jpg">
</div>
</div>
But Google's structured data testing tool throws an error:
image
A value for the image field is required.
Why is it throwing the error?
Testing the URL directly: https://search.google.com/structured-data/testing-tool#url=https%3A%2F%2Fwww.wonderweddings.com%2Fweddingvenues%2F315%2Fbeachclub-sunrise
The markup snippet you posted doesn’t give the quoted error. So your actual markup is probably doing things differently.
It seems that your image property isn’t nested under the LocalBusiness item:
Line 396: <div itemscope itemtype="http://schema.org/LocalBusiness">
Line 372: <div itemprop='image' itemscope itemtype='http://schema.org/ImageObject'>
No itemref involved.
So your LocalBusiness item really doesn’t have an image property. Instead, the image property seems to be specified without any parent item (= itemscope), which is invalid.
Google’s SDTT probably ignores this error and parses the ImageObject as a top-level item, which is why it’s listed on its own (next to LocalBusiness and BreadcrumbList).
How to fix this?
If you can’t move the elements to nest them (like in your example snippet), you could make use of Microdata’s itemref attribute:
<div itemscope itemtype="http://schema.org/LocalBusiness" itemref="business-image"></div>
<div itemprop='image' itemscope itemtype='http://schema.org/ImageObject' id="business-image"></div>
Add in snippet
In LocalBusiness schema, Required image, PriceRange field
Properties from Thing - Google returns errors..
Error:
image=A value for the image field is required.
priceRange=The priceRange field is recommended. Please provide a value if available.
Ans: add in code
1.For (image,logo,photo)= Image Object or URL = An image of the item. This can be a URL or a fully described ImageObject.
For priceRange = Text = The price range of the business, for example $$$.
That items mandatory in LocalBusiness

Designating "nofollow" attribute on links in <div>

I have the following code in a website footer:
<div class="examples-footer">
First text Example
Second text Example2
</div>
I would like to designate the two links there as "nofollow". However, I can only manipulate the output by inserting additional text/html tags right after
<div class="examples-footer">
and before
First text Example
Just inserting the <rel="nofollow"> tag there won't work; is there a way to do this using the HTML markup under the constraints which I specified, or is it impossible?
If you don't want bots/crawlers/spiders to follow any links on the page, use the robots meta tag in the head:
<meta name="robots" content="nofollow">
If you don't want search engines counting a link for page ranking, use the rel attribute in the link:
<a href="//stackoverflow.com" rel="nofollow">
Neither of these will prevent a human being (or cat) from following a clicked link, of course.

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

UserComments in test: “dtstart required”, but not part of standard?

I put some effort in marking up an ancient message board with schema.org/UserComments microdata. Testing it in WMT yields an error message: Missing required field "dtstart".
Here’s an item, and apart from the table markup, I think it’s all fine:
<tr itemscope itemtype="http://schema.org/UserComments" itemprop="comment">
<td>
<meta content="2013-09-23T17:39:14+01:00" itemprop="commentTime">
<meta content="http://example.com/cmts/?id=321" itemprop="replyToUrl">
<meta content="comment’s title" itemprop="name">
<div itemscope itemtype="http://schema.org/Person" itemprop="creator">
<a itemprop="url" href="http://www.example.com/user/Nickname">
<img itemprop="image" src="http://cdn.example.com/pic.jpg">
<span itemprop="name">Nickname</span>
</div>
</td>
<td>
<p itemprop="commentText">the comment’s actual text</p>
</td>
</tr>
In UserComments, there’s no field named “dtstart”. In a similiar, yet not helpful question, there’s another link to WMT, stating somewhat implicit that startDate and dtstart are synonyms. This does not prove true, at least not for UserComments.
Is it a hitch at Google, so I can disregard it? Am I missing some point (datetime instead of content)?
Your Microdata and Schema.org usage is correct. They don’t define any required properties. So when the Google Structured Data Testing Tool reports "Missing required …" errors, it only means that Google (probably) won’t consider displaying a Rich Snippet when specific properties are missing.
When testing your snippet with a parent item for the comment property, no errors are reported, e.g.:
<article itemscope itemtype="http://schema.org/CreativeWork">
<table>
<!-- your tr here -->
</table>
</article>
Another solution: adding a startDate property (but Google might want to see a date from the future here.)
(The term "dtstart" probably comes from the data-vocabulary.org vocabulary, where Google required this property for the Event Rich Snippet. And Schema.org’s UserComments is also some kind of Event, see notes below.)
If you don’t care about Google’s Rich Snippets, you can keep it like that.
Notes about your snippet:
You might want to use Comment instead of UserComments (because the latter one is an Event, not a CreativeWork).
However, currently, the comment property expects UserComments, but this will most likely change in one of the next Schema.org updates.
For specifying replyToUrl, you must use link instead of meta.

Using HTML5+Microdata's <meta> tag in the <body>

I want to specify if the Product is "In Stock" using HTML5+Microdata's <meta> tag using Schema.org.
I am unsure if this is the correct syntax:
<div itemscope itemtype="http://schema.org/Product">
<h2 itemprop="name">Product Name</h2>
<dl itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<dt itemprop="price">$1</dt>
<meta itemprop="availability" itemscope itemtype="http://schema.org/ItemAvailability" itemid="http://schema.org/InStock">
</dl>
</div>
The meta tag can't be used with an itemscope like that. The correct way to express this is through a canonical reference using the link tag:
<div itemscope itemtype="http://schema.org/Product">
<h2 itemprop="name">Product Name</h2>
<dl itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<dt itemprop="price">$1</dt>
<link itemprop="availability" href="http://schema.org/InStock">
</dl>
</div>
I did the same as the OP and got the same thing, where the availability on the testing tool is linked to a sub-item... I was finally able to get it to verify properly with this:
<meta itemprop='availability' content='http://schema.org/InStock'>
Here is the Google structured tool output for the offer:
Item 1
type: http://schema.org/offer
property:
price: Price: $139.00
pricecurrency: USD
availability: http://schema.org/InStock
While it is allowed to use meta (if used for Microdata!) in the body, your example is not correct for several reasons:
The dl element can only contain dt or dd (and script/template) elements. You either have to place the meta inside of dt/dd, or outside of dl (but then you would have to move the itemscope).
The meta element must have a content attribute.
Using itemid for this purpose is not correct, and http://schema.org/ItemAvailability is not a type, so using itemscope+itemtype isn’t correct either.
However, if the itemprop value is a URI, you must use the link element instead of the meta element.
Furthermore, the price value should not contain a currency symbol, and it seems that your dt should actually be a dd (with a dt containing "Price" or something).
So you could use:
<dl itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<dt>Price</dt>
<dd>$<span itemprop="price">1</span> <link itemprop="availability" href="http://schema.org/InStock" /></dd>
</dl>
I made a jsfiddle here: http://jsfiddle.net/dLryX/, then put the output (http://jsfiddle.net/dLryX/show/) into the rich snippets tool.
That came back with:
I believe the syntax is correct, and that the Warning isn't important, as it doesn't have a property, as it's a meta tag.
See under the heading Non-visible content (not sure if this helps):
Google webmaster tools - About microdata
In general, Google won't display content that is not visible to the user. In other words, don't show content to users in one way, and use hidden text to mark up information separately for search engines and web applications. You should mark up the text that actually appears to your users when they visit your web pages.
There are a few exceptions to this guideline. In some situations it can be valuable to provide search engines with more detailed information, even if you don't want that information to be seen by visitors to your page. For example, if a restaurant has a rating of 8.5, users (but not search engines) will assume that the rating is based on a scale of 1–10. In this case, you can indicate this using the meta element, like this:
<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
Rating: <span itemprop="value">8.5</span>
<meta itemprop="best" content="10" />
</div>
This is an example from schema.org's getting started guide to support #Lawrence's answer.
However, I don't like the use of the link tag inside the body of the page. From MDN:
A link tag can occur only in the head element;
Isn't there a better way of specifying availability using a valid markup?