Anchor Link Types

The importance of anchor text and the link types therein cannot be overstated. This post will go over the different types of anchor links, in both the text and the attribute relationship.

Example Link

Links are crafted by correctly forming the following HTML anchor tag:

<a href="https://websitejolt.com">Website Jolt</a>

Now let’s break it apart.

A

• The a refers to anchor.
• This anchor tag is necessary to create hyperlinks.

HREF

• The href refers to hypertext reference.
• This is the actual target link.
• Links can be relative (implicit) or absolute (explicit).
  • Relative links only show the name of the page or file. This assumes the page or file lies in the same folder as the page with the link. The folder can be renamed or files can be moved into different folders.
  • Absolute links show the full public path of a page or file. These are used more today due to content management systems.
• Besides websites, pages, and files, you can link to the following:
  • Directly to any element within a web page that has an id assigned. This is how jump links (one-page websites or a table of contents) are created.
  • Other resources using protocols other than HTTP.
  • Script actions.

Anchor Text

• The anchor text refers to the visible text of the anchor link.
• This is the clickable text that opens a hyperlink.
• The anchor text will always be the text in between the anchor tags.
• This piece is important, follow more in the next section.

More on Anchor Text

Anchor text is so important due to usability and on-page SEO that it needs its own section.

Branded

Anchor text that uses a brand name is considered branded anchor text. For example, if your domain name is example.com, your brand anchor text would be “example.”

Branded anchors are the safest type of anchor text there is if you have that branded domain. The exact match anchor text isn’t quite the same.

Content Box

Content boxes or columns can be clickable to open hyperlinks or jump links as well. Visually, this looks similar to a clickable image but uses CSS and text. Very useful for jump linking (with CSS IDs) a Table of Contents box or other stylish navigation. Hyperlinking content boxes to external resources also works out well.

Empty Anchor

This is an interesting strategy that we stumbled on. I’m not sure what to make of it other than big brands are trying to diversify their link profile. An example of this is <a>no-text</a>.

You can also do this through images by surrounding an image with an empty anchor tag.

Exact Match

Anchor text that is an exact match is it includes a keyword that reveals the exact page it’s being linked to. For example, a hosting link links to a page about hosting.

Generic

Generic anchor text uses nondescriptive text that doesn’t exactly reveal what the link is about. This is the anchor text type that gave us the glorious “Click here” inflated marketing shtick that we all know.

They are calls-to-action (CTAs) but we think more descriptive anchor text will do you better.

Images

The anchor text within images is pulled from the image’s alt attribute. If you leave this blank, you’ll get a “no-text” anchor mentioned in the empty anchor section.

Naked Link

Naked links are basically pasted links that were automatically converted by word processing software. An example is https://bitexpanse.com. Think of this as a raw URL that has been linked.

Partial Match

Anchor text that has some variation of the keyword that’s linked on the page. For example, content creation engine linking to a page about content creation.

Partial Match with Brand

This is a great way to help build a diverse link profile. For Example, you can have something like a Recommended Resources page that links to the tools and resources we recommend.

All you are doing is simply combining your brand with a partial match keyword.

Questions

We’ve seen many crazy definitions describing this type of query anchor text but what I’m referring to are variations of your keywords. This is the auto-suggest stuff from Google.

For example, if I’m targeting “anchor text,” we could use the following anchor texts:

• What is anchor text?
• How do I form anchor text?
• What else goes in an anchor link?

Anchor Text Wrap Up

According to Moz, SEO-friendly anchor text is:

• Succinct: little amount of text as possible.
• Target Relevance: be descriptive, and show users what’s in store for them.
• Low keyword Density: not overly keyword heavy, use variety and be topic specific.
• Not Generic: try to avoid text that could literally point to anything. Also, don’t use the same anchor text repeatedly on your website.

We recommend you read more on this topic at SEO best practices on Moz.

Other Important Anchor Tag Parameters

Target Attribute

You would want to use the target="_blank" attribute if you want to tell your visitor’s browser to open the link in a new blank tab or window.

This is typically seen as best practice for external links so you don’t send your visitors away from your website. Sure they can hit the back button to return to your website, but it’s best not to distract the people you are trying to help.

Example:

<a href="http://example.com" target="_blank">Example Text</a>

Target Attribute Options

• <frame>: opens the linked document in the named frame.
• target="_blank": new window.
• target="_top": topmost window.
• target="_self": same window.
• target="_parent": parent window.

Relationship Attribute

You would want to use the rel attribute when you want to describe the relationship between the source anchor and the destination anchor. The most common attribute is rel="nofollow."

Example:

<a href="http://example.com" target="_blank" rel="nofollow">Example Text</a>

Relationship Attribute Options

• rel="nofollow": use when linking to a website that you don’t want to lend your website’s reputation.
• rel="noreferrer": use when linking to a website that you don’t want to let the destination know who the referrer is.
• rel="alternate": use when you have more than one version of your website because it’s in multiple languages.
• rel="bookmark": use when wanting to identify a permanent URL for bookmarking.
• rel="help": use when you want to provide a help file.
• rel="license": use when linking to a creative commons license.
• rel="next": use when the current page is within a series of pages and you want to link to the next document in the series.
• rel="prev": use when the current page is within a series of pages and you want to link to the previous document in the series.

Download Attribute

You would want to use the download attribute if you want to identify a link that should initiate a download and the value assigned to this attribute is the name of the file.

Example:

<a href="http://example.com/file.pdf" download="Example_File">Example Text</a>

Language of Destination Link Attribute

This attribute is optional, but we would recommend doing it to provide a better browsing experience if you need to link to a website in a different language.

The language codes are in an ISO 639-1 format.

Example:

<a href="http://example.com" hreflang="en">Example Text</a>

Conclusion

Anchor tags are one of the basic building blocks of HTML and websites as we know them. There is a ton of mileage you can get out of them.