I have a link that looks like this:
<a href="//href" itemscope itemtype="http://schema.org/Product">
<img src="src" itemprop="image">
</a>
I'd like to put itemprop="url" in the <a> tag, but it contains the itemscope for that product. Can I put that at the same level as itemtype=?
Or, do I either need to wrap the whole thing in a div to make it work, or use a <meta> tag for the itemprop="url" microdata? Thanks!
You can have itemprop and itemscope on the same element, but it will mean something different.
In this example, a Product item has the url property:
<div itemscope itemtype="http://schema.org/Product">
…
</div>
In this example, some other item has the url property, and its value is a Product item:
…
(Note for the the latter case: the url value is the Product item, not the URL in the href attribute! So this probably doesn’t make sense for the url property.)
No you don't need another wrapper to do that. You can specify itemprop="url" to the a tag.
This technique called "nested scope"
More about this is available at section 2.2 The basic syntax of this link http://www.w3.org/TR/2011/WD-microdata-20110525/
Related
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.">
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
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.
Is the "content" attribute valid for span tag? If so is it a good practice?
I'll be applying microdata (schema.org) on my site pages.
I want to add microdata on some elements of my page.
This is my current code:
<span itemscope itemtype="http://schema.org/Product">
<a itemprop="url" class="list-items" href="/product/286/cryptomate64-usb-cryptographic-token/" title="CryptoMate64 USB Cryptographic Token">
<span itemprop="name">CryptoMate64 USB Cryptographic Token</span>
<span class="hidden">
<span itemprop="productid"/>286</span>
<span itemprop="model" content="ACOS5T-B2-SCZ" />ACOS5T-B2-SCZ</span>
</span>
</a>
</span>
As you can see, I have a div with class "hidden" there because the model and id shouldn't be displayed on the page.
I want to minify the code by doing this:
<span itemscope itemtype="http://schema.org/Product">
<a itemprop="url" class="list-items" href="/product/286/cryptomate64-usb-cryptographic-token/" title="CryptoMate64 USB Cryptographic Token">
<span itemprop="name">CryptoMate64 USB Cryptographic Token</span>
<span itemprop="productid" content="286" /> </span>
<span itemprop="model" content="ACOS5T-B2-SCZ" /> </span>
</a>
</span>
I can use meta instead of span so that the content is not visible. But I think it won't be a good practice since I'll be having a lot of items. What can you suggest? Thanks.
I tested your updated code with Google's richsnippets test tool and it works fine with the content attribute on the span.
However, this isn't good practice since there is no content inside the last 2 spans anyway. It is perfectly appropriate in this case to use metas.
<meta itemprop="productid" content="286">
<meta itemprop="model" content="ACOS5T-B2-SCZ">
No, it’s not valid.
Neither HTML5 nor Microdata define a content attribute for span. (RDFa does, but you are not using it.)
If you want to markup content with Microdata that should not be visible, either
use usual HTML and hide it with CSS, or
use link elements (for URIs) and meta elements (for anything else); both elements are allowed in the body, and typically hidden by default browser stylesheets.
I’d prefer the latter variant (meta/link), but it’s not possible everytime (e.g., if you need to add new items with itemscope).
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?