Chapter 3. Defining Links: rel and rev
Link Relationships
Another set of microformats that are extremely easy to understand and implement are those used to define link relationships.
What are link relationships? First, let’s consider links. There are two types: hyperlinks and links to external resources. Hyperlinks point to any resource on the web such as another HTML page, an image, an audio file, and so on, and they are clickable in the browser, allowing the user to navigate to the referenced resource.
The second type of links are those to external resources that a web page references, frequently appearing in the <head>. Both utilize the href attribute to indicate the destination resource, but each has its own syntax:
A basic hyperlink uses the <a> element:
<a href="http://www.ablognotlimited.com/">A Blog Not
Limited</a>
And a basic external resource link uses <link />:
<link href="/styles/global.css" rel="stylesheet" />
You will note that in the <link /> example, there is a rel="stylesheet" attribute-value pair. This indicates the relationship—a style sheet—of the destination resource (global.css) to the page on which it is referenced. And I’m sure this example is one with which you’re familiar.
So, in essence, link relationships are a way for you to indicate the type of resource an href references.
Microformats take link relationships a step further. They let you assign semantic values to hyperlinks in order to indicate the relationship of the destination href to the current web page (via rel), as well as indicate whether or not you endorse the destination href (via rev).
rel
The rel attribute is used as part of several elemental microformats. When applied to a hyperlink (<a>), rel specifies the relationship of the linked resource (href value) to the page on which the link appears.
Another thing to keep in mind about rel: you can assign multiple values.
So, let’s dive in.
Formal specifications
As I mentioned in Chapter 1, there are formal specifications and drafts. I’m going to cover all of the rel microformats in this chapter. Fasten your seatbelts!
rel-license
You use the rel-license microformat to indicate the link to a web page’s license, such as a Creative Commons license.
On my blog, I copyright my content with Creative Commons. As such, I provide a link to that license:
<a href="http://creativecommons.org/licenses/by-nc-nd/3.0/"
rel="license">copyright</a>
And to give that link more semantic value, I indicate the link relationship with rel="license".
Profile
Of course, because I’m using a microformat, I want to be sure to include the necessary profile in my document <head>:
<head profile="http://microformats.org/profile/rel-license">
And that’s all there is to it.
Benefits
For you folks who need a greater reason than semantic value, there are a handful of benefits rel-license offers, thanks to some nifty web tools.
The Tails Export plug-in for Mozilla Firefox automatically recognizes links assigned rel-license and lets users go directly to the link destination and view the HTML source of the link (Figure 3.1).
Figure 3.1 View of the Tails Export identification of rel-license
There are also major search engines that have created specialized searches that filter content based on the availability of a license: Yahoo’s Creative Commons Search (Figure 3.2) and Google’s Usage Rights option in Advanced Search (Figure 3.3).
Figure 3.2 Yahoo’s Creative Commons Search
Figure 3.3 Google’s Usage Rights options in its Advanced Search
And by using rel-license, you are keeping good company: Creative Commons uses rel-license in its generated markup (Figure 3.4):
Figure 3.4 Generated markup from Creative Commons for license links
rel-tag
Another rel-based microformat is rel-tag, which is used on hyperlinks that indicate what a given web page—or part of that page—is about. This is commonly known as tagging and is widely used on blogs, where authors assign tags to their blog posts. I use it myself:
<a href="http://www.ablognotlimited.com/articles/tag/
microformats/" rel="tag">microformats</a>
And where I include tag links, I always specify rel="tag" in the <a>. I even assign rel="tag" to my blog’s category links, since they, too, describe what my pages are about.
Other than specifying the rel value, the only other requirement of rel-tag is that the destination href must have the actual tag content as the final segment of the logical URL.
http://www.ablognotlimited.com/articles/tag/microformats/
This is known as the tag space. And any web page that utilizes a logical URL can be used as a tag space.
Profile
But let’s not forget the profile:
<head profile="http://microformats.org/profile/rel-tag">
Benefits
Of course there are benefits to using rel-tag (other than semantics).
Do you use Firefox? Then get the Operator plug-in. It recognizes rel-tag links on web pages and provides searches across other websites (such as Flickr, Amazon, Technorati, YouTube) based on the tag (Figure 3.5):
Figure 3.5 The Operator plug-in for Mozilla Firefox recognizes rel-tag and offers tag-specific searches of popular websites.
And Technorati Tags (http://technorati.com/tag) indexes rel-tags to provide tag-specific searches of content across the web.
There are dozens of rel-tag implementations in the wild. Here are just a few:
• Huffduffer, the audio podcasting service, uses rel-tag on all of its tag links, making it easier for users to find other similarly tagged content on the site.
• Opera, the browser developer, uses rel-tag for tag links on all My Opera blog entries, as well as on its own Dev Opera articles.
• Google, too, assigns rel-tag to its blog-post tag links.
So, join the cool kids. Add rel-tag to your tag links.
rel-nofollow
The last of the rel-based formal specifications is rel-nofollow, which is used to instruct spiders (like search engines) not to follow a link. Not follow a link? Yep.
Before I explain further, you should understand that search engines typically give higher page ranks to pages that have lots of links to them. The search assumption is that if you link to a page, you are indicating it has value.
But what if you have a link on your site that is intended to give your users a destination for more information, yet you don’t care to offer that link any additional weight or a higher rank in search engines? An example of this might be links in comments posted to your blog, particularly those from spammers.
If you don’t want to promote those links in the eyes of search engines, you just add rel="nofollow" to the <a>s:
<a href="http://www.commenter.com/" rel="nofollow">Commenter
</a>
Profile
Just like the other rel microformats I’ve covered so far, rel-nofollow has a profile:
<head profile="http://microformats.org/profile/rel-nofollow">
Benefits countered by issues
I’ve already explained the primary benefit of rel-nofollow: you prevent raising the search engine rank of a given link. And that’s about it.
While this is a powerful benefit (at least in my opinion), there are a number of folks who do not support this approach—for a variety of reasons:
• Some argue that rel values should strictly indicate the relationship of a link destination to its source. From that perspective, rel-nofollow indicates a behavior, which is contrary to the link relationship concept inherent in link-based microformats.
• Others suggest the value name is inaccurate. Specifically, rel-nofollow doesn’t restrict search engines from following a link (as a robots.txt would), but instead tells spiders not to raise the rank of the link.
• Still others are concerned about rampant, indiscriminate use of rel-nofollow on links to legitimate sites, which could adversely affect their search-engine ranking.
Nonetheless, rel-nofollow is widely used.
• Many social networks apply rel="nofollow" to links on users’ profiles, including Twitter, Flickr, and Facebook.
• Wikipedia uses rel-nofollow on all of its external links.
• And even Google has advised rel-nofollow be applied to links in paid advertisements, links to content that the site owner doesn’t trust, and links to password-protected sections of sites.
As for what you should do, I would encourage you to consider your links carefully and then decide if rel-nofollow is appropriate.
If you choose not to use this particular microformat, I promise I won’t kick you out of the club—you know, the one we’re going to get T-shirts for.
Drafts
Now it’s time to head into the draft link-based microformats. Remember, drafts are those microformats that have yet to be formally approved, so they are in a state of some (likely minimal) flux.
rel-home
Wanna guess what rel-home does? You got it—rel-home indicates that the destination of the specified link is the site’s home page.
For the most part, rel-home is used for site navigation, but it also provides some indication of the broader site structure to individual pages. Can I get a “Hell, yeah!” for meaning and semantics?
Unlike the rel microformats I’ve already covered, which are only used with <a>s, rel-home can be used two ways: on hyperlinks and on links to external resources.
On my blog, I use it both ways. In the <head> of my site documents I include this:
<link href="http://www.ablognotlimited.com/" title="Home
page" rel="home" />
This particular implementation was developed so that browsers could easily detect a site’s home page and provide users a hotkey or shortcut to navigate to the site’s home page. Unfortunately, browser support pretty much sucks. At present, only Opera supports this (Figure 3.6).
Figure 3.6 Opera’s Navigation toolbar recognizes rel-home in <link />s.
The other implementation for rel-home is just like that of the other rel-based microformats. For links to a site’s home page, you specify rel="home" on the <a>:
<a href="http://www.ablognotlimited.com" rel="home">A Blog
Not Limited</a>
Profile
Note that rel-home does not have a profile URI. So you can skip referencing a profile in your <head> when using rel-home.
But in case you are interested, you’ll find the XMDP for rel-home on the Microformats Wiki: http://microformats.org/wiki/rel-home.
Benefits
While I mentioned that the use of rel="home" in a <link /> element aids in navigation (at least in Opera), it also provides broader accessibility. Several text-only browsers, like Links and Lynx, display rel-home metadata as a navigation link at the top of pages.
Unfortunately, that’s about it in terms of the benefits. However, if more browsers begin supporting rel-home, you can imagine how useful it would be for navigation and accessibility.
And I, myself, have no problem adding a few semantic tidbits to my pages—especially if they can be utilized in the future.
rel-directory
Next up, rel-directory. This draft microformat indicates that the href destination of a link is to a directory that contains (or should contain) a reference to the page containing the link.
Now you may ask, what is considered a directory? Well, the Open Directory Project is a great example. It is “the largest, most comprehensive human-edited directory of the web.” And it has spawned several more focused directories:
• ChefMoz for restaurants
• MusicMoz for music
• Open Site, an online encyclopedia
So let’s say you’ve written an article about adoption, which would be a good fit for Open Directory Project in the Home section, under Family and then Adoption.
All you need to do is add a link in your adoption article page that directs to the appropriate Open Directory Project path, and then assign rel="directory":
<a href="http://www.dmoz.org/Home/Family/Adoption/"
rel="directory">Adoption</a>
Profile
Like rel-home, rel-directory does not have a profile URI. The rel-directory XMDP is, however, included on the Microformats Wiki: http://microformats.org/wiki/rel-directory.
Still, no need to reference any profile when using rel-directory.
Benefits
The rel-directory draft is designed to build distributed, open directories. So by using rel-directory on links that you wish to be included in a directory, you are, theoretically, “populating” the directory remotely. You don’t have to submit your page to the directory itself. And meanwhile you, as the content owner, can control the place(s) your site is found.
Technorati’s Blog Directory at http://technorati.com/blogs/directory/automatically adds blogs it discovers that use rel-directory.
Imagine you maintain your company’s intranet, which has a directory listing with links to employee profiles. If this employee directory is anything like the one I work with, it is manually entered data from Human Resources that has to be imported on a (hopefully) regular basis. Which means it is constantly out-of-date and a major pain in the ass to maintain.
But what if those employee-profile pages featured links to the directory’s alphabetical listing? And what if those links were assigned rel="directory"?
You could easily create a web application (remember the machines) that parses the information and extracts the links, dynamically creating a directory. And not just any directory. A directory that links to profiles that each employee updates themselves. Less work for Human Resources. More timely information. Easier maintenance.
I’m sold.
rel-enclosure
You use the rel-enclosure draft microformat to indicate links to files (video, audio, and so on) that can be downloaded and cached. An example might be if you provided a link to a video recording on your site that was intended to be downloaded, rather than streamed online.
For such links, you simply add rel="enclosure" to the <a>:
<a href="http://yoursite.com/files/video.mov"
rel="enclosure">download the video</a>
Profile
Just like the other rel-based drafts, rel-enclosure doesn’t have a profile URI, but the rel-directory XMDP is included on the Microformats Wiki: http://microformats.org/wiki/rel-enclosure.
Benefits
Other than a bit of semantic meaning for your file links, rel-enclosure has some benefit for feeds. If you have a blog that generates a feed and you want to include a link to a file, you should use rel-enclosure on that link.
Why? Because best practices for feed syndication suggest that adding rel="enclosure" to your file links can help services like FeedBurner identify the links and convert them to enclosures in your feed.
What are enclosures? Basically, they are the files in your feed that readers, such as Google Reader, convert into playable files. Enclosures are essential for things like podcasting.
rel-payment
The last rel-based draft microformat is rel-payment, and you use it to indicate link destinations that show or give support (not necessarily financial, despite the name) to the source page.
This might be a link to your organization’s fund-raising page that directs users on how to make donations. It could be a link on an online retail site that points to a page where a given product can be purchased. It could even be an affiliate link, such as Amazon’s affiliate program.
However, rel-payment is not used on links that actually facilitate a purchase or payment. It is only appropriate for destinations that provide information about or a means to offer support.
So, for those types of links, you add rel="payment":
<a href="http://nonprofit.org/fundraising/" rel="payment">
learn about our fundraising program</a>
Profile
Again, no profile for rel-payment. The rel-payment XMDP is on the Microformats Wiki: http://microformats.org/wiki/rel-payment.
Benefits
One of the intended benefits of this draft microformat is to allow content aggregators, like feed readers, to easily identify these links so they can be, perhaps, presented differently—such as with a special “donate” or “purchase” indicator.
But that is an intended benefit. As of yet, this is not a reality.
rev
The last link-based microformat utilizes a hyperlink attribute I’ve not yet covered: rev.
You use the rev attribute to indicate a reverse relationship with a link destination. So, unlike rel (which indicates the relationship of the link destination to the source page), rev indicates the relationship of the source page to the link destination.
VoteLinks
VoteLinks is a formal link-based microformat, and it uses the rev attribute on links to href destinations for which you wish to indicate support, lack of support, or neutrality.
For these sorts of links, you add the rev attribute to your <a> with one of the following values:
• vote-for, to indicate that you support the link destination
• vote-against, to indicate that you do not support the link destination
• vote-abstain to indicate you don’t have an opinion about the link destination
Profile
VoteLinks has its own profile:
<head profile="http://microformats.org/profile/vote-links">
Benefits
As a link-relationship microformat, VoteLinks lets you specify via hyperlinks whether or not you approve of a link destination. By themselves, without any semantics, search engines automatically treat hyperlinks to other sites as endorsements of those sites. VoteLinks was developed so that content authors could indicate if they did or didn’t endorse a site via those hyperlinks.
So, if you include a hyperlink to a product you don’t care for (and maybe you aren’t a fan of rel-nofollow), you could simply add rev="vote-against".
By default, links that lack the VoteLinks microformat are assumed to have a rev="vote-for" or rev="vote-abstain" value, depending on the machine that is interpreting them.
Another benefit of VoteLinks is in the creation of distributed voting and reputation systems, such as Folksr. However, I should mention that you have to submit your site to Folksr for it to index your VoteLinks; it doesn’t seek out websites.
The beauty of distributed voting systems, as opposed to polling and traditional voting, is that content authors retain control of their votes because they control the data.
Combining Your Elementals
I talked about combining microformats in Chapter 1, and I’m going to talk about it again in relation to the link-based microformats.
Where it makes contextual sense, you should definitely combine these elemental microformats.
rel-nofollow and VoteLinks
If you are using rel-nofollow, for example, you may also want to indicate a lack of support for that link, not just deter spiders from giving it additional weight. Sounds like the perfect use of rel-nofollow and VoteLinks, no?
Let’s take an example from my blog. I posted an article raving about a new vacuum cleaner I had purchased. But in the discussion I mention the vacuum I had previously owned (and hated). Yet, in the spirit of giving my users a wealth of information, I provided a link to the hated brand:
<a href="http://www.vacuumthatsucksbutnotinagoodway.com"
rel="nofollow" rev="vote-against">Vacuum</a>
By applying both microformats, I’m telling the spiders to ignore my link when determining page rank for the site, and I’m telling vote counters that I vote against that particular vacuum.
rel-tag and rel-directory
Another good combination of rel-based microformats is rel-tag and rel-directory. As I mentioned in my explanation of rel-directory, you have a link with an href value of a directory URL.
In the case of the Open Directory Project, these URLs are logical and, as such, make perfect tag spaces. Which means you can use both rel values together:
<a href="http://www.dmoz.org/Home/Family/Adoption/"
rel="directory tag">Adoption</a>
By combining these two, you indicate that the link is both a tag and a directory listing for the page.
Not Enough Benefit?
Now that we are nearing the end of this chapter, you may be asking yourself how implementing these link-based microformats benefits you—particularly the drafts, which have comparatively fewer tools to leverage them and implementations to reference.
I already talked extensively about the benefits of semantics and structured data in Chapter 1, so I won’t repeat myself (for now). What I will mention again, though, is that just because all of the technology isn’t yet in place to leverage microformats to their fullest doesn’t mean the technology won’t ever be there.
I believe it will. I believe that broader use of microformats, including drafts, will encourage more developers to create tools that take advantage of the machine-readable metadata. And I want to be ready when those tools become available.
This notion of early adoption is nothing new in the web industry. Ever heard of CSS 3 and HTML5?
Not to mention, these elemental microformats are ridiculously easy to implement.
And if you are a developer, I hope that you can see the tremendous value of working with standardized, structured data. It makes it easier to develop things like aggregation services, which, in turn, make it easier for users to access information.
That’s All She Wrote
Well, not quite, since I’m still writing, but that’s all I’ve got for microformats that describe link relationships. Once again, I feel rather confident in saying that was easy.
Next on the list, we’ll be taking rel to a new level with XFN, which describes human social relationships via links.