I'm new to schema.org and trying to describe a website for a
restaurant. Basically the website looks like this:
<body itemscope itemtype="http://schema.org/ItemPage">
<div itemprop="breadcrumb">...</div>
<div itemscope itemtype="http://schema.org/Restaurant">...</div>
</body>
Is it valid to place a "Restaurant" (Thing->Organization...) within
the scope of a "Itempage" (Thing->CreativeWork)? The documentation
shows that the "Restaurant" is not part of the scope of a "ItemPage".
On the other hand the "ItemPage" is described "A page devoted to a
single item, such as a particular product or hotel.". So a hotel is
similar to a restaurant ;) Is this type of nesting valid?
Thanks
You shouldn't need the ItemPage as part of the body. You can just start specifying the restaurant in one of the divs, then make sure the rest of the properties are defined as children. Like so:
<body>
<div>...</div>
<div itemscope itemtype="http://schema.org/Restaurant">
<span itemprop="name">McDonald's</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">1234 Smith Ave</span>
<span itemprop="addressLocality">Seattle</span>
....
</div>
</div>
</body>
Related
Is it okay to set the same itemprop and itemscope on the document or is it bad practice?
The reason I ask is my view layout doesn't display the type in a linear fashion, eg. a company avatar is be on the sidebar and the company name which is the title is on the article > header block.
Code example:
<div itemscope itemtype="http://schema.org/Order">
<div itemprop="seller" itemscope itemtype="http://schema.org/Organization">
<b itemprop="name">ACME Supplies</b>
</div>
<div class="reviews">
<p>Great company! - Jane</p>
</div>
<div itemprop="seller" itemscope itemtype="http://schema.org/Organization">
<span itemprop="url">http://acme-supplies.com</span>
</div>
</div>
I declared the itemprop="seller" and itemscope itemtype="http://schema.org/Organization" twice because of how I need to style the page.
Displaying the company name
Displaying the company url
This is not ideal. It conveys that the order has two sellers. Consumers could guess/assume that it’s the same seller, but they can’t know for sure.
itemid
Microdata’s itemid attribute allows you to give an item a URI (this URI identifies the entity described by this item; it doesn’t necessarily have to lead to a page, but it’s a good practice to provide a page with information about the item). By giving both of your Organization items the same URI, you convey that these items are about the same entity.
When doing this, there doesn’t seem to be any need to provide the seller property a second time.
<div itemscope itemtype="http://schema.org/Order">
<div itemprop="seller" itemscope itemtype="http://schema.org/Organization" itemid="/seller/acme-supplies#this">
<b itemprop="name">ACME Supplies</b>
</div>
<div class="reviews">
<p>Great company! - Jane</p>
</div>
<div itemscope itemtype="http://schema.org/Organization" itemid="/seller/acme-supplies#this">
<a itemprop="url" href="http://acme-supplies.com/">acme-supplies.com</a>
</div>
</div>
(Note: You could also use an external URI for itemd, e.g., http://acme-supplies.com/, assuming that this URI identifies the seller, and not something else in addition. Strictly speaking, this URI could also represent the seller’s website, etc. Ideally the seller would itself provide a URI that identifies it, but not many do.)
itemref
Another solution, if it’s possible for you to move the second Organization element out of the Order element, is Microdata’s itemref attribute.
<div itemscope itemtype="http://schema.org/Order">
<div itemprop="seller" itemscope itemtype="http://schema.org/Organization" itemref="seller-acme-supplies-url">
<b itemprop="name">ACME Supplies</b>
</div>
<div class="reviews">
<p>Great company! - Jane</p>
</div>
</div>
<div>
<a itemprop="url" href="http://acme-supplies.com/" id="seller-acme-supplies-url">acme-supplies.com</a>
</div>
The Organization element adds (via its itemref attribute) the property defined in the element with the ID seller-acme-supplies-url.
You have to make sure that the element with the id is not a child of another itemscope (otherwise it would also become the url of that item).
I have a page that contains multiple Schema.org Events that have identical properties (name, location, description, etc.). I've figured out how to handle location by doing something like this:
<div itemscope itemtype="http://schema.org/Event">
…
<meta itemprop="location" itemscope itemtype="http://schema.org/Place" itemref="venue-place" />
</div>
<span id="venue-place">
<a href="http://www.example.com/" itemprop="url">
<span itemprop="name">Crystal Ballroom</span>
</a>
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">1332 W Burnside St.</span>
<span itemprop="addressLocality">Portland</span>,
<span itemprop="addressRegion">OR</span>
<span itemprop="postalCode">97209</span>
</span>
</span>
However, I can't figure out how to do this for the Event's description. I've done something like this, which makes an empty description appear in the Event in Google's Structured Data Testing Tool:
<div itemscope itemtype="http://schema.org/Event">
…
<meta itemprop="description" itemscope itemref="event-summary" />
</div>
<div id="event-summary">
This is the description text.
</div>
What am I doing wrong?
The itemref attribute allows you to reference properties (itemprop), and it has to be specified on the item (itemscope) these properties should be added to.
So you have to
move itemref="event-summary" to the Event element, and
move itemprop="description" to the element with the description.
<div itemscope itemtype="http://schema.org/Event" itemref="event-summary">
</div>
<div itemprop="description" id="event-summary">
</div>
You would ideally do this for the location, too, because having a meta element without a content attribute is invalid (but this could be fixed by adding an empty attribute), and because you could save one element that way.
<div itemscope itemtype="http://schema.org/Event" itemref="venue-place event-summary">
</div>
<div itemprop="location" itemscope itemtype="http://schema.org/Place" id="venue-place">
</div>
<div itemprop="description" id="event-summary">
</div>
(Note that Google’s Structured Data Testing Tool will use the id value of the Place element to display URIs under #id. I think that’s a bug on their end, so don’t let this confuse you. If you want to get rid of it, you could add an itemid attribute in addition to provide a real/actual URI for the place.)
I'm working on website that displays hotels on a map. A user lands on a page associated with a place and we display a map of all the hotels in that place (e.g. Key West).
I'm trying to improve the schema.org markup that we use. Currently the bulk of the page is marked up as a place. We then include the map in that markup. Then within all that we have individual hotels. So our markup looks something like -
<div id="mainwrap" itemscope itemtype="http://schema.org/Place">
<div id="map_canvas" style="height:100%;" itemprop="hasMap" itemscope itemtype="https://schema.org/Map"></div>
<div itemscope itemtype="http://schema.org/Hotel">...</div>
<div itemscope itemtype="http://schema.org/Hotel">...</div>
<div itemscope itemtype="http://schema.org/Hotel">...</div>
</div>
</div>
I think it would make more sense to mark everything up as a list of hotels using itemList. Then we can communicate how many hotels are in the list, how they're sorted, and even mark up some of the filter controls.
Is it possible to have overlapping schema? So for example, can I do something like this..
<div id="mainwrap" itemscope itemtype="http://schema.org/ItemList">
<div itemProp="PotentialAction" class="filterWidget">...</div>
<div itemProp="PotentialAction" class="sortWidget">...</div>
<div itemscope itemtype="http://schema.org/Place">
<div id="map_canvas" style="height:100%;" itemprop="hasMap" itemscope itemtype="https://schema.org/Map"></div>
<div itemProp="itemListElement" itemtype="http://schema.org/ListItem" itemscope itemtype="http://schema.org/Hotel">...</div>
<div itemProp="itemListElement" itemtype="http://schema.org/ListItem" itemscope itemtype="http://schema.org/Hotel">...</div>
<div itemProp="itemListElement" itemtype="http://schema.org/ListItem" itemscope itemtype="http://schema.org/Hotel">...</div>
</div>
</div>
</div>
Also is there a good way to test some of this? The problem is it's a single page application and the testing tools need raw html (whilst the google bot will run js and render the dom).
I would say the Map is not really useful as "parent" type for the Hotel items, which isn’t possible anyway with Schema.org, because Map does not define a property that could refer to Place items contained in the map.
The most basic structure would be a Place item (the main topic of the page) and several Hotel items associated with the containsPlace property. The Map is specified in addition.
<body itemscope itemtype="http://schema.org/WebPage">
<section itemprop="mainEntity" itemscope itemtype="http://schema.org/Place">
<div itemprop="hasMap" itemscope itemtype="http://schema.org/Map">
…
</div>
<ul>
<li itemprop="containsPlace" itemscope itemtype="http://schema.org/Hotel">…</li>
<li itemprop="containsPlace" itemscope itemtype="http://schema.org/Hotel">…</li>
<li itemprop="containsPlace" itemscope itemtype="http://schema.org/Hotel">…</li>
</ul>
</section>
</body>
If you want to use ItemList for the Hotel items, it gets more complex.
It’s then no longer possible to use containsPlace, because ItemList can’t have this property (well, actually it can, but it’s not expected). You could use the inverse property containedInPlace and reference the Place item, but in my example it wouldn’t be possible to use Microdata’s itemref attribute for this purpose (because the mainEntity property would be also added to Hotel, which is not an expected property).
The more powerful (but maybe less supported) alternative is to use Microdata’s itemid attribute. It’s used to specify URIs for items (these URIs don’t necessarily have to point to a page, they only serve as identifier; but it’s strongly recommended to serve the page that contains the Microdata about it). Each of your items could get a URI, and then you can use this URI as value for properties that would usually expect another item as value.
Taking my example from above, but now with itemid (for Place), ItemList, and containedInPlace:
<body itemscope itemtype="http://schema.org/WebPage">
<section itemprop="mainEntity" itemscope itemtype="http://schema.org/Place" itemid="#thing">
<div itemprop="hasMap" itemscope itemtype="http://schema.org/Map">
…
</div>
<!-- note that this list doesn’t have to be a child of the <section> element -->
<ul itemscope itemtype="http://schema.org/ItemList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Hotel">
<link itemprop="containedInPlace" href="#thing" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Hotel">
<link itemprop="containedInPlace" href="#thing" />
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/Hotel">
<link itemprop="containedInPlace" href="#thing" />
</li>
</ul>
</section>
</body>
About itemid and the URI value
Let’s say the page about this Place has the URL http://example.com/places/amsterdam. As the itemid value is #thing, the full URI would be http://example.com/places/amsterdam#thing.
Whenever you refer to this Place on another page, you can use http://example.com/places/amsterdam#thing (and if you refer to it on the same page, you could use the full URI, too, or again #thing). This has the benefit that you don’t have to repeat data (you can refer to its "canonical" location where everything is specified), but it has the drawback that consumers have to visit another page (but hey, it’s their job).
To differentiate between /places/amsterdam, for the page, and /places/amsterdam#thing, for the place, can be important in the Semantic Web / Linked Data world – more details in my answer to the question Best practices for adding semantics to a website.
You are most of the way there by using an ID as an identifier.
For example, if you assign a unique ID to a hotel, you can use that ID in different structures, such as Place or ItemList.
You can test the structures on Google Structure Data Testing Tool (GSDTT): https://search.google.com/structured-data/testing-tool.
However, you'll need to fix your HTML in the top example as you have a dangling <div>.
Copy the completed structure above and paste it on GSDTT. The HTML page is not required; only the microdata structures.
I have the following HTML:
<body itemscope itemtype="http://schema.org/WebPage">
<header itemscope itemtype="http://schema.org/WPHeader">
<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
</nav>
...
<div itemscope itemtype="http://schema.org/Organization" itemref="objectDetails">
<span itemprop="name">Org name</span><br>
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
...
</span>
</div>
</header>
<ul itemprop="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">..</li>
...
</ul>
<div id="objectDetails">
<div itemprop="description">...</div>
<div itemprop="foundingDate">...</div>
...
</div>
</body>
This web page displays information about one particular organization. Some information about organization should be displayed in a page header, other - in the center of a page. With the help of itemref attribute I can split information about organization and put it on two separate divs.
If I test the above HTML with google structured data testing tool - it extracts info about organization correctly - properties from both divs are shown, but it shows validation error on a WebPage object:
The property foundingDate is not recognized by Google for an object of type WebPage.
What is the correct way to tell Google that properties that are inside objectDetails div doesn't belong to the outer itemscope (WebPage)? If I add itemscope itemtype="http://schema.org/Organization" to objectDetails div - then Google sees two separate organizations on my WebPage.
This is not possible.
Possible "solutions":
Don’t use an item on a "container" like html or body. Use it on an element that doesn’t span the whole content, and use itemref if needed.
Use multiple items and specify the same URI in itemid for them. However, it’s not clear if/when/how Schema.org supports itemid, and support from consumers is probably bad.
(Using RDFa instead of Microdata would allow this naturally.)
Add an untyped item (by adding an itemscope without itemtype) to the element containing all properties you don’t want to add to the original parent item. Examples: 1, 2, 3.
TL;DR --> I want an itemprop nested in one itemscope to actually be applied to a different itemscope. How do I do that?
Here's a a gist of the code I have (I've removed classes and other extraneous elements on the page to focus on what's important):
<!-- CODE I HAD -->
<div itemscope itemtype="http://schema.org/Product">
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">79</span>
<h1 itemprop="name">Someproductsoandso</h1>
<span itemprop="reviewCount">830</span>
</div>
</div>
<!-- CODE I NOW HAVE -->
<div itemscope itemtype="http://schema.org/Product" itemref="productMicrodata">
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">79</span>
<h1 itemprop="name" id="productMicrodata">Someproductsoandso</h1>
<span itemprop="reviewCount">830</span>
</div>
</div>
Basically, I have a product itemscope with a child aggregateRating. Inside that aggregateRating scope I have things like the "ratingValue" and "reviewCount" that I want attached to that, but there's also a "name" value that I want attached to the Product (not the aggregateRating, which also can have a "name" value).
With the first chunk of code I used, google said that my product was missing a name, because the name was being applied to the aggregateRating; with the 2nd, the name is now being applied to both the aggregateRating and the Product. That's not the worst thing, but I'd like it just attached to the aggregateRating; do you know how to solve this without mucking up the current markup organization?
Assuming you mean you want it only attached to the Product, as per your penultimate paragraph, and not only attached the aggregateRating as per per your last paragraph, then the best I can come up is
<div itemscope itemtype="http://schema.org/Product" itemref="productMicrodata">
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">79</span>
<h1 itemscope><span itemprop="name" id="productMicrodata">Someproductsoandso</span></h1>
<span itemprop="reviewCount">830</span>
</div>
</div>
The itemscope on the h1 hides the h1's children from the aggregateRating item, so the name property will only be attached to the Product item via the productMicrodata itemref. It does however, create a third item which has no type.