Users scan web pages looking for information about what is on a page and where to go next. They are usually searching for a specific piece of information. Easy-to-understand links help the user navigate to the required information quickly and easily.
Following best practice with links is also important in terms of accessibility. Users with screen readers will often ‘scan’ a web page from link to link in order to understand what the page is about. It is essential to use links and good anchor text to provide accurate information.
The following guidelines only apply to links on the University website.
All URLs must be lowercase. For example:
Where URLs are a combination of separate words, these need to be separated by a hyphen. For example:
Within T4, you must set the output URI for each section; otherwise, the section name automatically becomes the URL, but will not be formatted correctly.
Output URIs should be lowercase with hyphens between words. For example, a section with the name 'why St Andrews' within the section 'Study at St Andrews' might have this URL:
This may be shortened by modifying the output URI of the section to become:
Top level URLs
A top level URL is one directly after www.st-andrews.ac.uk, for example:
These are reserved for core University services, Schools, research centres and institutes. Top level URLs have to be approved by the digital communications team.
Anchor text is the text over which a hyperlink is placed and it is very important for search engine optimisation and web accessibility.
You should never write "click here" as your anchor text. Users’ eyes are drawn towards links, and “click here” gives the user no idea what to expect when they interact with the link.
Instead, link text should be:
Descriptive: ensure that anchor text is descriptive of its destination. Ask yourself “what will the user get when they click on this link?” Your anchor text should answer this question. For example:
“Find out more about next week’s conference.”
Unique: if the same anchor text appears twice on a page, users will assume they will be taken to the same place. Make sure every unique link has unique anchor text.
Start with keywords: place the most important and descriptive words at the start of your anchor text, this allows the user to quickly decide if it is relevant to them. For example:
“Find out more about the conference next week.”
Keep it short: try to limit anchor text to a maximum of four words - the longer the anchor text, the higher the chance the user will scan over and ignore it.
Do not display the URL as the anchor text. For example:
“To find out more about the conference next week, see http://www.st-andrews.ac.uk/events.”
External web pages should only be linked to if there is a clear, demonstrable user need. For example, users looking for specific information on a member of staff are much more likely to Google their name rather than search the University website. It may not be necessary to link to personal staff websites from within the University site.
It is University policy not to link to websites of profit-making companies that we do not have a partnership with. A link from the University website is very attractive to many external companies because links from high quality websites can increase how well their website appears in search results. If in doubt, use a no-follow link (see below).
What is a no-follow link?
“Follow links” contribute to a Google metric called PageRank – every time a “follow link” is clicked, the page that is being linked to scores a point in Google’s PageRank.
A “no-follow’ link does not count towards PageRank. So adding a “no-follow” tag is a notice sign for search engines saying “do not count this visit”.
When to use no-follow links
Using a no-follow link signals that the page linking out is claiming no endorsement of the page it links to, nor that there is any commercial relationship between the two pages.
Therefore, when linking to a commercial page from the University website, make sure to use a no-follow link to demonstrate that it is not an endorsement nor is there any commercial relationship.
How to add a no-follow tag
To add a no-follow tag you have to open the html editor in T4.
A default link generally looks like this:
University of St Andrews
And here is the same link with a no-follow tag:
a href="http://www.st-andrews.ac.uk" rel="nofollow"
University of St Andrews
Links to email addresses need to display the full email address as follows:
Please email firstname.lastname@example.org for help.
Please email the digital team for help.
Note that the email address should use the full @st-andrews.ac.uk, not @st-and.ac.uk.
Displaying the full email address allows those who do not have an email client installed on their computer to copy and paste the email address into an application such as a web browser.
Do not obscure the email address to prevent automatic email harvesters from capturing the address. This will result in a poor user experience and present usability and accessibility problems.
It is important that links do not open in a new browser tab or window. There are accessibility issues where some users can get confused when a link opens a new window.
It is important that you test all links before publishing content to the web or sending an email. Make sure to check that all links are live and take the user to the correct place.