adding links, the right way.

filed under: |

Text links within web content are common practice and used widely—for good reasons.

Creating an effective link however, is not as simple as copying and pasting the URL itself and adding it to your text. We know more and more about how site visitors will access our content. One common pattern is the scanning of the page, skim-reading before going back to delve in deeper. We all do a  similar thing here – scanning for useful information like hunters and gatherers. We expect signposts and guidance through the content, clear labels and prompts.

This means that web content should have a clear hierarchy1 and links within copy should be shown in context, giving useful details and be visually clearly recognisable.

Let’s look at an example for clarity :)

What is a link / hyperlink?
Wikipedia defines the term as follows2:
In computing, a hyperlink, or simply a link, is a reference to data that the reader can directly follow either by clicking, tapping, or hovering.

Let’s say as closing sentence, you now want to point to a specific section of the reference, such as “Hyperlinks in various technologies”.  The link/URL itself would be very long, making it quite cumbersome to read: https://en.wikipedia.org/wiki/Hyperlink#Hyperlinks_in_various_technologies

Quoted within the copy, this will slow down reading and interrupt content skimming. Link text should therefore be informative and indicative of the destination of the link. Good links will begin with a prompting keyword, such as ‘view’, or ‘read’ and include fitting details for context.

Site visitors will scan the page on first look. They will either search for specific information or aim to get a clear overview. The more succinct and clear your copy and layout, the easier and more pleasant the reading experience will be. Generic text, such as ‘click here’, should be avoided at all costs. This phrasing does not give any useful information, making it harder for everyone, and especially people using screenreaders and having a negative effect on SEO due to lack of context.

AVOID including the full URL text

What is a link / hyperlink?
Wikipedia defines the term as follows:
In computing, a hyperlink, or simply a link, is a reference to data that the reader can directly follow either by clicking, tapping, or hovering.

For more information on the use of hyperlinks – go to https://en.wikipedia.org/wiki/Hyperlink#Hyperlinks_in_various_technologies

This is unnecessarily lengthy and looks ugly. Skim-reading is slow and it takes more eye movement to read, more time if read out and therefore requires more concentration in an effort to understand the link destination. This will be worse when the link itself is poorly formed or particularly long.

AVOID generic/unspecific phrasing

What is a link / hyperlink?
Wikipedia defines the term as follows:
In computing, a hyperlink, or simply a link, is a reference to data that the reader can directly follow either by clicking, tapping, or hovering.

For more information on the use of hyperlinks – click here.

This wording is not helpful and does not provide any information on the purpose or destination of the link. When scanning the page, this link text will force the site visitor to read the surrounding content to get in idea of what this link will lead to. This will slow down the skim reading, means poor accessibility for screenreader users and those not using a mouse, it is also detrimental for search engine ranking as there is no specific information included in the text.

BE specific & unique

What is a link / hyperlink?
Wikipedia defines the term as follows:
In computing, a hyperlink, or simply a link, is a reference to data that the reader can directly follow either by clicking, tapping, or hovering.

The use of hyperlinks is discussed in more detail – have a look at “Hyperlinks in various technologies” on wikipedia.

The wording now puts the link destination in context and clearly states the linked content by title. The active link text begins with the prompt ‘look’ and includes the full title of the linked content, making it unique within the page.  In combination with the visual distinction, this phrasing now forms an accessible and easily recognisable link.

DO include prompts

What is a link / hyperlink?
Wikipedia defines the term as follows:
In computing, a hyperlink, or simply a link, is a reference to data that the reader can directly follow either by clicking, tapping, or hovering.

Curious and want to find out more? – read “Hyperlinks in various technologies” now!

Keeping the title of the linked content – the phrasing of the link could be more prompting and encouraging click-through quite directly. This will all depend on your content and your site’s tone.

about internal and external linking

Adding internal links (i.e. links to other pages of your website) will help your site visitors, guiding them through your content while aiding accessibility. This will also benefit SEO (search engine optimisation). Internal links are part of an effective content strategy and will benefit both people and technical purposes.

Adding external links (i.e. links to other websites) allows authors to quote references, link to sources and supporting material and recommend additional information. This will give context, highlight connections and allow promotion of related subjects. Reciprocal linking is a common marketing method and is used to promote professional connections, another SEO benefit.

final thoughts

In either case, the wording of the link text should fit the flow of surrounding content and clearly state the link’s purpose. Most importantly, keep the link text informative and helpful. If the link will start a download process – say so. If the link goes to a different page of your site, be clear – phrase the text accordingly. It will be worth your time and effort to create links that are easy to recognise and clear to understand.

Your site visitors will thank you for an easy-to-use site which makes scanning of content easy. The search engines will be happy as they’ll have keywords and clues to follow.

linking – good practice:

  1. Links: Don’t “Click Here” (webaxe)
  2. Why Your Links Should Never Say “Click Here” (Smashing Magazine)
  3. I Don’t Want to Read More or Click Here (Karen Mardahl)
  4. Don’t say ‘click here’ on link text (goodusability.co.uk)
  5. Links and Hypertext (WebAIM)
  6. Click Here and Other Link Text (Jim Thatcher)
  1. see linked articles for more information on ‘writing good copy for the web’
  2. source: Hyperlink – wikipedia.org