.png)
Ultimate Guide to Link Types for Hyperlinks
Link types help describe the relationship between two or more web pages. They can also express the reason why particular hyperlinks are present in the web page.
Defining link types is good for SEO because search engines can use this data to understand your content better.
Other web services such as social media platforms, assistive technologies, and language-translating tools stand to benefit whenever you specify appropriate link types in your HTML markup.
How to Set a Link Type
Use the
rel attribute to set link types.
Below is an example of setting the
nofollow link type on an HTML element:<a rel="nofollow" href="http://amzn.to/1JunkLD">Buy me a Macbook Pro</a>Setting Multiple Link Types
You can set more than one link type. Just use spaces to separate the link types.
If you’re linking to a web page that has the link types of
nofollow andnoreferrer, this is how you’d do it:<a rel="nofollow noreferrer" href="http://amzn.to/1JunkLD">Buy me a Macbook Pro</a>The Link Types for Hyperlinks
In this guide, we’ll only cover the link types for hyperlinks.
There are 12 link types that can be set on hyperlinks.
What follows is a table of possible link types, and what each link type should point to.
| Link Type | Links to… |
|---|---|
alternate | an alternative way of viewing the web page. |
author | more information about the author of the web page (or parts of the web page). |
bookmark | a permalink. |
help | content that helps the user with a specific part of the web page. |
license | the copyright license of the main content within the web page. |
nofollow | a web page you don’t endorse. Or a web page you’ve linked to primarily for profit. |
noreferrer | a web page that shouldn’t be told the click came from your web page. |
prefetch | a resource the user will likely need. The browser should fetch and cache the resource even before the user asks for it. |
search | a search interface for the web page. |
tag | the keyword or category of the web page. |
next | the next page in a series of web pages. |
prev | the previous page in a series of web pages. |
Let’s go over each link type in greater detail. I’ll also show you use-cases for each link type.
alternate Link Type
The
alternate link type points to other ways of viewing the web page.Linking to Other File Formats
You might have the web page in another format. Like a PDF. Or maybe you have a printer-friendly version of the page.
Using the
alternate link type tells browsers: Hey, this is the same content, just in a different format. Using the type attribute on the link would be helpful in this instance too.
In the following code block, we’re stating that both hyperlinks go to an alternative representation of the web page. The first link goes to a PDF version of the web page. The second link goes to a downloadable ZIP file that contains the PDF.
<!-- The content in PDF format -->
<a rel="alternate" type="application/pdf" href="this-page.pdf">PDF version</a>
<!-- Download the web page -->
<a rel="alternate" type="application/zip" href="this-page.zip" download>Download this web page</a>Linking to Language Translations
You can use the
alternate link type whenever you’re referencing a language translation of the current page.
For greater meaning, you can use the
hreflang attribute to define the language used in the referenced web page.<!-- Read the content in Spanish -->
<a rel="alternate" hreflang="es" href="spanish-version.html">Read this page in Spanish</a>
<!-- Read the content in Tagalog -->
<a rel="alternate" hreflang="tl" href="tagalog-version.html">Read this page in Tagalog</a>author Link Type
The
author link type informs the browser the link goes to information about an author.Linking to the Author of the Entire Web Page
<html>
<body>
<h1>My Web Page</h1>
<p>This web page was created by me.</p>
<a rel="author" href="my-author-bio.html">About Me</a>
</body>
</html>Linking to the Author of an Article
A lot of times, only parts of a web page is by the author. In this case, the
authorlink type should refer to the author who wrote the contents of the parent articleelement.
In news sites, the main content of the web page is written by journalists. But the other stuff in the web page might be authored by someone else. The comments on the web page, for example, are by the readers of the article. This situation can be marked up as such:
<html>
<body>
<article>
<!-- This section was authored by Someone Else -->
<h1>An Awesome Guest Post</h1>
<p>This article is by Someone Else.</p>
<a rel="author" href="someone-else.html">About Someone Else</a>
</article>
<!-- Comments Section -->
<h1>Comments</h1>
<article>
<a rel="author" href="commenter.html">A Commenter</a>
<p>This comment was written by A Commenter.</p>
</article>
</body>
</html>bookmark Link Type
The
bookmark link type tells browsers the hyperlink goes to a permalink.
This link type is useful in the home page of blogs and news sites.
Below we have excerpts of two blog posts that link to permalinks.
<!-- Blog Post #1 -->
<div>
<h1>A Blog Post</h1>
<p>A short description of this this blog post.</p>
<a rel="bookmark" href="blog-post.html">Read this</a>
</div>
<!-- Blog Post #2 -->
<div>
<h1>Another Blog Post</h1>
<p>This is a description of this other blog post.</p>
<a rel="bookmark" href="another-blog-post.html">Read this</a>
</div>help Link Type
The
help link type goes to content that provides helpful information.
When using the
help link type, the referenced content should be context-specific. In other words, the link should point to specific help information about the parent HTML element that contains the hyperlink.
Below is an example of using the
help link type on a commenting web form. In this case, the help link type alludes to a web page that provides helpful information about the the parent form element of the hyperlink (i.e. The <form id="comment-form"> HTML element).<form id="comment-form">
<label for="your-comment">Your Comment:</label>
<textarea id="your-comment"></textarea>
<input type="submit" value="Submit your comment" />
See our <a rel="help" href="comments.html">Commenting Help</a> page if you're having trouble with this web form.
</form>license Link Type
The
license link type can be used on links going to the licensing terms of the main content of the web page.
This link type should be used within
<main> tags so you can define which parts of the web page are covered by the license. The license will only apply to the contents of the parent main element.
The markup below represents three images. However, only one of them is licensed under the Creative Commons Public Domain Dedication (CC0).
<h1>Use this photo for free!</h1>
<main>
<!-- This photo is in the public domain -->
<img src="free-photo.jpg" />
<p>License: <a rel="license" href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a></p>
</main>
<aside>
<p>Check out these other photos:</p>
<!-- These two photos aren't licensed -->
<img src="my-photo-1.jpg" />
<img src="my-photo-2.jpg" />
</aside>nofollow Link Type
nofollow is for specifying that the link on your page is something you don’t endorse or that it’s on the page because you were rewarded to put it there.User-generated Links
One place to use the
nofollow link type is on user-generated links. Links in wiki entries, the comments of a blog post, or the answers in Q&A sites like StackOverflow are all candidates for this link type.
These links were placed on the web page by someone else. As the site owner, you can’t always support or endorse the links your users are sharing on your website.
In this case, the
nofollow link type tells search engines the site owner may not have reviewed the link and/or the site owner does not endorse the link.<h1>Comments</h1>
<article>
<h2 class="commenter">Comment by Jane Spammer</h2>
<p>I am luve ur blog post on the "Angular Boosttrap preprocessor".Plz see this <a rel="nofollow" href="http://loseweight.now.ru">weight loss</a> pill.</p>
</article>Paid Links
Another use of the
nofollow link type is for paid links. Usually these are advertisements. If the site owner has placed a link on a web page primarily because of a commercial/for-profit relationship with the linked page, then defining the link as a nofollow is the appropriate thing to do.<a rel="nofollow" href="http://paid.example.co">A paid link</a>noreferrer Link Type
By design, the
noreferrer link type is used on hyperlinks that, when clicked on, doesn’t tell the destination web page the user came from your web page. I’m not sure how many browsers actually implement the specs of this link type right now though.<a rel="noreferrer" href="http://faceup.com">Don't track this link</a>
When you click on a link with a
noreferrer link type, the browser shouldn’t include the Referer HTTP header, which can be used by site owners to track where users came from.prefetch Link Type
The
prefetch link type should be used when you’re pointing to external resources the user will likely need. It tells browsers to get it and cache it even before the user clicks on the link.
For instance, you might have a gallery of images. When the user clicks on an image, you’ll display a larger version of the image.
For a faster experience, you can instruct the browser to cache the larger version of the image so that it’s ready when the user wants it.
<a rel="prefetch" href="large.jpg" title="Go to a larger version of the photo."><img src="small.jpg" alt="Small preview of the photo." /></a>search Link Type
The
search link type points to a search interface for the web page. This search interface might be an in-page search form, or another web page that can search the current page (and related pages).
Here’s an example of linking to a search web form in the page.
<!-- link to the in-page search form -->
<a rel="search" href="#search">Search this page</a>
...
<!-- search form -->
<form id="search">
<label for="search-term">Enter your search term</label>
<input id="search-term" type="search" />
</form>tag Link Type
The
tag link type could be used to point to the category or keyword that matches the content of the web page.
For example, this guide you’re reading now is categorized in the HTML category. To let browsers know that, I could do this:
<p>This guide is under the <a rel="tag" href="http://sixrevisions.com/category/html">HTML</a> category.</p>
Now, when a search engine crawls this page and is looking for similar articles, it’ll know to hit up the HTML category page.
next and prev Link Types
The
next link type points to the next web page in a series of web pages.
The
prev link type goes to the previous page of the series.
Let’s say we have a four-part series of articles. We’re on the second article in the series. At the end of the articles, we have a list of all links that point to other members of the series. We could mark this up as:
<h1>This is a four-part series of articles</h1>
<ol>
<li><a rel="prev" href="1st.html">Part 1</a></li>
<!-- we're here -->
<li><strong>Part 2</strong> (this page)</li>
<li><a rel="next" href="3rd.html">Part 3</a></li>
<li><a href="4th.html">Part 4</a></li>
</ol>Other Things to Know
A minor thing to keep in mind is that the link type keywords are not case-sensitive. This point isn’t anything huge, just because the common convention is to stick to all-lowercase for HTML markup. But, hey, it’s your markup so you should do whatever works for you.
So, in the following example, all hyperlinks are valid:
<!-- all-lowercase -->
<a rel="nofollow" href="http://amzn.to/1JunkLD">Buy me a Macbook Pro</a>
<!-- all-caps -->
<a rel="NOFOLLOW" href="http://amzn.to/1JunkLD">Buy me a Macbook Pro</a>
<!-- camelCase -->
<a rel="noFollow" href="http://amzn.to/1JunkLD">Buy me a Macbook Pro</a>
Also, there are two other link types that weren’t covered here:
icon andstylesheet. They cannot be used on hyperlinks.
You can also use Microformats link types. These link types aren’t officially a part of W3C standards, but search engines and browsers support them.
This guide is based on HTML5 W3C Recommendation for link types.
0 comments :