Html5 and Schema.org tags overlap?

[aristotle]

I recently converted an old site from xhtml to html5 and am now thinking about converting some other sites too, since I plan to keep these sites for many years to come, and think html5 might be better for the long term.

I want to use elements such as <article>, <section> and <nav> on my new html5 pages, because they might help search engines understand the structure better. But I've found out that Schema.org has some tags that seem to have the same function. For example, compare:

<article> vs. <div itemscope="itemscope" itemtype="http://schema.org/Article">

and
<nav> vs. <div itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">

I haven't studied the use of Schema.org tags in detail yet, but it appears that some of them have the same meaning, or approximate meaning, as the corresponding html5 tags.

So my question is, should I choose one or the other, or use both. I prefer the html tags because the schema.org tags are clumsy and bloated.

It has also occurred to me that the two types might be combined as follows:

<article itemscope="itemscope" itemtype="http://schema.org/Article">
and
<nav itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">

Does anyone have any advice or opinions about the best way to use these tags?
thank you

[aristotle]

I apologize for the confusion. I got my example by looking at examples from source codes of various web pages. Since I decided not to use Schema.org code at this point, I didn't try to learn how to use it in detail. Maybe someone can post the correct code for the simplest form of a stand-alone link with the proper attributes.

The point I wanted to make is that the Schema.org code doesn't add any new information in a lot of cases where it is being used, or at least that's how it appears to me..

[graeme_p]

My apologies too - I could have read your post more carefully.

It sounds like misuse. I would like to see those pages - would you mind Sticky Mailing me the links?

[phranque]

Since I decided not to use Schema.org code at this point, I didn't try to learn how to use it in detail.

in less time than you've spent on this thread you could read and understand Getting started with schema.org:
http://schema.org/docs/gs.html [schema.org]

Maybe someone can post the correct code for the simplest form of a stand-alone link with the proper attributes.

<a href="http://example.com/">anchor text</a>

The point I wanted to make is that the Schema.org code doesn't add any new information in a lot of cases where it is being used, or at least that's how it appears to me..

did you find these examples of schema.org code "in the wild" or were they presented as examples of correct usage?

itemprop="url" standing alone adds nothing.
within the context of an itemscope of an itemtype it is one piece of a data structure.

according to schema.org, a URL isn't a "thing" it's a data type used to describe a "thing".
using microdata to mark up a stand-alone link is similar to mentioning that something is "blue" without mentioning what "it" is.

your example is incomplete as there is no itemscope, so you are correct that including the typical Schema.org attributes doesn't add any new information without also specifying which attributes describe what.

[aristotle]

It sounds like misuse. I would like to see those pages - would you mind Sticky Mailing me the links?

I didn't keep any record of the pages where I found those examples. That was several days ago when I was still planning to use schema.org attributes for article and sitenavigation element. I copied 4 or 5 examples from source codes I found onto a text page and tried to compare them, and what I posted earlier is what I came up with. But I didn't save any of that work.

Maybe someone can post the correct code for the simplest form of a stand-alone link with the proper attributes.
<a href="http://example.com/">anchor text</a>

That's basically the same as what I posted earlier just using html only. But the discussion is about how to do it incorporating the correct schema.org code. When I tried to do it earlier, everyone said I did it incorrectly. So I'm trying to find out how to do it correctly -- That's what I've been asking for.

Edit P.S. Here's something I posted earlier in this thread:

<ul itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
<li><a itemprop="url" href="URL1"><span itemprop="name">Anchor1</span></a></li>
<li><a itemprop="url" href="URL2"><span itemprop="name">Anchor2</span></a></li>
<li><a itemprop="url" href="URL3"><span itemprop="name">Anchor3</span></a></li>
.
.
.
</ul>

nThat's a survival from my earlier work. It's what I was planning to use at one point. But then I decided to eliminated the schema.org code.

[aristotle]

Actually here's the final version of what I originally intended to use:

