Links. Where would we be without them? Links connect everything. Links make the world wide web go round. Without them, there would be no “inter” in Internet (or no “net”…?) for the Internet it is made up of links: hyperlinks, permalinks, backlinks, URLs. Internal links go to pages within the same site, and external links go to other sites and their pages. Hit a broken link and you STILL link – to a 404 error page, most likely.
Yes, links are important. We should treat them with the utmost respect.
In this post I explore how to format links, name them, change their behaviour, and give them a checkup.
Who is this post for? It’s written for anyone creating their own website, whether in a CMS like WordPress, or with native HTML and CSS. Also useful for small businesses who have engaged someone else to build their site – the more knowledge and understanding you have of web standards, the better.
People get precious about their website links. Especially when they’re going for an elegant, clean look. I’ve heard complaints about the way links “look different”, they “change colour”, they “don’t match”.
But links look different for a reason. People visiting your site want to know:
- Where to click
- Where that click is going to take them
- Which links they’ve already clicked, so they can tell where they’ve already been
- Links need to stand out.
- They should be clearly labelled and change in some way when hovered over.
- And they should look different once they’ve been clicked.
These days the changes can be subtle, rather than the standard fluoro blue they used to be in old-fashioned browsers. But in general, change is good when it comes to links.
If you’re using a CMS (Content Management System) like WordPress, the link behaviour has probably been predetermined. You can usually change it with styles in the CSS, via the Editor.
The 4 states for a link are: Link (the initial state), Visited (after it’s been clicked), Hover (when you mouse over the link), and Active (the moment a link is clicked). They MUST be coded in that order – the acronym I use to remember the order is “LoVe HAte” (which kinda sums up our relationship with links!)
Tips about Underlining: By default, links are underlined. For this reason, you should steer clear of underlining normal text on a website, as visitors will expect they can click it (did I catch you out above?) A common practice is to remove the underline from links (via CSS rules) until they are Hovered over, but you should alter the base Link state to a different colour or weight.
Naming links (AKA Anchor Text)
The link text (also known – somewhat incorrectly – as ‘anchor text’) is the word or phrase that can be clicked to take you to your linked destination. Some while back, a lot of people would just use click here as the anchor text. Which was pretty meaningless, especially without a title tag*.
Then the SEO crowd jumped on link text and some started to abuse its use, putting the same keyword as anchor text all over the place. Of course, Google wised up to that.
Now the recommendation is to vary your use of keywords and phrases and your brand name in more natural link text. eg. “Get the best blue widgets“, or “For all your widget services“.
*Tips on using Title tags on links: I used to think Title tags were important on links, especially for accessibility. Turns out that’s wrong. Nor are they much use for SEO. Basically, don’t use them, unless you can add more useful info than the anchor text provides, or to notify people of the link’s behaviour (as I’ve done on the following link). If you want to know more, check this post on Search Engine Journal.
Backlinks and SEO
Why is this link stuff so important? Well, one of the main reasons is SEO – Search Engine Optimisation. And link names and backlinks count towards your SEO ranking.
A “backlink” isn’t a special type of link. It is simply the term used for any link coming to your website from another. Where those links come from can add to their value (also known as “link juice”) depending on the authority or ranking of the originating site.
Building backlinks via ‘link farms’ is a technique employed by poor quality SEO consultants. But you can build backlinks through above-board processes and not be penalised by Google.
For lots of detail and a list of authoritative sites to link from, check this article at:
To open in a new page/tab? Or not.
When you create a link, you can choose whether the linked page should open to replace the current page – thereby sending the visitor away from what they were reading – or have the linked page open in a new browser window (or tab, if using tabbed browsing).
There has been much debate about this, and there is no right answer. Some people say they’d rather manage that themselves (by right-clicking the link to open elsewhere), but there are less tech-savvy people who aren’t aware of such features.
My usual take is this (and I know not everyone will agree):
- If it’s a link to something on your own site, with a natural reading flow-on, open it in place. This method just requires a basic link.
- If it’s a link to an external site, open it in a new window. To code this, you add “target=_blank” within the <a> tag.
Checking broken links
Redirecting links (URL redirection)
If you change the name of a page’s URL (or a “permalink” if you’re on WordPress), your anchor text doesn’t need to change. But the actual link tag does need to reflect the new link. There’s nothing stopping you changing your own URLs or permalink names. And you can make sure that you change all instances of it on your own website.
But what if that URL has been in place for a while and Google has indexed it and tries to send people there from the search results?
And what happens if other pages (or social networks) have linked to it? Out-of-date links will produce a “404 – page not found” error.
This is why you need to use a “redirect”. Redirection is the process of forwarding a URL to a different URL. The usual one is a permanent redirect, also called a “301 Redirect”. It tells the browsers that “if you’re looking for /xyz/ here, you’ll now find it at /xyz-new/”.
Some CMSes will manage this process for you. Otherwise, you may need help from your developer. To understand what’s needed, check http://moz.com/learn/seo/redirection.
So I’ll leave you now to go away and:
- run a link-check over your website,
- confirm that your site’s links are obvious to visitors and change their look based on their ‘hover’ and ‘visited’ status,
- rewrite your anchor text if needed,
- allow links to open in new windows/tabs where appropriate.
If you need help with your website links, get in touch with Right Hand Design…