The Many Faces of the link Tag

When I think of the link tag, the first thought that comes to mind is external stylesheets. After that I think of favicons and then finally RSS. Then I think about how, in my day to day work, I’m not taking full advantage of what the link tag can do.

How else can link be used?

The purpose of link is to define a relationship between the current document and another one. The three most common uses of link are probably what I listed, but maybe not in that order; stylesheets, RSS, and favicons. It makes perfect sense because essentially, you’re linking your document to another for various purposes. For example:

<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection" />

Chances are you have something very similar in the head of each and every document you’ve marked up in recent history. In that example, I’m telling browsers that the current document is linked to css/screen.css because it has a relavance of being the document stylesheet. The browser will apply this direction and present the reader with a styled document.

<link rel="alternate" type="application/rss+xml" title="Monday By Noon RSS Feed" href="/feed/" />

Along with CSS, link is used to designate favicons and the location of RSS feeds. Chances are you probably use it for that as well, but the link tag has the more general purpose of defining the relationship between two documents. This purpose can be taken advantage of in a variety of ways.

It is up to the author to decide which relevance a link may have, as you aren’t limited to a set of options to choose from. You can make up your own. A few examples of the more common choices include:

• Alternate
• Stylesheet
• Start
• Next
• Prev
• Contents
• Index
• Glossary
• Copyright
• Chapter
• Section
• Subsection
• Appendix
• Help
• Bookmark

You can read detailed descriptions of each within the W3C spec of link. As I look through that list of the most commonly used references to link, I realize that I can be using the tag in a much more effective manner. Other uses of the tag I’ve seen around the sites I visit most are to provide the correct location for pingbacks or designate links to sections of the site archive.

User agents use link as a feature

Browsers are able to take advantage of the link tag by including features within the application itself that make use of the relationships created with link. The most obvious example would probably be the inclusion of a favicon. When a favicon is designated, most browsers will use it to place in the address bar next to your URL to help you distinguish yourself. It will also be used near bookmarks and maybe in other ways depending on the browser.

Another excellent example of a browser taking advantage of link is Mozilla’s Firefox. Mozilla saw the value of RSS and decided to help expose its usefulness in a totally new way. When the browser was told that there was a feed associated with the current document, it would put a feed icon in the address bar, which was clickable by a reader should they want to use the feed.

There are other browsers that use link to add contextual menus within the browser itself to help a reader with site navigation. While these browser features aren’t often implemented, it’s the intended purpose.

The SEO advantages of link

link also brings with it some SEO benefits that may not be initially obvious. Some search engines will use your link to find other related documents that should be indexed as such because it will show that your document has more worth.

Not only can you advise search engines about related documents due to navigational structure, but also documents which have been translated into other languages. Telling search engines this information up front can be beneficial to the indexing of your site. While the link tag may be most useful for styling, RSS, or extensive document collections, using it in applicable ways can always help out.