I am brand new to Microdata and I am slowly getting it. But for some reason this does not validate with the W3C validator since I’m putting a <div> in the middle of a <ul>:
<div itemscope itemtype="http://schema.org/BeautySalon">
<ul>
<li>
<b>
<span itemprop="name">foobar and you</span>
</b>
</li>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<li>
<span itemprop="streetAddress">6969 foobar</span>
</li>
<li>
<span itemprop="addressLocality">Miami Beach</span>,
<span itemprop="addressRegion">FL</span>
<span itemprop="postalCode">33139</span>
</li>
</div>
<li>
<span itemprop="telephone">305 691 6969</span>
</li>
</ul>
</div>
How would I correctly add the
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
and correctly add all the itemprop and still be W3C valid?
ul doesn’t allow div as child, so you can’t use it as container for several li elements. There are various possible solutions.
I think using ul here is not appropriate. But if you want to keep using ul:
It doesn’t seem to make sense that the street address is not in the same list item as the locality/region/postal code. So you might want to put them all in the same list item (and you might also want to use br for postal addresses).
If you want to use b for the name, you could omit the span. Either specify the Microdata on the b or (for consistency) on the li.
If you don’t need a separate element for the telephone number, you could specify the Microdata on the li.
This would give you:
<div itemscope itemtype="http://schema.org/BeautySalon">
<ul>
<li itemprop="name"><b>foobar and you</b></li>
<li itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">6969 foobar</span><br>
<span itemprop="addressLocality">Miami Beach</span>,
<span itemprop="addressRegion">FL</span><br>
<span itemprop="postalCode">33139</span>
</li>
<li itemprop="telephone">305 691 6969</li>
</ul>
</div>
You can use every HTML5 element for Microdata. Re-use your existing markup. Only if you need additional elements for Microdata, add and use div/span (and possibly meta/link).
Related
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.)
In SEO terms...
Is it best to put the scheme on the parent containing all the links?
<nav itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
Link 1
Link 2
Link 3
</nav>
...or should each link be considered as it's own element?
<nav>
<span itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
<a itemprop="url" href="#">
<span itemprop="name">Link 1</span>
</a>
</span>
<span itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
<a itemprop="url" href="#">
<span itemprop="name">Link 2</span>
</a>
</span>
<span itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
<a itemprop="url" href="#">
<span itemprop="name">Link 3</span>
</a>
</span>
</nav>
If SiteNavigationElement is meant for the whole navigation (i.e., a navigation link list), your first example is correct.
If SiteNavigationElement is meant for a single navigation entry (i.e., a link in the navigation link list), your second example is correct.
I think Schema.org doesn’t unambiguously define which variant is meant, as they only say:
A navigation element of the page.
However, the parent type WebPageElement is defined as:
A web page element, like a table or an image
Also, all the other child types (like Table or WPFooter) seem to be used for the whole thing, and not specific parts of the thing.
So this seems to suggest that the whole navigation should be marked up, and not each single link:
<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li>Link 1</li> <!-- don’t use the 'url' or 'name' property here! -->
<li>Link 2</li>
</ul>
</nav>
In this case, all the properties belong to the whole navigation, so that means the url property would specify a URL for this navigation (and not the URLs of the links in this navigation!).
According to Search Engine Land, it's supposed to look like this:
<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
<li itemprop="name">
<a itemprop="url" href="#">Link 1</a>
</li>
<li itemprop="name">
<a itemprop="url" href="#">Link 2</a>
</li>
<li itemprop="name">
<a itemprop="url" href="#">Travel Resources</a>
</li>
</ul>
First answer is correct but I'd mix both for (HTML5-)semantic:
<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li>
<a itemprop="url" href="http://example.com/">
<span itemprop="name">Link 1</span>
</a>
</li>
</ul>
</nav>
<nav role="navigation">
<ul role="menubar" aria-activedescendant="">
<li role="presentation" itemscope itemtype="https://schema.org/SiteNavigationElement">
<a href="" role="menuitem" tabindex="-1" itemprop="url">
<span itemprop="name">Link 1</span>
</a>
</li>
</ul>
</nav>
schema.org/SiteNavigationElement extends WebPageElement and can be used to mark-up links, which would often make good contextual links. You can use this schema for your page menu.
<nav role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li>
<a href="https://yoursite.com/" title="Link to Home" itemprop="url">
<span itemprop="name">Home</span>
</a>
</li>
<li>
<a href="https://yoursite.com/sample-page" title="Link to sample page" itemprop="url">
<span itemprop="name">sample page</span>
</a>
</li>
</ul>
OP's original question contained a good example of code. none of the answers do though ...
It seems everyone threw in a somewhat random answer ... You can test your schema microdata code using the following official google tool search.google.com/structured-data/testing-tool.
If you run the proposed answers in this tool you will notice that none give you the expected result: a list of SiteNavigationElement with a name & url
Some might argue that a whole menu might be considered a "navigation element" but I think it makes more sense for this denomination to designate a single navigation link. Plus if we use the SiteNavigationElement as a marker for the whole menu we have no way of associating names with URLs in the html.
To achieve this, you need to have each link be encapsulated by an itemscope property and they all need to have their own name and url itemprop (these are singleton as mentioned by #David Harkness, so they have to appear only once per itemprop)
<nav>
<ul>
<li itemscope itemtype="http://schema.org/SiteNavigationElement">
<a itemprop="url" href="http://example.com/link-1">
<span itemprop="name">Link 1</span>
</a>
</li>
<li itemscope itemtype="http://schema.org/SiteNavigationElement">
<a itemprop="url" href="http://example.com/link-2">
<span itemprop="name">Link 2</span>
</a>
</li>
</ul>
</nav>
The code above will yeld two different navigation elements, each with a name and an URL.
Note: the itemprop="url" attribute uses the anchor's href attribute as value
Consider the following code snippet adapted from the page source of habd.as:
<nav itemscope itemtype="https://schema.org/SiteNavigationElement">
<meta itemprop="name" content="Main Menu">
<a itemprop="url" class="active" href="/">habd.as</a>
<a itemprop="url" href="/code/">Code</a>
<a itemprop="url" href="/post/">Posts</a>
<a itemprop="url" href="/site/">Sites</a>
<a itemprop="url" href="/talk/">Talks</a>
</nav>
<nav itemscope itemtype="https://schema.org/SiteNavigationElement">
<meta itemprop="name" content="Utility Menu">
<a itemprop="url" href="/about/">About</a>
<a itemprop="url" href="/contact/">Contact</a>
</nav>
When there are multiple navigations as shown above, use of SiteNavigationElement to group navigation items affords the use of name
such that the grouping itself may be labeled. Labels for individual items within the groups can be obtained using the content of the links themselves.
Therefore, your first example is more correct despite assertions to the contrary.
I think the most elegent solution would be to use the hasPart property.
<nav itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
<a itemprop="hasPart" href="/link1.html">Link 1</a>
<a itemprop="hasPart" href="/link2.html">Link 2</a>
<a itemprop="hasPart" href="/link3.html">Link 3</a>
</nav>
Using Google's Structure Data Testing Tool informs that these links are part of the SiteNavigationElement and that Google should follow the links to those items:
Having considered all the above, I came to the following conclusion:
<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li itemprop="hasPart">
<span itemprop="name">Home</span>
</li>
</nav>
Thus, each <li> is part of the SiteNavigationElement that has the url and name. I think this is the best option.
But do search engines need such redundant markup? They already know that href in is the url, and inside the tag <a>name is the name. What do you think about it?
Here's a quote from a post at Google support site, saying:
We are contemplating to implement Site Navigation Schema
https://schema.org/SiteNavigationElement
Will google respect it and display sitelinks if the schema is there or it will do it own thing anyway?
I sthere a point at all?
This type of top-level does not currently support Google. In fact,
this type does not even have a scope definition. It is unclear whether
this type affects a group, for example, a navigation menu, or only one
link.
This confirms my experience with their rich results test: only breadcrumbs are recognized. Yandex validates my microdata just fine. So SiteNavigationElement on your page seems to be as useless as it is valid.
I would like to add microdata to a page, but the data for an item is broken up into a couple discontinuous parts of the page. If I have two span elements with an itemscope attribute, is it possible to get search engines to merge the two itemscopes and interpret them as a single item?
For example*:
<span itemscope itemtype="http://schema.org/Person">
Hello, my name is <span itemprop="name">Glinda</span>.
</span>
I like to fly around in a giant bubble.
<span itemscope itemtype="http://schema.org/Person">
I live in the <span itemprop="location">Land of Oz</span>.
</span>
Is there a way to add something like an itemid attribute to tell a web spider that the two Person itemscopes should be consumed as one item, instead of two?
Maybe something like this.
<span itemscope itemtype="http://schema.org/Person" itemid="7f6ba1">
Hello, my name is <span itemprop="name">Glinda</span>.
</span>
I like to fly around in a giant bubble.
<span itemscope itemtype="http://schema.org/Person" itemid="7f6ba1">
I live in the <span itemprop="location">Land of Oz</span>.
</span>
* I understand that in this example I could just use one big span, but I can't do that with the actual page I have to work with.
Edit: Perhaps I need a better example. It's a bit contrived, but demonstrates the problem I have. Remember, reorganizing the page is not an option.
<h1>Locations</h1>
<ul>
<li itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Bob</span> lives in <span itemprop="location">Berkeley</span>
</li>
<li itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Carol</span> lives in <span itemprop="location">Cupertino</span>
</li>
</ul>
<h1>Jobs</h1>
<ul>
<li itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Bob</span> works at <span itemprop="affiliation">Borders</span>
</li>
<li itemscope itemtype="http://schema.org/Person">
<span itemprop="name">Carol</span> works at <span itemprop="affiliation">Capitol One</span>
</li>
<ul>
Is there a way to make this microdata result in two Person items, rather than four?
I want to have Bob, who lives in Berkeley, and works at Borders, and Carol who lives in Cupertino and works at Capitol One.
If I'm reading the W3 itemref properly, you can use the itemref property for this purpose:
<h1>Locations</h1>
<ul>
<li itemscope itemtype="http://schema.org/Person" itemref="bob">
<span itemprop="name">Bob</span> lives in
<span itemprop="homeLocation">Berkeley</span>
</li>
<li itemscope itemtype="http://schema.org/Person" itemref="carol">
<span itemprop="name">Carol</span> lives in
<span itemprop="homeLocation">Cupertino</span>
</li>
</ul>
<h1>Jobs</h1>
<ul>
<li itemprop="affiliation" itemscope itemtype="http://schema.org/Organization" id="bob">
Bob works at <span itemprop="name">Borders</span>
</li>
<li itemprop="affiliation" itemscope itemtype="http://schema.org/Organization" id="carol">
Carol works at <span itemprop="name">Capitol One</span>
</li>
<ul>
Yes it is possible if you use the itemref property.
Have a look at this website: IJzerfront 14-18
They link up the information (description and image are separated and are added to the Museum Place).
What meaningful HTML tag should be used to create breadcrumbs? I have a menu bar which is created using unsorted list since it is a list:
<ul id="navigation">
<li><%= Html.ActionLink("Home", "Index", "Home") %></li>
<li><%= Html.ActionLink("Contacts", "Index", "Contacts") %></li>
</ul>
Now, I decided to put a breadcrumbs below the menu, the problem is, I don't know what tag should I use. As much as possible, I want to use meaningful tags. Please help me...
There's plenty of ways of marking up breadcrumbs. A list is fine. An ordered list is more appropriate for breadcrumbs because it is a list of links in a particular order.
If you don't want to use a list, you could instead leave them as a set of links in a div. Although if you're using HTML5, you may want to put them in a nav element.
Finally, the HTML5 spec suggests using a p element because they could be read as a paragraph of direction on how to get to the particular page.
Old post but came up high in a search and I think things have changed a bit since this question was originally asked.
In a html5 site I would use the nav tag as breadcrumbs are technically navigation through the site. If you want to make it even more clear what they are you can add microdata to state that they are breadcrumbs.
From Googles example and html5doctor
<nav>
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses" itemprop="url">
<span itemprop="title">Dresses</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/dresses/real" itemprop="url">
<span itemprop="title">Real Dresses</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
<span itemprop="title">Real Green Dresses</span>
</a>
</li>
</ul>
If you don't want to use an ordered list or paragraph tags, you could always use a nested list to semantically represent the hierarchical nature of the breadcrumbs.
The following example comes from Mark Newhouse's A List Apart article entitled "CSS Design: Taming Lists."
<div id="bread">
<ul>
<li class="first">Home
<ul>
<li>» Products
<ul>
<li>» Computers
<ul>
<li>» Software</li>
</ul>
</li>
</ul></li>
</ul></li>
</ul>
</div>
Using an unordered list for your breadcrumbs seems perfectly reasonable to me; there isn't always a named tag for every application specific structure and you are displaying a list of breadcrumbs afterall.
You can use css to make the bread crumbs display the way you would like.
to create breadcrumb you can use following ways: (you should use nav as wrapper to tell bots there's some internal links, if you're using html5)
Matthew Rankin's answer describes this one.
second way using ol list instead of first way like below to tell bot there's an order between items:
<nav>
<ol class="breadcrumb">
<li>Top Level</li>
<li>Second Level</li>
<li>Third Level</li>
<li>Current Item</li>
</ol>
</nav>
third way is using p tag and rel up for links(rel up is not final!)
<nav>
<p>
Main >
Products >
Dishwashers >
<a>Second hand</a>
</p>
</nav>
Quick 2021 update:
RFDa:
<ol vocab="https://schema.org/" typeof="BreadcrumbList">
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" href="https://example.com/dresses">
<span property="name">Dresses</span></a>
<meta property="position" content="1">
</li>
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" href="https://example.com/dresses/real">
<span property="name">Real Dresses</span></a>
<meta property="position" content="2">
</li>
</ol>
Microdata:
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses">
<span itemprop="name">Dresses</span></a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://example.com/dresses/real">
<span itemprop="name">Real Dresses</span></a>
<meta itemprop="position" content="2" />
</li>
</ol>
This examples are taken from https://schema.org/BreadcrumbList
As stated on http://data-vocabulary.org:
Since June 2011, several major search engines have been collaborating on a new common data vocabulary called Schema.org
always checkout Jacob Nielsen: He has recommended the ">" since 2003.
Take a look at: https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html
You can combine with schema.org ( suggested by #SCabralO ) if wanted but keep the attributes from this example. Make it perfect but simple ;)
Just trying to get the hang of using the semantically correct XHTML markup.
Just writing the code for a small navigation item. Where each button has effectivly a title and a descrption. I thought a definition list would therefore be great so i wrote the following
<dl>
<dt>Import images</dt>
<dd>Read in new image names to database</dd>
<dt>Exhibition Management</dt>
<dd>Create / Delete an exhibition </dd>
<dt>Image Management</dt>
<dd>Edit name, medium and exhibition data </dd>
</dl>
But...I want the above to be 3 buttons, each button containing the dt and dd text. How can i do this with the correct code? Normally i would make each button a div and use that for the visual button behaviour (onHover and current page selection stuff).
Any advice please
Thanks
<ul>
<li>Import images</li>
<li>Exhibition Management</li>
<li>Image Management</li>
</ul>
thats good enough.
using <dl> for navigation is not very clever. or use a <span> inside the <li> with the description. <dd> will give you much headache since they aren't inside the <dt> and don't care about its position and styling
I am slightly confused by the use of your term "button". If you mean a link, then you could do:
Import images
If, however, you mean the input tag, then one way to do this would be to use input type=image and then provide an alt description.
For instance:
<input type="image" src="image.jpg" value="Import images" alt="Read in new image names to database"/>
You could use <label> elements instead of <dt> elements:
<ul>
<li>
<a href="#">
<label for="import-images">Import images</label>
<span id="import-images">Read in new image names to database</span>
</a>
</li>
<li>
<a href="#">
<label for="exhibition-management">Exhibition Management</label>
<span id="exhibition-management">Create / Delete an exhibition</span>
</a>
</li>
<li>
<a href="#">
<label for="image-management">Image Management</label>
<span id="image-management">Edit name, medium and exhibition data</span>
</a>
</li>
</ul>
... the for attribute of the <label> element need only match the id of another element in the document to be valid.