Uses of LINK tag

Question

The <link> tag appears to have many uses aside from stylesheets. For example the W3 suggest using it for previous/next/index pages.

I know that Opera also has a Navigation toolbar that will show links when present, including Home, Index, Contents, Previous, Next, Copyright, Author and more. (I doubt it is actually used by more than a handful of people.)

Are there any other attributes that are useful, or other uses for the ones above? What about SEO benefit?

Answer 1

As far as SEO benefits nothing stands out as being truly beneficial other then canonical. The only other SEO possible benefits I can see from using the <link> tag is when using start/next/previous to indicate pages related to the current one, like in a multi-page article, to help the search engines understand the relationship between those pages. Others like glossary, index, section, and appendix look like they may have semantic meaning that can have SEO effects but they seem to be very obscure and we can only speculate if they do indeed have any value.

The only uses of link that seems to have any real world practical uses that I have seen are

• favicon
• start/next/previous
• stylesheets (duh)
• alternative (usually for style sheets but can be used for other doc types like PDFs)
• canonical

update 2011-12-06: Google now uses <link> for specifying a language and location

Answer 2

Also be aware that not all user-agents are traditional web-browsers. I believe many screen-readers and other accessible user-agents can use the "next", "home" and "prev" links for navigation. See Dive Into Accessibility - Day 9: Providing additional navigation aids. But for pure SEO then I think "canonical" is the only really important one.

Answer 3

This question reminds me of something completely awesome I never knew until I got into Google Pagespeed testing, specifically how Steve Souders attacks the loading asynchronous javascript problem.

Specifically, the <SCRIPT> tag works much like the <LINK> tag. It is loading a resource. So in a way, calling an external .js file through <script src=...> is practically the same thing in a way.

The method is called menu-degrading scripts. In other words, once the resource is loaded, the inline portion of the tag gets executed. It requires a snippit of code to be placed in the source file, but it causes the inline source to be executed after it is loaded. (through some event handlers and eval( curScript.innerHTML );)

So if you have an external .js file to load, but want it to do something after it is loaded, you can do this:

<script src="menu-degrading.js" type="text/javascript">
  // something in javascript you want to do...
</script>

The gem about this, to me, is the fact that almost every external resource or <LINK> ultimately can work like this if done properly. When I first ran across this, I would have never thought to try both externally loading and in-lining a resource.

<link rel="stylesheet" type="text/css" href={somefile.css} >
/* default inline resource if not found */
.body { background:#000000;color:FFFFFF; }
/* etc... minimal defaults */
</link>

I haven't tried this yet, but inline code might work with 404 errors to create default resources when not found. If you have time to test this, let me know!