<nav itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li><a itemprop="url" href="URL1"><span itemprop="name">Anchor Text1</span></a></li>
<li><a itemprop="url" href="URL2"><span itemprop="name">Anchor Text2</span></a></li>
<li><a itemprop="url" href="URL3"><span itemprop="name">Anchor Text3</span></a></li>
.
.
.
</ul>
</nav>

And here's what I actually did use:

<nav>
<ul>
<li><a href="URL1">Anchor Text1</a></li>
<li><a href="URL2">Anchor Text2</a></li>
<li><a href="URL3">Anchor Text3</a></li>
.
.
.
</ul>
</nav>

I decided that the schema.org code doesn't add anything of value, so I took it out.

[phranque]

if your SiteNavigationElement has no other properties than a url then you have no need for structured markup.
you were correct - in that specific application, structured markup adds no value.

[graeme_p]

The mark up with schema.org is wrong. It is actually providing incorrect semantic information.

The itemprop=url is saying that the href on that element is the URL for the navigation, which is clearly not true. The same for itemprop=name. The correct schema.org mark up would be:

<nav itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li><a href="URL1">Anchor Text1</a></li>
<li><a href="URL2">Anchor Text2</a></li>
<li><a href="URL3">Anchor Text3</a></li>
</ul>
</nav>

Suppose you had a page about several people, like this:

<table itemscope="itemscope" itemtype="http://schema.org/Person">
<tr><td>Name</td><td itemprop="name">aristotle</td></tr>
<tr><td>Site</td><td><a itemprop="url" href="example.com">aristotle's personal site</a></td></tr>
</table>
<table itemscope="itemscope" itemtype="http://schema.org/Person">
<tr><td>Name</td><td itemprop="name">graeme</td></tr>
<tr><td>Site</td><td><a itemprop="url" href="example.net">graeme's blog</a></td></tr>
</table>

That associates example.com with the Person named aristotle, and example.net with the Person named graeme.

[gouri]

In general, would you guys say that Schema.org used with addresses adds more information or is it not necessary? Would the use of the <address> tag be enough?

I am thinking about something such as the following on a contact page:

Blue Widget Company
111 Blue Street
Suite 111
Portland, Oregon 11111

For the above, would the use of Schema.org be recommended?

[aristotle]

The itemprop=url is saying that the href on that element is the URL for the navigation, which is clearly not true.

I don't understand this at all. In my case those URLs definitely are for navigation. They are internal links pointing to other pages on the site. Isn't that what "site navigation" means.

would you guys say that Schema.org used with addresses adds more information or is it not necessary? Would the use of the <address> tag be enough?

This looks like it might be another example of the overlap that caused me to start this thread. I would like to see an answer to this too.

[graeme_p]

@gouri, it depends in what you want to achieve. schema.org markup lets you be a lot more specific: you can mark-up parts of the address: e.g. post code, street address, country etc. Probably a good idea if you need to appear in local search.

@aristotle, the itemprop attributes relate to the enclosing itemscope, not the tag they for part of.

Look at my Person example. The first itemscope runs from the first <table> tag to the </table> that closes it. So the <td itemprop="name">aristotle</td> says "aristotle" is the name of the person described in the table.

itemprop=url within the <nav> element in my example above, says it is a URL for the contents of the <nav> as a whole. It says, "this URL provides a definitive version of the site navigation" NOT "This URL is part of the site navigation". It may make sense for a link from your main navigation to a site map. Like this:

<ul itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
<li><a href="URL1">Anchor Text1</a></li>
<li><a href="URL2">Anchor Text2</a></li>
<li><a href="/sitemap.html">Site map</a></li>
</ul>

I have no idea whether that is a good idea, but its the only reason I can think of for itemprop=url within SiteNavigationElement.

As for telling search engines that the URLs are part of the site navigation, the itemtype="http://schema.org/SiteNavigationElement" already tell search engines that everything in the ul is navigation.

[Propools]

I've said it for years now, that the more granular the data the richer the web space. Schema attributes are the realization of this.

The schema attributes, I expect, will be wrapped around and fully integrated with Google Now [google.com].

I think we need to look further down the road than what we are.

[Propools]

I just ran across this: Add Schema.org markup to emails [developers.google.com]

[Propools]

