EDIT: This question is quite long, including several examples of the sort of thing I was looking for. I've found the answer (see below), which is that something like this does exist, and you can read all about it on schema.org.
I'd like to be able to attach certain bits of semantic information to several different items on the same page. For example, my page has a list of songs, that looks a little like:
<div class="song">
<img src="cover-art-image" />
<p>Description on image</p>
<a id="..." href="link-to-song">View song</a>
</div>
<div class="song">
...
</div>
Now, I'd like to display semantic information about these objects (in this case songs), so we include semantic data in <meta>
tags on the song's actual page (along with <link rel="author" ...>
and so on).
So I'm wondering what the best way is to communicate (to search engines, bits of JavaScript, or in our case a browser plug-in) that the link "View song"
is a URI that uniquely describes a semantic object (meta-data and all).
I've read about using link rel="canonical"
, but as far as I can tell, this is meant to be used in the header, to describe the current page (or, to inform a search engine what the canonical representation of the current page is), whereas what I'd like is to communicate that we want to describe a sub-object that's being displayed on the current page. So, in an ideal world, I'd write something like:
<div class="song">
<img ... />
<p> ... </p>
<a href="link-to-song" rel="canonical">View Song</a>
</div>
to describe that the thing at the end of the href
(that is, the song's page) is the canonical representation of the parent HTML node. But, that's not really what rel="canonical"
means: is there something similar already defined that will do (i.e. communicate) what I want?
If not, what's the most "web-friendly" way to implement such a thing? I'm certain just using multiple rel="canonical"
links isn't the way to do it (and it'd be nice not to offend the search engines by trying to embed semantic data that should actually be helpful).
The only thing I can think of would be to put something like
<a href="..." rev="summary"> ... </a>
to reflect that what's being displayed here is a summary of what's on the main page for the entry - but I don't think that's interpreted as being "scoped" to mean "the DOM node containing this link is a summary of ...".
EDIT: For another example of how you could use this (in case my meaning isn't clear) might be to have each comment on a blog-post contain such a link, which would uniquely identify a URI associated with that specific post. Following that link, you'd find a page containing e.g. <link rel="author"...>
information for the comment, a link back to the post on which it was made, and so on.
EDIT: To make it more clear what I mean, we already use meta-data like
<link rel="canonical" href="..." />
in the <head>
of a page to communicate semantic data about the object (or content) described at this URI. So, meta-data that lives in the <head>
can be thought of as scoped (to abuse a term) to the page level. I would like to know how we can go about scoping meta-data at the level of parts of the page (so in the examples above, I would like to scope meta information at the level of the DOM node that contains them). The following is not valid mark-up (and will be penalised by search engines, for obvious reasons), but illustrates what I mean:
<html>
<head>
<link rel="canonical" href="/canonical/representation/of/this/page.html" />
</head>
<body>
<div id="item1">
<a rel="canonical" href="/canonical/representation/of/item1.html" />
<p>Some local description of item2</p>
</div>
<div id="item2">
<a rel="canonical" href="/canonical/representation/of/item2.html" />
<p>Some local description of item2</p>
</div>
</body>
</html>
Then at the address /canonical/representation/of/item1.html
we might find some semantic data (for example, Open Graph data):
<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:title" content="Some title" />
<meta property="og:type" content="music.song" />
<meta property="og:url" content="/canonical/representation/of/item1.html" />
</head>
<body>
<!-- User-facing content of the page -->
</body>
</html>
The reason this relationship needs a rel=...
marker is that we want to flag it as one that holds relevant semantic data about a specific part of the page (rather than the other links in the page, which might point anywhere), and should be followed by programs wanting to discover such data (which can then be known to relate to only the part of the page "scoped" by the particular DOM node in which the link lies).
It turns out that this has been done, using Microdata. It's not got the same sort of attention as <canvas>
, native video, and friends, but it's a part of the HTML5 spec (here), and is even meant to have a JavaScript API (although Opera is the only browser that implements it so far - no surprises there).
Better yet, it turns out folks like Google, Bing, and Yahoo! all care about this stuff too, and created schema.org to document it (as well as providing a whole list of ready-made data types).