Best Way to Label Dead Links

I use the Broken Link Checker plugin on this blog and on Speed Force to find broken or moved links. In addition to helping you manage them in the admin interface, it can also assign formatting (as a CSS class) to mark them in your posts.

Cool! Readers can see that the link is broken before clicking on it!

But what’s the best way to label the links?

The plugin uses strike-through by default. You are marking something that’s gone, but strike-through usually means the text is being crossed out. That’s fine for a link in a list, but something like “Catering was provided by MyNiftyFoodCo” implies that the name of the company is wrong, not that the website is gone.

Just making something italic or changing the color doesn’t work either, because it’s arbitrary. Nothing about an italic link (which could be a title), or a random other color, suggests that something might be missing.

What I’ve come up with is to reduce the contrast on broken links. It combines two familiar schemes:

  • High contrast for new links and low contrast for visited links.
  • “Graying out” inactive items in software.

So here, I’ve got bright blue for new links, darker blue for visited links, and broken links as black (well, very dark gray), the same color as surrounding text. I’m keeping the underline in place so there’s still some indication that it’s a link, but it’s not as strong as the label for one that’s still functional.

It’s still not ideal, since color is the only difference, but it should cause less confusion than the strike-through.

[in]View Kelson Vibber's profile on LinkedIn

2 thoughts on “Best Way to Label Dead Links

  1. Kirk Warren

    If possible, I’d have it edit in a small gif image ofa broken chain link (WordPress has a button that looks like this -> http://www.mcbuzz.com/wp-content/uploads/2007/10/make-a-text-link-11.gif ) next to the dead link. The alt text when you hover over the link would show text along the lines of “Site linked to no longer available or has moved.”. So, it would look like this:

    This is a dead link[o/o].

    Where [o/o] is a broken chain link image. The image would be tiny and inline sized of course.

    Reply
    1. Kelson Post author

      Yeah, that should be doable in CSS using the :before or :after selector. Something like this:

      a.broken_link:after { content: url(/path/to/image); }

      Changing the tooltip would probably require some scripting, or else more processing on the server. Hmm…

      Reply

Leave a Reply

Your email address will not be published.