Google is well invested in the Schema architecture. Look at their Reference Guide [developers.google.com]

[gouri]

I would like to rank well for local search and from what you guys are saying, I think that using schema.org would help to do this.

One thing that I thought about that I would like to ask about:

Some contact pages do not have a lot of content on them and schema.org coding adds a lot of code to a page. By adding schema.org coding to a contact page, I think that it is possible that the page has more code than content on it.

Could this cause the search engines to view the page unfavorably? If so, could this also have an overall effect on a site?

Also, thanks for the links. Those pages have a lot of information.

[aristotle]

<nav itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li><a href="URL1">Anchor Text1</a></li>
<li><a href="URL2">Anchor Text2</a></li>
<li><a href="URL3">Anchor Text3</a></li>
</ul>
</nav>

So if this is the correct way to do it, does it mean that the SiteNavigationElement doesn't have any properties?

[aristotle]

I've expanded graeme's earlier example to a case in which each person has a second site or second blog. Here is the code:

<table itemscope="itemscope" itemtype="http://schema.org/Person">
<tr><td>Name</td><td itemprop="name">aristotle</td></tr>
<tr><td>Site</td><td><a itemprop="url" href="example.com">aristotle's personal site</a></td></tr>
<tr><td>Site</td><td><a itemprop="url" href="example2.com">aristotle's second personal site</a></td></tr>
</table>
<table itemscope="itemscope" itemtype="http://schema.org/Person">
<tr><td>Name</td><td itemprop="name">graeme</td></tr>
<tr><td>Site</td><td><a itemprop="url" href="example.net">graeme's blog</a></td></tr>
<tr><td>Site</td><td><a itemprop="url" href="example2.net">graeme's second blog</a></td></tr>
</table>

I don't see any difference between this use of itemprop="url", and what I did earlier. In other words, I still think that my original way of coding the SiteNavigationElement might be correct. Here it is:

<nav itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li><a itemprop="url" href="URL1"><span itemprop="name">Anchor Text1</span></a></li>
<li><a itemprop="url" href="URL2"><span itemprop="name">Anchor Text2</span></a></li>
<li><a itemprop="url" href="URL3"><span itemprop="name">Anchor Text3</span></a></li>
.
.
.
</ul>
</nav>


But in the end I decided not to use any Schema.org code at all, but just html5 only, so what I'm doing isn't affected either way.

[drhowarddrfine]

While the talk here has been about schema, there's a big question as to whether RDFa is the better method to use. In fact, it's been shown that it's preferred and far more used.

While some think it's more difficult to use, it's more precise in its descriptions and easier, actually.

Unfortunately, that's all I recall about it but, once a few major things settle down in my company and I can get back on it, we will be using RDFa and not schema.

[graeme_p]

@aristotle, there is a big difference between your examples:

The urls in your version of the Person tables are sites belonging to the Person. Even with multiple urls (something I am doubtful about - the docs say it should provide a canonical URL, and two canonicals seems to be a contradiction in terms).

The navigation element is different. Can you say the page on URL1 is, or belongs to, the Navigation element? No. Therefore it is wrong. It is a navigation URL, not the definitive URL on which to find the navigation.

It is similar to (but NOT the same as) <link rel="canonical">.

@drhowarddrfine, they seem about equally easy to use to me, but I am more familiar with schema.org at the moment. RDFa used to be better supported, but given search engines commitment to schema.org is that still true? I thought not.

[aristotle]

graeme wrote:
The urls in your version of the Person tables are sites belonging to the Person

I'm not so sure about this. In proper usage, a "URL" is not a "site", but a kind of address for a site. So in this case, the URLs could be interpreted as properties (=addresses) associated with the person. And in the case of a SiteNavigationElement, the URLs in the internal navigation links could be properties (=addresses) that define the navigational structure associated with the element.

Also you didn't answer one of my earlier questions about your preferred code for a SiteNavigationElement, which apparently is as follows:

<nav itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li><a href="URL1">Anchor Text1</a></li>
<li><a href="URL2">Anchor Text2</a></li>
<li><a href="URL3">Anchor Text3</a></li>
</ul>
</nav>

