Do you usually use Link Relations (rel attributes)?

My goal is to move towards a more standards-based, affordable, and semantically correct approach to web development. At the office, I do not expect huge changes to occur here, but I am trying to lay some basic foundations for further progress along the way.

Part of this process is the introduction of the rel attribute in links and other similar content. It spreads further than the familiar old

 <link href="mystyles.css" type="text/css" rel="stylesheet" /> 

which many developers may abandon without even thinking about it. I am curious to find out if anyone is using rel regularly in other ways. For example, returning the main navigation link to the home page using rel="start" .

If you implemented Link Relations in your own project, what prompted you to accept them and what advantages did you try to realize?

If you looked at Link Relations, but decided not to use them, what was the basis for your decision?

+7
attributes semantic-markup
source share
4 answers

I often use rel (and rev ) attributes with a wide range of values ​​for both <link/> and <a/> elements.

I have outlined some of the most common (and more useful) types of relationships below. A more complete list of rel values ​​is supported on wiki microformats .

HTML 4

There are several standard link types defined by the HTML 4 specification.

  • alternate - used when providing a link to an alternative version of an HTML document, for example, in another language or in a different format. This is most often used when connecting to a syndicated (RSS or Atom) version of a website.
  • next and previous - used to indicate the next and previous documents in a series of documents. If rel="next" used in the <link/> element, then some browsers will preload the contents of the linked document (see prefetching the MDC FAQ links ).

Xfn

XFN (XHTML Friends Network) is a microformat used to describe the relationships between people who are represented by web pages. It also allows the page to specify other pages that represent the same person (for example, my blog, my Twitter profile and my profile). He does all this by defining a set of rel values:

  • me - used to indicate that the linking page and the linked page represent the same user. This is widely used by many social sites (including stack overflows) when linking to a user profile on a user's own website.
  • contact , aquantance and friend - indicates that you know the person you are aquantance with and how well you know them.
  • met - indicates that you have met the person you are contacting.
  • co-worker and colleague - indicate that you are either working or working in the same field as the person you are contacting.
  • co-resident and neighbor - indicate that you live with or next to the person you are contacting.
  • child , parent , sibling , spouse and kin - indicate that you are contacting a member of your family.
  • muse , crush , date and sweetheart - indicate the romance of the relationship with the person you are contacting.

These relationships can be analyzed and used to determine user information, for example, who their friends are or what other online profiles they have. For more information about the current and potential future applications, the following pages may be of interest:

Other

There are various types of links defined by various specifications:

  • nofollow - used to indicate that search engines should not follow the link when crawling a web page. See the rel-nofollow specification .
  • canonical . Used to indicate that another URL is a canonical version of the current page and therefore should be supported by search engines. It is also used with the rev attribute to indicate an alternate, usually shorter URL for the current page (i.e. rev="canonical" means that the current URL is the canonical version of the linked URL). More information and tools can be found in Simon Willison's blog entry on rev = canonical .
  • tag - used to indicate that the linked page is a tag (for example, a keyword) that describes the linking page. See the rel-tag rel-license specification.
+10
source share

I use rel = "nofollow" for custom links in blog comments. Google will not follow the link, and it won’t get a higher page rank due to the link.

+3
source share

One thing I used for them is the way to assign external links to open in a new window. This functionality is not possible with strict XHTML since the target attribute is no longer allowed in <a> tags. But with some javascript and rel attribute, you can do a pretty decent job, as described in this article: Links of a new window in the standard - The corresponding world .

+2
source share

As Chad said , I use rel="external" to refer to the links I would like to open in a new window (using some jQuery to make this possible).

I also use rel="nofollow" when I want bots that follow the rules (like the Google bot) to not index my link.

Useful on public websites to automatically add nofollow, otherwise it may be tempting for spammers to make a link farm from your blog comments, for example.

0
source share

All Articles