« Reader survey | Main | Blazoning »

Link text

| 10 Comments

I've been meaning to write about this for ages. I've been putting it off because I wanted to provide thorough and well-researched guidelines on best practices for choosing link text, but that's not gonna happen anytime soon, so I'll start with a less-thorough version.

By "link text" I mean the text of a link—the text that appears, marked as a link, on a web page, and you click it and the browser takes you to another page. In most traditional visual browsers, if the page author hasn't done something to change link appearance, the link text appears in color and underlined to indicate that it's a link; and when you point to it with the mouse pointer, the status bar of the browser indicates the URL that you'll go to if you click it.

In the below discussion, the links are mostly null links; they're just there so that you can see what the link text is.

There are a couple of longstanding traditional approaches to choosing link text that, although very widespread, have unfortunate side effects. These include:

What's wrong with those approaches? you may ask. Here are a couple of the main problems with them:

  • They're bad for people with disabilities, especially visual disabilities, especially blind people. Such people often use software called a "screen reader" to read the text of web pages aloud to them. A screen reader reads the link text aloud for each link as the user steps through the links to decide what to click. If you're having a hard time imagining this, try closing your eyes and have a friend read you the link text (and only the link text—not the surrounding plain text) for each of the above examples. Can you tell whether you want to follow the links? Now imagine you're on a page where there are ten links, and they all have the text "here." Can you guess which "here" is the one you want? The third example above is a little different; for that one, have your friend read each letter and punctuation mark of the URL aloud to you, slowly. . . . If you want more information about web accessibility, I recommend Mark Pilgrim's excellent Dive Into Accessibility.
  • As is widely known (I'm not giving away anything secret here), Google uses link text as part of its ranking algorithm; hence the practice of Googlebombing. If all of the links to a given page use the word "here" or "a" or the page's URL, then that page isn't as easy to find in Google as it could be. If I've got a great page on wombats, but everyone who links to it says "click here for wombats" or "http://www.example.com/Jed-wom-page.html," or links to a series of my subpages with "these are cool pages," then Google isn't going to know that you think my pages are good search results for the search term wombat.

So if possible, you should avoid those kinds of bad link text. (I know that some people don't understand the fundamental fact of the web, that you can click links to follow them; I know if you don't say "click here" some people won't know they can click to follow the link. I'm afraid my answer to that is that that's too bad, but that those people are going to miss out on most of the web until someone teaches them that they can click words other than "here.")

If you want to write really good link text, you can go a step further: make your link text give a clear indication of what it is you're linking to. This is where I keep bogging down; I haven't yet come up with a good firm set of link text style guidelines, nor have I seen such a thing online (though I'm sure it must exist). I generally try to link from a noun or a verb, to link from a phrase that describes the destination, and so on, but I haven't worked out details. Is it better to link from an article title or a description of the article? I'm not sure; I generally play it by ear, often based on how descriptive the title is. But it's definitely better to use an article's title as link text (in most cases) than to use just the name of the publication; if you've written the phrase "a New York Times article on wombats," far better to link from article on wombats (or possibly the whole phrase) than to link from just New York Times.

Sometimes writing good link text requires reworking a sentence. It often feels natural to say "For more information, click here" or "For more information, follow the link." But when you find yourself writing such phrases, take a look at the link text and imagine it in isolation, and see if you can come up with a rephrasing that has better link text. In some cases, you might try the simple change "For more information, see Wombats R Us," but sometimes that doesn't fit with the context. "For more information, see the article" isn't great, but it's better than "click here." But sometimes you may need to rework the entire sentence, and sometimes the results are a little clunky. I sometimes find myself writing things like "A New York Times article on wombats has more information"; sometimes you'll have to decide whether it's more important to you to go with good writing or good link text.

But at least you should make that an informed decision. And often, you can satisfy both goals at once with very little rewriting.

10 Comments

What do you think about using link titles as a way to add information without cluttering your base text?


(Clarification -- for an example of a link title, roll over the link above; most browsers should show a popup or "tool tip" with further text.)


The main problem here it seems to me is the screen readers that read


the link text aloud for each link as the user steps through the links to decide what to click. ... (and only the link text—not the surrounding plain text)

Why would anyone do that? The significance of the link and whether it's worth following is surely dependent on the surrounding text.

I'll grant that it's slightly more useful, say in this handy example:

LA Times (via Yahoo): Where Science, Fiction Meet: article about Paul Allen's SF museum
to put the link on 'Where Science, Fiction Meet' than on 'article'... but those words by themselves don't tell you it's an article from the LAT about the museum. Am I going to put the link around the entire item? No, that would be garish; virtually everything on my homepage would be a link if I did that.

I have my own peeves about link practices-- 1) gratuitous links on proper names, e.g. on 'William Gibson' to his site, even though nothing on his site has any relevance to the passage where the name was used; 2) Confusing specific with general, e.g. if there's a link on 'New York Times' by itself, it should be to the homepage of NYT; if something more specific, the text linked should say so, e.g. 'New York Times article'...


Jed, I think that you're unfairly restricting HTML as an art form, here. (Particularly with the "series of words" example, which when it's done well is, I think, one of the cleverer link tricks.) If your goal is to link the web into an 80s-style hypertext information system, then what you're suggesting makes all kinds of sense, from a technical perspective — though I’d suggest taking it even farther, and pulling all the links out of the page text into bulleted lists. But that's only one of the things that web pages are for.


