Consider this example:
<section id="news_block_left" class="block" itemscope="" itemtype="http://schema.org/ItemList">
<a href="http://dev.com/index.php?controller=NewsList" title="News" itemprop="url">
<h2 class="title_block" itemprop="name">News</h2>
</a>
<div class="block_content">
<ul class="news-list">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/NewsArticle">
<a href="http://dev.com/index.php?id_news=7&controller=News" title="News Title1" itemprop="url">
<span><span itemprop="datePublished">2015-03-30</span> <em itemprop="headline">News Title1</em></span>
</a>
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/NewsArticle">
<a href="http://dev.com/index.php?id_news=8&controller=News" title="T230 series (1999–2006)" itemprop="url">
<span><span itemprop="datePublished">2015-03-08</span> <em itemprop="headline">T230 series (1999–2006)</em></span>
</a>
</li>
</ul>
<meta itemprop="numberOfItems" content="2">
<a class="more_news" href="http://dev.com/index.php?controller=NewsList" title="More news">
<span>More news</span>
</a>
</div>
</section>
This block exists in the sidebar, it doesn't contain full news element data, only a couple of link this them.
The link "More news" leads to a more complete list with more markup (but still only a list with links to the actual articles).
Is there a benefit in putting Microdata on such preview lists? Or is Microdata intended for complete pages (complete news page with body, product page, etc.)?
P.S. Don't mind the unfriendly URLs, it's only dev version.
That’s fine. It’s in no way required to use Microdata only for certain content. The same goes for the vocabulary Schema.org. The more the merrier.
Thanks to using Schema.org’s url property for each NewsArticle item, consumers have the chance to learn that these items have separate URLs with probably (but not necessarily) more relevant content.
On a side note: You might want to use name instead of headline (or name in addition). The name property, as it can be used on all Schema.org types, has probably more support than the headline property, which can only be used on CreativeWork types. (Currently it gets discussed if headline should be marked superseded by name.)
Related
I am building a team page for my client's website.
The team page contains a list of their employees along with following details:
image
Twitter Link
Facebook Link
Full Name
Designation (CEO/Founder, etc).
How can I use metadata from schema.org for adding all of the above fields?
This is what I have come up so far.
<ul>
<li>
<article itemscope itemtype="http://schema.org/Person">
<h1 itemprop="name">Team Member's Name</h1>
<p>CEO</p>
<img src="" alt="" itemprop="image">
Facebook Profile
LinkedIn Profile
</article>
</li>
</ul>
Also, In terms of adding further meta data, I want to even add a additional property to a wrapper <div> with itemscope of the company that I am developing this website for.
So, that I add not only the meta data of each emplyoee, but I also add the company name (which is same for each employee).
You can use
name for the full name (and if you want, givenName, familyName, and honorificPrefix/honorificSuffix in addition),
image for the image,
sameAs for the social media profiles, and
jobTitle for the designation.
To link the persons and the organization, look for appropriate properties that have Person as expected value (from Organization) or Organization as expected value (from Person).
A simple way could be:
<div itemscope itemtype="http://schema.org/Organization">
<ul>
<li itemprop="founder" itemscope itemtype="http://schema.org/Person"></li>
<li itemprop="employee" itemscope itemtype="http://schema.org/Person"></li>
<li itemprop="employee" itemscope itemtype="http://schema.org/Person"></li>
</ul>
</div>
If your markup doesn’t allow this, Microdata’s itemref attribute might be useful (example).
According to schema.org this is how you add properties. You can learn more here. http://schema.org/docs/gs.html#schemaorg_types
<div itemscope itemtype="http://schema.org/Person">
Alice Jones
</div>
<div itemscope itemtype="http://schema.org/Person">
Bob Smith
</div>
Then you can use the available property types from this table. http://schema.org/Person
However, since you're doing team members (employees), you may want to structure the markup around properties from Organization. http://schema.org/Organization
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 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 adding the schema.org Microdata to my website.
My HTML code is like this:
<div itemscope itemtype="http://schema.org/Organization">
<span class="title">Name of the organization</span>
ABC Company
</div>
Since the itemprop "url" and "name" of the Organization are all in the anchor tag. How can I indicate the both "url" and "name" itemprop on the same tag? Must I add extra span tag for this purpose?
I have tried searching some coding examples on this but cannot find any example to show the use of multiple itemprop on the same tag.
At the end, I want to have Microdata like this:
url="http://www.ABCCompany.com", name="ABC Company"
You have to do it by nesting two elements. For example, you can nest a <span> inside the <a> and put the itemprop="name" on that:
<div itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="http://www.ABCCompany.com/">
<span itemprop="name">ABC Company</span>
</a>
</div>
I find this site handy for testing such things.
There may be a problem with google. The "rich snippets testing tool" indicates that when you mark an anchor tag as a url, the body of the tag is used as value rather than the href attribute. But nobody wants to display the url inside an anchor tag.
This also works and may look a bit easier to maintain:
<div itemscope itemtype="http://schema.org/Organization">
<span class="title" itemprop="name"><a itemprop="url" href="http://www.ABCCompany.com/">ABC Company</span></a>
</div>
Google's support for schema.org and the google structured data tester have improved considerably since the original question was posted. The code above validates correctly in it.
The OP's original code now seems to work ok. As shown here:
https://search.google.com/structured-data/testing-tool#url=http%3A%2F%2Fmercedes-benzhanoi.com.vn%2Fmercedes-ha-noi.auto%2Fgla-250-4matic.html
<div itemscope="" itemtype="http://schema.org/Organization">
<span class="title" itemprop="name">
<a itemprop="url" href="http://mercedes-benzhanoi.com.vn/mercedes-ha-noi.auto/gla-250-4matic.html">GLA 250 4MATIC</a></span>
</div>