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.
Links are crafted by correctly forming the following HTML anchor tag:
<a href="https://websitejolt.com">Website Jolt Text</a>
Now let’s break it apart.
arefers to anchor.
- This anchor tag is necessary to create hyperlinks.
hrefrefers 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. 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
idassigned. This is how jump links (one-page websites or table of contents) are created.
- Other resources using protocols other than HTTP.
- Script actions.
- Directly to any element within a web page that has an
- 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.
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. Exact match anchor text isn’t quite the same.
Content boxes or columns can be clickable to open hyperlinks or jumplinks as well. Visually, this looks similarly 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.
This is an interesting strategy that I 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
You can also do this through images by surrounding an image with an empty anchor tag.
Anchor text that is an exact match is it includes a keyword that reveals the exact page it’s being linked to. For example, my hosting link that links to a page about hosting.
Generic anchor text uses non descriptive text that don’t exactly reveal what the link is about. This is anchor text type that gave us the glorius “Click here” inflated marketing shtick that we all know.
They are calls-to-action (CTAs) but I think more descriptive anchor text will do you better.
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 links are basically pasted links that were automatically converted by word processing software. An example is https://websitejolt.com. Think of this as a raw URL that has been linked.
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 Website Jolt Recommended Resources that links to the tools and resources I recommend.
All you are doing is simply combining your brand with a partial match keyword.
I’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,” I could use the following anchor texts:
Anchor Text Wrap Up
According to Moz, SEO-friendly anchor text is:
- Succinct: little amount of text as possible.
- Target Relevance: be descriptive, 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.
I recommend you read more on this topic at SEO best practices on Moz.
Other Important Anchor Tag Parameters
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.
<a href="http://example.com" target="_blank">Example Text</a>
Target Attribute Options
target="_blank": new window.
target="_top": topmost window.
target="_self": same window.
target="_parent": parent window.
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
<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 to.
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 current page is within a series of pages and you want to link to the next document in the series.
rel="prev": use when current page is within a series of pages and you want to link to the previous document in the series.
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.
<a href="http://example.com/file.pdf" download="Example_File">Example Text</a>
Language of Destination Link Attribute
This attribute is optional, but I would recommend doing it to provide a better browser experience if you need to link to a website in a different language.
The language codes are in an ISO 639-1 format.
<a href="http://example.com" hreflang="en">Example Text</a>
Anchor tags are one of the basic building blocks of HTML and websites as we know it. What else did I miss?
What did you learn? Sound off in the comments below.