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.
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'm working on a site designed to help a user find a hotel. We've got lots of widgets for filtering the hotels we show (e.g. price filters) or else ordering the hotels we show (e.g. by distance).
I can see how to markup our hotels as being a list. And also how to communicate the sort order of the list.
And we're already marking up the hotel's themselves:
<div itemscope itemtype="http://schema.org/Hotel">
<div itemprop="image" style="background-image: url('{{{ imageUrl }}}');"></div>
<h2 class="title" itemprop="name">{{ name }}</h2>
<div itemscope itemtype="http://schema.org/Offer">
<div itemprop="price">{{{ price }}}</div>
</div>
</div>
Is there a way of identifying our filters as being tools for adjusting the list?
To get an idea of how the website works see - http://mapov.com/hotels/the+strip/.
Is there a way of identifying our filters as being tools for adjusting the list?
With an Action type.
See SearchAction or perhaps FindAction (DiscoverAction).
An Action can be used to represent what happened (e.g., "User 3 searched for hotels in Amsterdam"), but also for representing potential actions: use the potentialAction property to specify the possible actions an item can have.
<section itemscope itemtype="http://schema.org/ItemList">
<div itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
…
</div>
</section>
Side notes about your markup
Your image property won’t work, it can’t have an image specified in the style attribute as value. You have to provide the image property on a "link" element (e.g., img, a, link, …).
Your Offer is not associated with the Hotel. You could use the makesOffer property.
<div itemscope itemtype="http://schema.org/Hotel">
<img itemprop="image" src="http://yourhostel.es/content/124"/>
<meta itemprop="address" content="you street"/>
<h2 class="title" itemprop="name">name </h2>
<div itemprop="priceRange">price</div><div itemprop="telephone">9999999</div>
price
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.
My goal is to cite a blog post by using HTML microdata.
How can I improve the following markup for citations?
I am seeking improvements on the syntax and semantics, to produce a result that works well with HTML5 standards, renders well in current browsers, and parses well in search engines.
The bounty on this question is for expert advice and guidance. My research is turning up many opinions and snippets, so I'm seeking clear answers, complete samples, and canonical documentation.
This is my work in progress and I'm seeking advice on it's correctness:
Use <div class="citation"> to wrap everything.
Use <article> with itemscope and BlogPost to wrap the post info including its nested info.
Use <header> and <h1 itemprop="headline"> to wrap the post name link.
Use <cite> to wrap the post name.
Use <footer> to wrap the author info and blog info.
Use <address> to wrap the author link and name.
Use rel="author" to annotate the link to the author's name.
Use itemprop="isPartOf" to connect the post to the blog.
This is my work in progress HTML source:
<!-- Hello World authored by Alice posted on Bob's blog -->
<div class="citation">
<article itemscope itemtype="http://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">
<a itemprop="url" href="…">
<cite itemprop="name">Hello World</cite>
</a>
</h1>
</header>
<footer>
authored by
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<address>
<a itemprop="url" rel="author" href="…">
<span itemprop="name">Alice</span>
</a>
</address>
</span>
posted on
<span itemprop="isPartOf" itemscope itemtype="http://schema.org/Blog">
<a itemprop="url" href="…">
<span itemprop="name">Bob's blog</span>
</a>
</span>
</footer>
</article>
</div>
Related notes thus far:
The <cite> tag W3 reference says the tag is "phrase level", so it works like an inline span, not a block div. But the <article> tag seems to benefit from using <h1>, <header>, <footer>. As best I can tell, the spec does not give a solution for citing an article by using <cite> to wrap <article>. Is there a solution to this or a workaround? (The work in progress fudges this by using <div class="citation">)
The <address> tag W3 reference says the content "The address element must not be used to represent arbitrary addresses, unless those addresses are in fact the relevant contact information." As best I can tell, the spec does not give a solution for marking the article's author's URL and name, as distinct from the article's contact info. Is there a solution for this or a workaround? (The work in progress fudges this by using <address> for the author's URL and name)
Please ask questions in the comments. I will update this post as I learn more.
If you’d ask me which markup to use for a list of links to blog posts (OP’s context), without seeing your example, I’d go with something like this:
<body itemscope itemtype="http://schema.org/WebPage">
<ul>
<li>
<cite itemprop="citation" itemscope itemtype="http://schema.org/BlogPosting">
<span itemprop="name headline">Hello World</span>,
authored by <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">Alice</span></span>,
posted on <span itemprop="isPartOf" itemscope itemtype="http://schema.org/CreativeWork"><span itemprop="name">Bob’s blog</span></span>.
</cite>
</li>
<li>
<cite itemprop="citation" itemscope itemtype="http://schema.org/BlogPosting">…</cite>
</li>
</ul>
</body>
Using the sectioning content element article, like in your example, is certainly possible, although perhaps unusual (if I understand your use case correctly): As article is a sectioning content element, it creates an entry in the document outline, which may or may not be what you want for your case. (You can check the outline with the HTML5 Outliner, for example.)
Another indication that a sectioning content element might not be the best choice: Your article doesn’t contain any actual "main" content. Simply said, the main content of a sectioning content element could be determined by stripping its metadata: header, footer, and address elements. (This is not a explicitly specified, but it follows from the defintions in Sections.)
However, not having this content is not wrong. And one could easily imagine (and maybe you intend to do so anyway) that you’ll quote a snippet from the blog post (making this case similar to a search result entry), in which case you’d have:
<article>
<header></header>
<blockquote></blockquote> <!-- the non-metadata part of the article -->
<footer></footer>
</article>
I’ll further on assume that you want to use article.
Notes about your HTML5:
Semantically, the wrapping div is not needed. You could add the citation class to the article directly.
The header element is optional if it just contains a heading element (this element makes sense when your header consists of more than just a heading element). However, having it is not wrong, of course.
I’d prefer to include the a element in the cite element (similar to the fifth example in the spec).
The span element can only contain phrasing content, so address isn’t allowed as a child.
The address element must only be used if it contains contact information. So if this element is appropriate depends on what is available at the linked page: if it’s a contact form, yes; if it’s a list of authored blog posts, no.
The author link type might not be appropriate, as it’s defined to give information about the author of the article element. But, strictly speaking, you are the author. If the article would consist only of the blog post author’s actual content, using the author link type would be appropriate; but in your case, you are writing the content ("authored by", "posted on").
You might want to use the external link type for all external links.
Notes about your Microdata:
You can specify the Schema.org properties headline and name in the same itemprop (separated with space).
You might want to use Schema.org’s citation property on the article (which requires that you specify a parent type of CreativeWork or one of its child types; i.e., it could be WebPage or maybe even AboutPage in your case).
Taking your example, this would give:
<body itemscope itemtype="http://schema.org/WebPage">
<article itemprop="citation" itemscope itemtype="http://schema.org/BlogPosting" class="citation">
<header>
<h1>
<cite itemprop="headline name"><a itemprop="url" href="…" rel="external">Hello World</a></cite>
</h1>
</header>
<footer>
authored by
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
<a itemprop="url" href="…" rel="external"><span itemprop="name">Alice</span></a>
</span>
posted on
<span itemprop="isPartOf" itemscope itemtype="http://schema.org/Blog">
<a itemprop="url" href="…" rel="external"><span itemprop="name">Bob’s blog</span></a>
</span>
</footer>
</article>
</body>
(All things considered, I still prefer the section-less variant.)
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>