Links can be implemented in a variety of different ways and can take different forms. Here are some of the different types of links that you’ll find across the web.

<a> Links

<a> links are one of the most important tags for SEO, and the majority of internal and external domain linking is achieved by using this HTML tag. An <a> link creates a hyperlink with the a href attribute stating the link’s destination, as well as the anchor text which is the text shown for the clickable link. Here is an example of an <a> link:

<a href=”https://www.example.com”>Visit Example.com!</a>

The anchor text contained within the <a> tag is key for search engines to measure the relevance of the linked-from content to the destination page. When linking internally, you should use relevant and descriptive anchor texts to indicate to search engines the topic the source page is targeting.

Links with commercial anchor text from external websites is one of the core ways that some search engines detect manipulation of links, and this may negatively impact a website or cause penalisation.

Image Links

Search engines use the text within the alt and title tag to understand the context and relevance of the image being displayed to the user. Here is an example of an image tag:

<img src=”examplelogo.jpg” alt=”Example logo of intersecting red squares” />

In order to use an image as a link, you need to embed the <img> tag within an <a> link. Here’s an example of how this would look:

<a href=”https://www.example.com”>
<img src=”examplelogo.jpg” alt=”Example logo of intersecting red squares” />
</a>

For further guidance on using images on your website, take a look at Google’s image publishing guide.

JavaScript Links

It is possible to use JavaScript links, however, they’re not always crawlable for search engines so the recommendation is to use HTML links on pages which are indexable. This will ensure search engines can easily crawl content on the page.

One way to create a crawlable link with JavaScript (assuming that a search engine is able to render the page) is:

<script>
var a = document.createElement(‘a’);
var linkText = document.createTextNode(“my title text”);
a.appendChild(linkText);
a.title = “my title text”;
a.href = “http://example.com”;
document.body.appendChild(a);
</script>

A non-crawlable JavaScript link would be a non-<a> link, for instance:

<span onclick=”document.location=’http://www.destination.com’;”>Link</span>

The main recommendations are to use standard HTML <a> links rather than onclick tags. HTML content should not be dependent on some sort of action or behaviour, especially considering the fact that Googlebot and other search engines can’t execute these actions required to read content the way that a user can. Onclick links are powered by JavaScript and although they can still be crawled, some search engines may not be able to parse them, meaning that they may be devalued in terms of link equity.

For full Javascript crawling recommendations, please see this JavaScript frameworks guide from Google.

Rel Links

The most common use of the “rel” link in SEO is the canonical tag. Here is an example:

<link rel=”canonical” href=”https://www.example.com”>

You can also serve the canonical tag within the HTTP header, for example:

HTTP/1.1 200 OK
Date: Fri, 21 July 2018 21:00:00 GMT
(…)
Link: <https://www.example.com>; rel=“canonical”

The canonical tag tells search engines which URL should be indexed and is a solution for content duplication. Duplicate pages can cause a number of issues when it comes to SEO, as PageRank can become diluted between numerous pages.

This can happen in a number of different instances in which you could implement canonicalisation, for example:

  • Parameters causing duplicate content e.g. https:www.example.com?uselessparameter=yes
  • Protocol e.g. HTTP versions of HTTPS pages
  • Index.php duplicate pages
  • Duplicate pages rendering on www. and non-www.

Another type of rel link which is commonly used in SEO is the hreflang tag which is used to serve alternative language versions of a page for international websites. Here is an example of an hreflang rel link:

<link rel=“alternate” href=“https://www.example.com” hreflang=“en-us” />

Nofollow Links

Nofollow links can be used to prevent search engines from accessing pages that are essentially a waste of time, which is helpful for improving a site’s crawl budget. Without the use of nofollow, search engine robots will try to follow all internal links on a site. Reducing the number of low-value pages robots need to crawl will increase the chance of higher value content being crawled more frequently.

Webmasters can use rel=”nofollow” to indicate to search engines crawlers that a particular link should not pass any equity to other pages, and should be disregarded from a discovery and equity perspective. Nofollow tags are a webmaster’s way of preventing robots from following links on a specific page or a specific links by using the code snippets provided below.

There are two ways of implementing nofollow links:

1. Page-level Nofollow Meta Tag – With a page-level nofollow tag, search engines will not attempt to crawl any links on the page, and will not pass any link authority to them

<meta name=”robots” content=”nofollow” />

Take a look at our guide to URL-level directives for more information on page-level tags such as nofollow.

2. Link-specific Nofollow Tag – On a link-level nofollow, search engines will not attempt to crawl the specific link and will not pass any link equity to it. Google does not redistribute the PageRank meant for this link to other links on the page (i.e. that value is lost by using a nofollow). Other search engines may behave differently, however.

<a href=”example.php” rel=”nofollow”>sign in</a>

Types of Links that Should be Nofollowed

It won’t always be the case that you’ll want search engines to follow every single link on your site, whether that’s pointing internally or externally. Here are some examples where you may want to implement nofollow links:

  • Paid Links: Failing to prevent link equity being passed from one site to another via a paid advertisement can result in a negative ranking adjustment or search penalty. A nofollow tag should be used to ensure search engines are aware that the link to the external site is paid and should not pass link equity.
  • User-generated Content: Sites allowing users to post their own articles or content should ensure that nofollow tags are added to all content that has not been moderated, as well as the links included on those pages.
  • Comments: Most CMS systems automatically nofollow all links within the comment fields. However, as a precaution you should ensure that yours are nofollowed unless you are actively moderating and removing comments with low quality, spammy links quickly.
  • Sites You Don’t Want to Vouch For: Sometimes you may need to link to another site as a relevant resource, but you may not want to actively vouch for that site when it comes to spreading link equity. In this instance, you could use a nofollow link.

Types of Pages that Should be Nofollowed

Not all pages are valuable enough to warrant being crawled by search engines, but they may still need to exist for your users. Here are some of the types of pages that typically have nofollow links directed at them:

  • Sign in pages
  • Registration pages
  • Forms which search engines can’t get past
  • Terms and conditions pages

Nofollow can be useful in these situations, however, it doesn’t always hurt for these types of pages to be crawled by Google, as Matt Cutts explained.

Bear in mind that ensuring the site isn’t linking to poor quality content and focusing on having great UX and site architecture should be the priority. So the use of nofollow should be limited. Here’s what Google has to say on the matter:

“A solid information architecture — intuitive navigation, user- and search-engine-friendly URLs, and so on — is likely to be a far more productive use of resources than focusing on crawl prioritization via nofollowed links.”

Next: Handling Broken & Redirected Links