Don’t Click Here

We use links on the web every day as a vital part of our internet experience but most of us don’t give them any special consideration. Links connect pages together, provide context, and prompt action. Following best practices when creating links enhances the experience of your website visitors.

Anatomy of a link

A link on a web page consists of two primary components.

The destination the links points to

When a link is clicked, tapped, or otherwise activated, it typically will take you from your current web page to another web page.

The address (URL) for the destination web page is included in the source code of the web page. When looking at a link, this destination address is not visible.

In a desktop web browser, you can hover your cursor over a link and see the link address in the lower left corner of the browser window. On mobile browsers, there are ways to see the link address, but they are more difficult to access.

Here’s an example of a link address (the destination of the link):

powerfulweb.com/powerful-utility-web-design-approach

The link text

So if we can’t rely on our website visitors being able to know the destination address (URL) where we are sending them, how do we tell them what to expect? By using link text!

Link text allows us to specify a word or string of words to identify the link. This string of words visually contrasts with the surrounding text. Typically the link text is underlined and appears in a different color than surrounding text.

Let’s combine our example link address from above with some link text to create a link:

Let the the Powerful approach to web design energize your project.

Don’t “Click Here”

With a link, you are often prompting your website visitor to take action or giving them further information relevant to what they are currently reading.

This has led to a bad habit of using some very specific language for link text: “click here”. Variations of this bad language include:

• here
• learn more
• view here
• by clicking here
• click here to go to website

It’s thought that this practice originates from the early days of the web. “Click here” was an instruction to people who knew how to use a mouse on a computer, but were not yet familiar with the concept of links. Therefore, it was thought that the text of the link needed to literally instruct website visitors to click their mouse cursor directly there.

Today there is no doubt this is unnecessary as the concept of links is very well understood. In fact, there are some serious drawbacks to “click here” style link text, which we will get into soon. It’s actually questionable if this practice was ever needed in the first place. Accessibility expert Jakob Nielsen recommended against “click here” links as early as 1996!

Bad things that can happen with “click here”

Visual scanning of the page is foiled. Visitors to your website will scan down the page. Their eyes are naturally attracted to links as they stand out from the page and have an established significance. If your link just says “click here”, visitors may become frustrated. They are forced to spend extra time reading to understand the context of each link on the page to determine if it will take them closer to completing their goal on the website (such as finding out the per kilowatt hour price).

Screen reading software becomes less useful. A common task for screen reading software (used by site visitors with visual impairment or other disabilities) is to read a list of all links on a web page. If your link text for each link is simply “click here”, visitors using a screen reader will hear an unhelpful list of “click here, click here, click to learn more, click here, here, click to go to website”, etc.

Search engine optimization can be affected. One factor search engines use to organize and rank a page is by how other pages are related to that page. One part of this is the link text that the other pages use to link to the page. If the text is “click here”, search engines have a harder time understanding the relevance, which may cause the page to rank lower in search results. This is especially of practical concern if you are linking to other pages on your own website using “click here” link text. You aren’t doing yourself any favors in helping visitors find the destination page when using search engines.

Outdated language. Link text that says “click here” sounds outdated in a world where browsing from touch screen mobile devices (including some laptops) is common. For some visitors, it could even be confusing to be instructed to “click here” when they have no mouse to click with.

Redundancy and wasted space. Another pattern that emerges sometimes is having several sentences dedicated to describing a resource on another page and then also including a separate link with wording such as “visit the resource”. A better approach is to integrate the link directly into the description of the resource. Typically a good way to do this is by including the name of the resource at the beginning of the description and then using the name of the resource as your link text to direct people to that resource.

Best practices: what to use for link text instead

Generally, the advice of experts is simple when it comes to link text:

Use the minimum amount of words necessary to clearly explain where the link goes. It’s okay to use long phrases or even a sentence if needed. But try to avoid linking an entire paragraph as it can cause inconvenience for site visitors using a screenreader.

It’s also recommended that the link text begin with a keyword or the most important word. For example, instead of “John Smith Program 2021 Business Loan Application”, “Loan Application – Business – 2021 John Smith Program” puts the keyword “loan” first and the secondary keyword “application” right after it.

Following these practices means that the link will be easily scannable as your visitors scroll down your web page. It also means that visitors using a screenreader will have a clear idea of where each link goes, even out of context of the surrounding text.

Links everywhere!

In this blog post, I have been focused on “body text” — that is to say, the primary area of text on your web page, as opposed to header, sidebar, footer, and menu elements.

However, links don’t just appear in body text.

Dropdown menus, buttons, and footer links should all follow the same rule: the link text should clearly describe the link destination.