P.S. I think part of what bothers me about your argument is that in both cases what you're basically suggesting is that web pages should be written to work around bugs in someone else's software. Considering that the web is chock-full of pages that say 'click here', it seems to me that it's incumbent on the screen-reader developers to take that into account and provide more context, and on Google — which does not suffer from a lack of clever people — to figure out how to account for it.

And, as a side note, let me point out that the above paragraph is an example of exactly what I'm complaining about. The emphasis in the sentence should fall on chock-full, but it's trumped by the link text. As a result, the text is friendly to screenreaders and Google, but unfriendly to the target audience — those who want to just read it as a paragraph of text.


I'm hoping to get a chance to play with a screen reader next week; I'll hold off on further comments about how they handle links 'til then.

So for now I'll focus on David's argument. I'll start with an analogy:

I'm partly red-green colorblind. The main practical effect of that is that I have a hard time seeing text against a colored background where the text and background colors don't contrast much. I spent a long time wondering why so many web pages had no text on them, before I realized that several of the color schemes provided by Dreamweaver (designed by professional designers) had text and background colors close enough to each other that I literally couldn't see the words, much less make out what they said.

So I would say that it's a bad idea for web designers to use, for example, very dark red text on a black background, or very bright yellow text on a white background. (This is not a slam against your pages, David; as you noted, the issue there was thin lines, and you've addressed the problem.) But a web designer who likes red and black, or yellow and white, could easily say that I'm unfairly restricting web page design as an art form. My insistence on a different color scheme prevents them from fully expressing themselves.

My answer is that if expressing their art is more important to them than my being able to read their pages—and it may well be, and that's a valid choice—then they should use any color scheme they want to. But if they want me to be part of their audience, they have to present the page in a form that I can read. And somewhere between 5% and 10% of the adult population of the US is at least partly colorblind, so they may be losing a lot of readers.

Similarly, if after thinking about it you decide that it's more important to you to use a particular style of link than to make your pages more accessible to blind people, that's your prerogative. I'm not preventing you from using all the artistic tools available to you.

But I am saying that by doing so, you're limiting your audience. You're making your pages less usable by a certain set of readers. The effect is much the same as designing for IE (which gives you access to a bunch of cool tools and effects) and deciding not to make pages viewable in other browsers.

Similarly with the Google thing. You can use "link here" links all you want; but if you want your links to make the page you're pointing to more prominent in Google's search results, you're better off making the link text relevant. You don't have to have improving the target page's Google ranking as a goal; but if you want to improve the target page's Google ranking (given particular queries), there's an easy and legitimate method open to you.

As for emphasis, imo if you think of links as emphasis in a sentence it's gonna lead you astray. English grammar didn't evolve with linking in mind. Emphasis doesn't necessarily have anything at all to do with appropriate link text. In my previous paragraph, the word can was emphasized; that doesn't mean it would be a good word to attach a link to.

So if you think of links as emphasis, I'd say your best bet is to keep them out of sentences altogether. The point of a link is to take you to another page; the choice of link text should, imo, generally have more to do with what other page it's leading to than with what's going on in the sentence that contains the link.

Here's another analogy: Imagine you're creating a flyer for a toy store, to be posted on telephone poles all around the city. If you want to fully artistically express yourself, you might paint a magnificent painting of a forest, or write a beautifully calligraphed quotation from Shakespeare. But the less relevant the flyer's contents are to the toy store, the less likely it is to serve its primary purpose of letting people know about the store.

Which is not to say that flyers (and link text) should be ugly and utilitarian; as I noted at the end of my entry, sometimes you may decide that aesthetic concerns trump practical concerns. For example, Wired made illegible type into an artform. And it's a spectrum rather than a binary choice anyway. But if you make the decision to focus on aesthetic choices, you should do so with the awareness of what you're losing.


I think the emphasis issue wasn't that the link creates emphasis because it's a link, but rather because it gets colored blue and underlined.


Exactly.

I've also got poor color vision, so I'm at least a little sensitive to the problem.

But, Jed, I think your points about "if your goal is..." are important, and something I didn't see at all addressed in your original post (which I think is what set me off). If your goal is to advertise your graphic design skills, then screenreader accessibility is presumably very low on your list of priorities. If you have no interest in pumping up the PageRank of a site, you should feel free to link to it in whatever way makes the most sense in the context you're linking from. If you're writing hyperfiction, your structure may be appropriate for highly descriptive links, or it may not.

And I still — as a software engineer, not a web designer — think that it's the responsibility of web tools, whether it's browsers, screenreaders, or Google, to deal with the web as it is,* rather than as it hypothetically would be if everybody followed some standard that's most convenient for the programmer. With all the millions of pages out there, it's a little late for that.

* I'm not talking about people failing to put alt text in their image tags; there's not much anybody can do about that. But for screenreaders not to provide any context for links embedded in text is just poor design.

Jed, I agree with everything you said, and try to follow those practices when designing websites.

The only time I don't, is when I don't want Google (or whomever) to accurately find the page I'm linking to. :-)

Personally, I don't care for the "series of words" links at all. I have to hover over each one to find out where they go, rather than knowing from the link text itself or the context. Grrrr.

Anyway, great post!


What I find amusing is that my web-design instincts come from some the people I hung out with in college (and just after), who are mainly smart-ass hipkids who prioritize aesthetics first and everything else a very very distant second. This leads to a lot of very pretty websites that feature, among other things, a complete lack of visual markers for link text (no underline, no color change, nothing at all).

(no real content here, just observation. But left to my own devices, I do tend to try and make various web-utility components unobtrusive, even when they'd be more useful if they were more visible.)


Post a comment