Earlier I asked whether, if this code is correct, does it mean that the SiteNavigationElement doesn't have any properties.

[drhowarddrfine]

@graeme_p Google supports RDFa equally well and, iirc, so do the others. I want to say that I read a post on the W3C board saying that Google was even showing a preference for RDFa, despite all the schema stuff, but don't quote me on that.

Like I said, I had to drop all our investigation into this when we had an uptick in busy-ness and, the last I recall, I had made the decision to go with RDFa. When I pick it up again in a few months, I'm sure I'll recall the reasons and all the ins-and-outs.

You might want to Google for Manu Sp orny's article "Google Indexing RDFa 1.0 + schema.org Markup"

EDIT: Remove the space in his last name. Filter's are funny.

[graeme_p]

@drhowarddrfine, looks like we can use whichever we prefer. I should probably learn RDFa rather than assuming that schema.org is easier because it is what I learned first.

@aristotle, there are a lot of properties that a SiteNavigationElement is allowed to have:

[schema.org ]

Few (possibly none) of them are useful. They are there because they have been inherited from parents (Thing and CreativeWork). In practice you probably do not want a SiteNavigationElement to have properties.

With regard to your other comment, note the definition of the url itemprop:

URL of the item.

A link within a navigation block is not the URL of the navigation block. The URLs jointly define the block, but none, by itself is the URL of the block.

[aristotle]

I decided to use Google's Structured Data Testing Tool to check my suggested code for incorporating the Schema.org SiteNavigationElement into an html5 page. To get started, I created a test page by inserting my code into a simple html5 template I made a couple of weeks ago. I trimmed it down to the bare essentials needed for forming an html page, and I only used four navigational links to keep the page short.

Here's the full source code for this test page:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<style type="text/css">
p {font-family: Arial, Tahoma, "Sans Serif"; font-size: 120%; text-indent: 24px}
li {font-family: Arial, Tahoma, "Sans Serif"; font-size: 120%}
h3 {font-family: Arial, Tahoma; font-size: 140%; text-align: center; margin-top: 8px; margin-bottom: 8px}
a:link, a:visited {font-weight: bold}
body {max-width: 900px; margin-left: auto; margin-right: auto; background-color: #F5FFFA; color: #000000}
</style>
</head>
<body>
<br /><br />
<h3>Site Navigation Menu</h3>
<nav itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li><a itemprop="url" href="/page1.html"><span itemprop="name">Page1</span></a></li>
<li><a itemprop="url" href="/page2.html"><span itemprop="name">Page2</span></a></li>
<li><a itemprop="url" href="/page3.html"><span itemprop="name">Page3</span></a></li>
<li><a itemprop="url" href="/page4.html"><span itemprop="name">Page4</span></a></li>
</ul>
</nav>
<br /><br />
</body>
</html>

After I created this test page, I checked to make sure that it passes the W3C html and css validators with no errors, which it does. Then I ran it through Google's Structured Data Testing Tool. Here is part of the result:

Extracted structured data
Item
type: http: //schema.org/sitenavigationelement
property:
url: Page1
name: Page1
url: Page2
name: Page2
url: Page3
name: Page3
url: Page4
name: Page4

So apparently Google's Tool recognizes my code as valid structured data.

I then created a new test page by using graeme's suggested code instead of mine. I didn't change anything else on the page. The only difference is the absence of the Schema.org code in the four links. This page also passes W3C html and css validation. But when I ran it through Google's Structured Data Testing Tool, here is the result that came back:

Extracted structured data
No data detected. Learn more

[lucy24]

I checked to make sure that it passes the W3C html and css validators

The w3 html validator has an option for html fragments, so you don't have to give it an entire page. Use the "Direct Input" tab, More Options dropdown, and just paste in the bit you want to check. The only choices are HTML 4 and XHTML 1, but that's not an issue here.

[graeme_p]

I am a bit confused. Lots of people, but not everyone, adds itemprop=url to each link, but I cannot reconcile that to what the schema.org documentation says unless each link is a separate SiteNavigationElement which becomes ridiculously verbose.

Google's test tool does not list items that do not have properties.

For one of my URLs, Google recognises:

• Authorship markup (with green highlighting, and photo in SERPS listingsample)
  
• Web page with breadcrumb property
  
• Organisation with url and logo
  
• Article with headline and articlebody
  

Yandex lists all the above and WPAdblock and SiteNavigationElement. It also reports errors (missing data) in Organisation.

Finally Bing only recognises WebPage and Organisation. It lists the headline property of the article as a property of the WebPage, and only recognises the url property of Organisation.

When I added a completely unnecessary itemprop=name within the SiteNavigation, Google picked it up. Does that mean that every item must have at least one property to be valid?

Not sure what to make of all that.

[graeme_p]

Going back to the topic of overlapping markup, MDN says this about the <main> tag:

As a newly-proposed feature of HTML, the <main> element is not yet supported widely. You are strongly urged to add the "main" ARIA role to any <main> element

[developer.mozilla.org ]

So we need to ensure each element we use is widely supported before we rely on its semantics.

[aristotle]

I'm still waiting for someone to explain why the Schema.org SiteNavigationElement needs to be used at all, since the html5 <nav> tag basically can serve the same function.

[graeme_p]

I'm still waiting for someone to explain why the Schema.org SiteNavigationElement needs to be used at all, since the html5 <nav> tag basically can serve the same function.

A few possible reasons which may or may not matter in particular circumstances:

1) You cannot be certain that every search engine or other bot understands both.
2) Their meanings are not identical. SiteNavigationElement it is an element of the page whereas nav may be specific to its containing section, and
3) schema.org is more specific and provides a separate breadcrumb element.
4) There are validators for schema.org that actually show you what data was extracted - and they are provided by the search engines themselves.
5) You use schema.org markup on the page/site, and want to be consistent.

