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.
Comments
I’m a fond believer of using link to designate RSS feeds and favicons.
Thank you for reminding us that the link tag isn’t just for the obvious. Time to go researching methinks.
I especially like next, prev and start of the link element. I just hope more user agents implement this information in future releases so more developers will actually use it!
I wrote something similar to this article
Hmm, it didn’t like my anchor ref: http://www.punkchip.com/2006/07/metadata-semantic-info/
[…] Christopher har skrivit The Many Faces of the link Tag där han går igenom möjligheterna med link-taggen. Det vanligaste användningsområdena är […]