Stop Mystery Meat Linkification

Have you ever arrived at a website and you couldn't figure out how to get in? Maybe there were some clickable pictures, but no indication of where they go? Or maybe you clicked on a seemingly innocuous link and something happened that you didn't expect. Music started playing, or your browser window suddenly changed size?

Web design critic Vincent Flanders coined the term "mystery meat navigation" to describe websites where you have to click around to find out what happens. Mystery meat linkification is the text equivalent.

When your link text is light on details, some readers with disabilities (and many other folks) can't tell where they're going to end up. In general, it takes a little more work for people with some disabilities to open a new link or back out of an unwanted page. Especially if the link leads to content their software can't deal with, it's helpful to know where they're headed before they click.

Here's something else to consider. Sighted people tend to scan a web page with their eyes for key features such as navigation and links. People who use certain assistive technologies can get a rough equivalent by listening to or tabbing through a list of links extracted from a page. Using links this way doesn't substitute for reading the content, but it's a handy tool. To a visitor who is scanning this way, text like "click here" doesn't give them any information.

Search engines also pay attention to links on a page when trying to figure out what your blog is about. The more your link text describes what you're linking to, the better they can figure you out and bring visitors who are interested in your content.

Good, Bad, and Ugly Link Text

Bad: I love this.
Good: I love this blog about vegan cooking.
Why: The good link text says what the link is about.

Bad: Crafting A Green World has so many good green craft ideas.
Good: I love Crafting A Green World, especially the posts about saving your jeans, your fabric stash, earth-friendly batting, making shoes, and wedding rings.
Why: If you have two adjacent links, a screen reader won't necessarily leave a pause between the links. They need to be separated by either words or punctuation. If the latter, make sure the punctuation is outside of the link. ALSO NOTE: On blogs that don't underline their links, a long string of adjacent links makes it hard for anyone to see that there are multiple links unless they mouse over each one.

Bad: I love this.
Good: I love this news piece on men marching against sexism.
Why: When the words you use as links are really small, it can be hard for users with mobility impairments (or anyone else) to click on the links.

Bad: These research findings about social promotion in schools are really interesting.
Good: These research findings about social promotion in schools (PDF) are really interesting.
Why: PDFs, mp3s, YouTube clips, links that go to photographs, and other links to non-text content are friendlier when they're clearly labeled so that people with disabilities (or really slow internet connections) can decide whether they want that content before they click.

Bad: Treehugger has a great post on Nalgene not making bottles with Bisphenol A anymore.
Good: Treehugger is probably the biggest green blog.
Why: Is your link about the blog Treehugger, or the specific post on that blog?

Ugly: Check out http://www.problogger.net/archives/2007/06/22/goals-to-achieve-in-a-blogs-launch-phase/ for good advice on what to achieve when you first start your blog.
Good: Check out Goals to Achieve in a Blog’s Launch Phase for good advice on what to achieve when you first start your blog.
Why: How long could you sit still if someone tried to read that web address to you aloud, one character at a time? That's what happens when your link text is a URL. Also, long URLs don't wrap and may mess up your page.

Links Can Still Be Interesting

Sometimes it's fun to do a link like How Beautiful! or What a Jackass! and create a little mystery for your readers. Just don't overdo it.

You also don't have to check your personality at the door. One of my favorite linkers is shannon of Egotistical Whining. Here are a few of my favorite links from her blog, with the link text she chose:

Final Tips

Screen readers indicate that text is a link, usually by saying the work link or by changing the voice or pitch. So you don't have to worry about including the word link.
Avoid creating several links in one post that all go to the same thing, or if you must, don't use different link text each time. It gets confusing.
It may take a little practice to get in the habit, and it doesn't have to be perfect. Every little bit helps.

Sources and Further Reading