Recipe 6.2. Writing Meaningful Link Text

Problem

You need to guide visitors to the page they're looking for with well-written link text.

Solution

When building a hypertext experience on your web site, follow this checklist to ensure that your links require as little effort from your visitors as possible to make them useful:

• Links should be formatted to stand out from other text.

• Followed links should look different than links that are not followed.

• Links should describe their destination.

• Links should be succinct.

• Link text should be straightforward. Avoid riddles, sarcasm, and culturally specific references.

Discussion

The words and phrases you place in <a href="…"> tags are by far the most important bits of text on your site. Web surfers, by their nature, are scanners. After determining that the page he's viewing does not have the information he wants, a visitor to your site will scan the page looking for the link that will take him closer to his goal.

A visitor's first job when scanning a page is to visually distinguish text that is a link from text that is not a link. As the designer, you should have already done the work to make this an easy task. In your site's stylesheet, you should define colors for text, links, and followed links, like this:

 body { color: #000000; } a:link { color: #0000FF; } a:visited { color: #660099; } 

These styles will create blue, underlined links on black text. When the visitor returns to a page from which he has followed a link, that link will appear purple (#660099) rather than blue. Conservative usability experts advocate close adherence to the blue-then-purple link-coloring scheme, allowing for some flexibility in the shade of blue and purple that can be used. The argument for doing so is strong. When a page contains no specification for its link colors, most browsers will use blue and purple. This design convention is prevalent enough that you'll be doing your visitors a favor by using it, rather than making them learn your custom color scheme.

On the other hand, some web designs (and designers) yearn to break the mold. As long as your link text stands out from the non-link text and the followed links can be differentiated from links without fading into illegibility, then you can indulge yourself with a little creative freedom. But a license to experiment should not lead you to remove the underline from links, despite the many alternate text decoration rules you can specify with CSS. Whether you use the standard blue and purple scheme, or something more complementary to your site's color scheme, keep the underline. It's a core part of what makes a link look like a link. Likewise, avoid underlining any text in your web pages that is not a link.

You might be tempted to use CSS to give links extra styling that identifies their purpose. For example, you might use standard underlined text for links to other pages on your site, text over a background color for pop-up windows, and dotted underline text for offsite links. Not only will this create visual clutter that will confuse your visitors, few, if any, will spend the time to learn and understand your system. If you have a small, well-defined audiencesay, for an intranet or web applicationyou may be able to educate your visitors about the intricacies of your link-formatting system. But in most situations, you're better off using link titles and well-written text to convey the action that results from clicking a link.

Color change is just one of the ways links convey information to your visitors. The actual content of the link is the other. Lazy web writers often fall into the bad habit of thinking like a link-seeking surferor not thinking at allwhen they enclose the infamous phrase "click here" in the their <a> tags rather something more informative.

The "click here" scourge has proliferated because it makes writing for the web easy. Yes, web surfers will visit as many pages as they can in search of the answer to their question. And yes, most will click to get there. So, web designers construct their pages like a laboratory maze, with blind corners that they hope will lead their mouse-wielding subjects to their reward: "To get the piece of cheese, click here." But when scanning a page full of "click heres," most visitors will wonder where their cheese went!

Writing (or rewriting) your links without "click here" takes some practice (and an appreciation for the web surfer's mindset), but your visitors will thank you when you do. Let's consider some before and after examples:

Before: Please click here to download your certificate as a Portable Document Format (PDF) file.

After: Download your certificate as a Portable Document Format (PDF) file.

Before: To report problems with this web page, click here.

After: Report a problem with this web page to the webmaster.

Before: For information on where to stay and eat in the area, click here.

After: Consult our lodging and dining guide for more information.

The "after" versions in these examples demonstrate a couple of common improvements over the "click here" versions. The link itself has moved closer to the beginning of the sentence that contains it. When "click here" dangles off the end of a sentence, visitors must scan backward over the text to ascertain the purpose of the link. When a well-written link hooks a surfer at or near the beginning of a sentence, she can read the rest of the sentence to put the link in context more easily.

Mimicking your search engine keywords in your link phrases can also improve your page rank.

The improved versions also use action words or highly informative phrases: "Download," "Report," and "lodging and dining guide." In the last example, I chose not to extend the link to include "Consult our" for the sake of brevity. The two extra words might actually detract from, rather than improve, the scannability of the link for visitors looking for a "lodging and dining guide." In general, concise links are better than wordy ones. With links longer than 25 to 30 characters (including spaces), you run the risk of them wrapping onto a second line where they might be compete with links above or below them on preceding or subsequent lines or be misinterpreted as two separate links.

See Also

Recipe 6.3 discusses another way to improve your links. Page titles become link text when viewed on search results. For more information on this often-overlooked page element, see Recipe 2.5. Recipe 3.2 explores the aesthetic choices that web designers face when building a site. In his article "Reviving Advanced Hypertext" (http://www.useit.com/alertbox/20050103.html), Jakob Nielsen describes some proposed features that browsers and web designers could use to make links easier to manage and use.