One thing about this discussion has made me realise is that I dislike both schema.org and semantic HTML5. I know we have to live with them, but I cannot resist a rant.

HTML5:

1) Ads a completely unnecessary layer to document. It often ends up being wrapped around the HTML you would otherwise need (e.g. <nav><ul><li> .....) instead of just (<ul><li>

2) Explicit sectioning combines badly with <hn> tags. Explicit sectioning plus a simple <h> tag that would simply mean "appropriate heading for this level of section" (which I think was proposed at one stage) would be fine. Implicit sectioning is also fine. Fortunately we can mostly stick to implicit sectioning.

schema.org:

1) lots of properties that are only there because they are inherited
2) some key definitions are ambiguous (see argument over url within SectionNavigation above).
3) possible patent issues (see the rather restrictive terms of the patent waiver)
4) inconsustencies - e.g. by is "breadcrumb" a property of WepPage but SiteNavigationSection a seperate Thing?

I some what prefer schema.org's approach of using attributes, and it allows you to be a lot more specific, but HTML5 is more clearly documented.

Incidentally, schema.org itself suggests using it with HTML5 - see the time example on the "getting started" page.

[drhowarddrfine]

1) Ads a completely unnecessary layer to document. It often ends up being wrapped around the HTML you would otherwise need (e.g. <nav><ul><li> .....) instead of just (<ul><li>

Not really. The purpose of <nav> is to create a section identified as a navigation object. There is no way to identify it as so to search engines or bots in any other way, ignoring schema, RDF(a), etc. You don't have to use it but it's better to do so.

[edited by: phranque at 10:03 pm (utc) on Jan 5, 2014]
[edit reason] tos#19 [/edit]

[graeme_p]

There is no way to identify it as so to search engines or bots in any other way, ignoring schema, RDF(a), etc.

Yes, its the only way if you ignore every other way of going it! As I said, I prefer the schema.org/RDFa approach of using attributes, but I dislike other aspects of schema.org.

[drhowarddrfine]

What's really happening is we're all going back to using XML and XHTML, what we really should be using, but using RDFa and schema to identify the elements. There's even an article somewhere about making custom tags for elements but then that's XML, too! It's all coming around full circle.

I damn the day the XML stuff fell by the wayside.