The “world wide web” wasn’t called that by accident. It’s an interconnected group of pages, pointing at other pages via links. Links, especially inbound links from other sites to yours, play a large role in how search engines rank you in their results. This means that even if your usability is perfect, and your site is stunning, if you’re not using quality internal and external links, it’ll be hard to get traction on search engines. That’s why your web design needs quality links.
But what’s a “quality link?”
At its core, a link, or “hyperlink” has two primary components: the linked web page, invisible to readers of the site, and the linked text, which is what readers see. So technically, it’s possible to make a link with only those two items. But it’s not possible to make a quality link with only those two elements. Use a combination of metadata and good old CSS styling to make your links quality.
Oh So Meta(data)
You can include several metadata elements in a link to increase its quality. Metadata is just information about information. So, link metadata describes the nature of a particular link. It can be used to make links more useful or understandable for both browsers and people.
For example, the rel= attribute tells browsers the relationship between the current page and the one at the other side of the link. A blog entry, then, might include in its header or footer the name of the author, linking to his author page. That link should include a rel=“author” attribute confirming authorship. Another example is rel=“nofollow”, which tells Google to ignore that link when calculating the target page’s PageRank.
You can also tell browsers whether to open the link in the current tab, a new tab, or a specific, already-opened tab by using the target attribute. People generally expect links to open up in the current tab, and commentators on best practices discourage the alternatives. Average users will use their Back button. While more advanced users of the Interwebs will know to open links in a new tab by holding the Control or Command keys, on Windows and Mac respectively, when clicking the link.
However, it could be useful to define this attribute in some cases, such as when you’re building a web application that benefits from managing multiple tabs.
You Gotta Have Style
CSS stands for “Cascading Style Sheets” and it’s important to speak this language if you want your website to have some style. Links have five states of being. They can be at rest. Then there’s visited, hover, focus and active. Just like humans, links act either alive or dead.
Each of those states describes something your readers do with their mouse or keyboard. Your CSS should define different colors and font styles for each one. Some designers take control of the underlined look of most links by using border-bottom instead. This gives you more options for styling the line, but retains the familiarity of that underlined style.
The color of each link state should also fit a common palette. No two states should be identical. Color is the perfect quick reference guide for links. It tells your readers whether they’ve already clicked a link, or whether they’re waiting for the new page to load. Use contrast with the surrounding text as well as with the background to make your links stand out.
When quality links are used on your website, then the overall web experience gets better for your readers. Metadata and visual elements, when used properly, give browsers and humans an easier web experience. And that means your readers will keep coming back in style every season.