The internet depends on connections — between computers, between people, between ideas. Links, or “hyperlinks” as they were originally called, are a basic tool for creating these connections. Yet so many websites offer unfriendly pages because their links are poorly written. Visitors can miss important content or be sent on wild goose chases. Those scenarios prevent your target audience from enjoying and trusting your content.
Effective content links are essential to an outstanding digital experience. Anyone who creates content on a website should aim to develop good linking habits.
While there are many techniques for inserting and formatting links, the majority of them are flawed. By following a few basic principles, you can help readers quickly and easily understand your content and flow through your site. Well written links increase usability, simplify content maintenance, and ensure your messages are accessible to the widest possible audience.
The perfect link: Name your destination
Let’s start by talking about the right way to create a link. The anchor text of the link, the words that users can click or tap on, should be meaningful. It should clearly indicate the destination of the link.
Use the name
Ideally, the link text should be the name of the resource you are linking to. That might be the name of an entire website, the title of a specific page on a website, or the title of a document. If the full name of the resource is more than a mouthful, shorten it to a few keywords.
Prefer nouns
Nouns are better than verbs, because people think in terms of objects and what they are “looking for” (read more about Object-Oriented UX). The exception are links that are designed to be calls to action. A call to action encourages people to do something and should be an imperative verb: buy now, donate, apply, contact us. In those cases, the linked phrase should clearly match the primary action that users can take once they follow the link.
For instance, here are two different ways I could tell people about some cool posters I found:
- Using Nouns: If you’re looking to spruce up your office, here are several Firefly Posters to choose from.
- Using a Call to Action: Looking to spruce up your office? Buy a Firefly Poster!
Match the target
Match the link text to the title of the destination page as closely as you can, but shorten or adapt the text to fit the context of your content. For example, the full title of this page is “It never stops at one — Why Voltron: Legendary Defender’s tragic ending wasn’t a surprise and why more DreamWorks’ series will follow suit,” but if I wanted to shorten it and be less formal, I could ask you to read this analysis about the tragic ending of Voltron: Legendary Defender.
If you have a link whose text doesn’t fit the flow of your sentence, you can rewrite your sentence to incorporate it better. You have the power. This is preferable to tacking on a vague “click here” or full URL at the end of your sentence (more on this below).
Enhance usability, SEO, and accessibility
Using clear and concise link text improves usability because people can easily understand what to expect when they visit the link. It also helps SEO because search engines can better understand the relationship between your page’s content and the linked resource. And it enhances accessibility because people using screen readers can clearly understand what they will find when they visit the link.
Tech tip: If you are linking to a resource that you don’t want associated with your site, use the rel="nofollow" attribute on the link. This will tell search engines not to establish a relationship between your site and that content, just like we’ve done with the example links in this blog post. If you’re not sure how to add this attribute to a link, ask your tech team.
Common pitfalls
Using descriptive link text might seem obvious, yet the internet is rife with pages that don’t follow this convention. Let’s look at some of the other tactics editors can use for adding links and consider their drawbacks.
Pitfall #1: Typing out a full URL
When someone is browsing your website they are already on the Internet. As they move between content items, they don’t need to see the address of the page they’re going to visit. It’s like trick-or-treating on Halloween. Once you’re in the neighborhood, do you care about the physical house addresses? No, you move along using other factors to decide where to go next: which porch looks inviting or which street is better lit. Or which house gave you the best candy last year.
If you find yourself typing out full URLs, removing them is an easy way to tighten up your content and make it more attractive for users. Replace the full URLs with appropriate link text. You’ll instantly reduce the amount of text on the page and make the substance stand out. (The way to insert links can vary depending on your website’s rich text editor. Ask your tech team if you’re not sure how.)
Here are two example lists to show how removing URLs improves readability:
Don’t example:
Minecraft fan sites:
- Planet Minecraft: https://planetminecraft.com
- The Skindex: https://minecraftskins.com
- Minecraft Tools: https://minecraft.tools
- Official Minecraft Wiki: https://minecraft.gamepedia.com/Minecraft_Wiki
Do example:
Minecraft fan sites:
Sometimes long URLs linger when you’ve created a webpage by copying over text from a document originally designed for print. It’s worth it to take a few minutes to clean up the content, turning the key phrases into links. That content isn’t in the print world anymore. Digitize it!
Complete URLs also provide a horrible experience for screen reader users. What does a screen reader do when it encounters a link? It announces, “Link” and reads out the link text. So if your anchor text is a URL and not a phrase, it will announce, “Link: h-t-t-p-colon-slash-slash” and you can imagine the rest. Depending on the length and complexity of the URL, this can be a complete waste of time for the person listening.
But, you will argue, sometimes my users need to see the link. What will happen if they print the page? They won’t be able to look up any of the resources I’m providing!
Tech tip: There is a simple technical trick to solve this problem. All you need to do is add a tiny bit of CSS to the print stylesheet, and the page will show the links when it is printed. If your printed pages don’t have this feature, talk to your tech team about adding it. (See Print URL After Links).
Pitfall #2: Click here! Please, on these tiny words!
This is another common technique editors use. Remember, this is for illustrative purposes only: I have described something fascinating and wonderful and now you are prepared to learn more about it, so click here.
What is the problem with this approach? First of all, accessibility. The announcement, “Link: click here” gives the screen reader user no idea what this link will lead them to. Some screen reader users will try to navigate through a page quickly by listening to the list of available links. “Click here” links offer no value to them.
Second, small phrases like “here” and “click here” provide a very tiny target to click or tap on. They’re easy for a reader to overlook, especially if your link styles are subtle. On a mobile device, smaller links are especially hard to activate.
Lastly, these small vague phrases don’t help your SEO. Because the words aren’t specific, the search engines can’t understand how your page relates to the linked content.
Pitfall #3: Read more… of what?
Your guess is as good as mine. Using “read more” as link text is problematic for the same reasons as “click here” links. They are very common, however, in lists of content inviting users to read further. When at all possible, try to design your content lists so that the title of the item is an obvious link. Then you won’t need to follow it with a “read more” link.
If you do need to fallback on a “read more” link, consider whether you can make it more specific. Can you say, “Read more of [article title]” or “Read more about [topic]”? This will give your users more context for the link.
Pitfall #4: Breaking promises
Have you ever been disappointed when you clicked a link and didn’t find what you expected? Or thought, I’m not sure if this is what I want, but I’ll try it anyway?
The last approach that some editors take is using a phrase for their link text that is very different from the name of the actual target. This is essentially a form of clickbait. Users will quickly be frustrated if what they find by visiting the link doesn’t match their expectation. If you really want to know why this can be harmful, see this article about what happened to the president of the United States when he followed a confusing link.
Other best practices
Here are a few other tips for making your links as user-friendly as possible.
Indicate links to non-webpages
If you are linking to a document or file, include the file extension in the link text. That way, the user won’t be surprised when another application window or download prompt opens. The file extension must be in the link text for screen readers to pick it up. If you use an icon or put it in plain text after the link, sighted users will see it, but it’s less accessible.
Examples:
Don’t spawn new tabs or windows
I have heard accessibility experts argue about this one on multiple occasions, so there may not be a conclusive answer. In every discussion I’ve witnessed, the final consensus is that you shouldn’t force your links to open in new windows, unless you have a very good reason to do so. Consider your strategy carefully, and be consistent with your approach.
Linking to a website besides your own is not usually considered a good enough reason in this context. The entire Internet is made of links, and it’s expected that they connect to multiple sources. If every link to another website opened a new tab — we’d quickly be lost in mazes of tabs.
If you’re thinking that an external link is leading users away from your website, and therefore should be in a new tab so you don’t lose readership, that logic doesn’t always hold up. Sending them to a new tab could in fact be worse than staying in the same window, since they’ll no longer be able to use the back button to retu\r\n \to your site.
Keeping links in the same window allows users to use the back button if they want to go back to a previous location. It’s more polite to give the user a choice than to force the behavior.
Savvy users can activate the “open in new tab” option if that’s what they want.
Less savvy users may get confused by new tabs that they didn’t expect. They may not realize they’ve been moved to a new tab and instinctively click the “Back” button, to no avail. After closing the new tab, they have to find their way back to the original tab. This can be particularly challenging for people using screen readers.
A valid example for needing a new tab, is a link contained in a form. You wouldn’t want the user to lose their place in the form, so if you are linking to further information or instructions, it would be helpful to make it open in a new tab. When finished, they can close it and retu\r\n \to their place in the form, without losing any information they had filled in.
Use buttons for calls to action
If your website is built with a CMS like Drupal or WordPress, it should be possible to configure your rich text editor to give you options for styling links as buttons. This can be very useful for adding “Apply Now” “Donate Today” and other invitations to engage with your organization. Buttons stand out visually and signal to your users that clicking them will take them someplace new.
Tech tip: Ask your web team about this feature if it’s not currently available in your text editor.
Use bulleted lists instead of horizontal lists
When presenting a series of links, use bulleted lists to stack them vertically, rather than horizontal lists separated by pipes, hyphens, or commas.
Vertically stacked, bulleted lists are easier to scan and are great for accessibility. Screen readers can report that there is a list with X number of items. They’ll also look better on mobile, whereas horizontal lists will end up wrapping and feeling like jumbled lines of text.
Don’t example:
Famous Moffs: Grand Moff Tarkin | Moff Jerjerrod | Moff Gideon
Do example:
Famous Moffs:
Don’t worry about the title attribute
You can optionally add a title attribute to your links to provide more information about the target page, but I don’t recommend spending time on this.
Title attributes on links have a minor benefit for SEO, but do not enhance accessibility. Screen readers ignore the attribute. The pop-ups that they generate when users hover over the link arguably impede usability. They can be distracting and interfere with other interactive elements. They disappear after a few seconds, leaving some users wondering, how do I see that again? And they are unlikely to be triggered on touchscreen devices.
If you do add a title attribute, make sure it is different from the link text and provides supplemental information about the destination page.
Use design to enhance link usability
When planning your site’s visual design, be sure to talk about the treatment of links early and strategically. Links that are easy to recognize benefit all users of your site.
Links should differ significantly from plain text on the site, so that users are never confused about what is clickable and what is not. Have you ever walked into a glass door, not realizing it was closed? That’s how I feel when I click something, only to find it’s not a link after all. Oops, hope no one saw that.
Contrast. Ensure the color you choose for links has sufficient contrast with the background color to make the links easily readable. For compliance with Web Content Accessibility Guidelines (WCAG) level AA, the contrast ratio between foreground and background colors should be at least 4.5:1. This contrast ratio should also apply to regular, non-linked text.
Accessibility experts also recommend a significant degree of contrast between the links and the text around them. The recommended ratio between links and surrounding text is 3:1.
Non-color indicator. To assist users who are colorblind or have weak vision, something besides color should indicate the presence of a link. Underlining, bolding, or applying a bottom border with CSS are common techniques used to meet this objective. Non-color indicators are very important for links that occur inline with body copy. It’s not always required for menu items or buttons, where it is clear from context that the item is a link.
Focus indicator. Whatever styles you apply to your links on hover should also apply when the item receives keyboard focus. This will help your keyboard-only users. Tech Tip: Links usually have a :hover state (a change that occurs when your mouse rolls over the text). Every item that has a :hover state should also have a :focus state. The simplest way is often to make them identical. This can be achieved by declaring both states in the same CSS rule.
Consistency. If your links are purple on the homepage, they should be purple throughout the rest of the site. Don’t change up link colors in different sections or have too wide a variety of link colors. And don’t use your link color/style for headings, callouts, and other non-actionable text. This creates confusion and excessive cognitive load for users.
Tell me more about creating links
Other angles on the topic of writing links:
- Hyperlink Usability: Guidelines for Usable Links (Usability Geeks)
- Writing Hyperlinks: Salient, Descriptive, Start with Keyword (Nielsen Norman Group)
- Making Accessible Links: 15 Rules for Developers (SitePoint)
- Links and Hypertext (WebAIM)
An excellent webpage doesn’t simply stand on its own. It links to others – to details, to tools, to that next great thing that you didn’t even realize you were seeking. That’s why the way you write links matters. Paying attention to the tiny details will make your content easier to understand and accessible to more audiences, helping you communicate your message and create a more satisfied readership.
Our team can help you evaluate whether your content is using links effectively and assist with training editors to follow these best practices. Contact us if you’d like to hear more about our services.
Making the web a better place to teach, learn, and advocate starts here...
When you subscribe to our newsletter!