Creating links

• They tell users where clicking the link will take them.
• Some visually-impaired users rely on screen reading tools to navigate websites by going from link to link using the tab key. This means that links need to be understandable out of context. This is why words like 'click here' and 'find out more' are bad for accessibility. 
• They help improve search engine optimisation.
• They help all users scan the content of a web page to save them having to read all the text. Having a non-descriptive link means they have to read around the link to find out where it goes.

Find out more about descriptive links.

The following words are examples of links that you sometimes find on websites. They need to be avoided because they aren't accessible and don’t provide any information about where the link goes.

• Click here
• Here
• More
• Read more

Find out more about why 'Click here' should not be used.

• Sometimes you need to rewrite your text so that it can contain a descriptive link. So for example, ‘Click here to find out how you can take part’ becomes ‘Find out how you can take part’.
• There is no maximum length that your link should be, you can link as many words as make sense. Ideally they should be kept as short as possible to keep the page easy to read.
• Writing URLs as links: sometimes it's ok to make short URLs a link such as www.essex.ac.uk, but normally all URLs should be hyperlinked in the text (called a ‘human readable link’). However, email addresses are written out in full.
• When an image contains a link the alt text provides the description of the link. You must include alt text for any image.

To link to a document, you will need to have uploaded your document to the Media Library first. But before you upload your document, you must make sure it's accessible.

Once you've uploaded your document to the Media Library, making sure it's in the relevant sub-folder, you're ready to create your link in the Rich Text Editor box.

• Highlight the text that will be the link.
• In the Rich Text Editor menu, select the ‘Insert Sitecore link’ button.
• Find your document either by navigating through the Media Library folder or you can search for it if you know the file name.
• Once the document is select and the link is create, type in what type of file it is after the link, eg (.pdf), (.docx) so that users know that it’s a link to a document.

If you want to link to another a page that is held in Sitecore, such as an event, news item or main website page, you'll need to use the Insert Sitecore Link button.

However, you shouldn't use this function for links to course pages, staff profiles or blogs. You should use the 'Hyperlink Manager' external link tool for these types of pages (see below).

• Highlight the text you want to make a link.
• Select ‘Insert Sitecore Link’. You can search for the page, but many pages are called ‘Undergraduate’ for example. Search only works here if the page has a unique URL. The best way is to navigate through the content folders and find the page. Once you find it, just select it and that link will be added.

Creating links in Directory pages needs careful planning. Before you create the link, ask yourself:

1. Is the page I'm linking to in the Staff or Student Directory?
   • No? Add a single link as normal using the Insert Sitecore Link or external link buttons
   • Yes? Do a quick search of the Directory/Directories to find out which category the page you want to link to is sitting in for each Directory, eg. Bonds is in the Food and drink category. Then go to point 2
2. Is the page I'm linking to in more than one Directory?
   • No? Follow the 'Linking to a page that's only in one Directory' information below.
   • Yes? Follow the 'Linking to a page that's in both Directories' information below.

Linking to a page that's only in ONE Directory

If you’re editing a Directory page and the page you’re going to link to only sits in one Directory, you need to use the Insert Sitecore link. This is a single link. Highlight the text, then select ‘Insert Sitecore Link’. You then need to navigate through the content folders and find the page.

For example, if you want to link to the ‘Flexible working’ page which is only in the Staff Directory, you need to open - Content - Main Site - Home - Staff Directory Home. That page is in the ‘Employment policies and procedures’ category. Once you find it, just select it and that link will be added. It does mean you need to know which category a page sits in, but a quick search of the Directory will help you find it.

Watch a demo

See how to create single links in our Directories training video (at 22.25 mins). 

Linking to a page that is in BOTH Directories (contextual links)

If you’re linking to another article that is cloned into both Staff and Student Directories, you need to use the Insert Contextual Sitecore Link button.

This does mean you need to find out whether that page exists in more than one Directory and a quick search on each Directory will help you know that. Generally speaking, People and Culture pages are on the Staff Directory, so this type of link is not needed for those pages. But if you’re linking to Bonds or another catering outlet, for example, these exist in both Directories, so you here you need to use the contextual link button.

Here's the reason why we have to link in this way. If a user is browsing a Staff Directory page, for example, and they want to click on a link to Bonds, we know that there are two copies of the Bonds page, one on each Directory. We don’t want the Staff Directory user to click on that link and be sent to the Bonds page on the Student Directory. So this function instructs Sitecore that if a user is on one Directory they need to be sent to the version of the linked page that is on the same Directory.

To do this:

• highlight the word, let’s say it’s Bonds that is going to become the link
• copy the text (with Control ‘C’)
• select the ‘Insert Contextual Sitecore link’ button
• paste the text into the Link Text field.
• find the Bonds clone in each of the Directories folders below and select them
• Lastly, press Insert. Make sure that it is done in that order, making sure you've selected both Directories first before you press insert. It doesn’t work otherwise.

What you’ll notice is that in the Rich Text Editor box and on the Experience Editor preview, the word you’ve linked appears multiple times. That’s ok, it won’t show like this on the website when it's published.

Watch a demo

See how to create contextual links in our Directories training video (at 19.20 mins). 

To link to another organisation’s website or to a page on a University of Essex website, but one which isn’t in Sitecore, such as HR Organiser for example, you need to use the ‘Hyperlink manager’ button. Select the Hyperlink tab and paste the web address into the URL box.

To add an email address, you need to have the email address written out on the page. Copy the address and then go to the ‘Hyperlink Manager’ button. Select the email tab and paste the email address into the address box. 

An anchor link is a link that takes users to a particular place on a web page. This can be helpful if a page has a lot of text on it.

In Sitecore you can create an anchor link to a specific place on a web page, or you can link to an accordion module item.

Standard anchor links

To create an anchor link (usually that's to a paragraph heading) you first need to set up an anchor tag. This gives your link somewhere to go to. For example, if you wanted to link to the “Learn To courses” heading in the below example, you would need to give that heading an anchor tag.

Open the Text Editor Box and select the 'HTML' tab at the bottom of the box. Highlighted below, is the code you need to add to the heading. The name you enter here will be your anchor:

<h2 id="learn-to-courses">Learn To courses</h2>

You also need to make sure that no spaces or uppercase letters are in the tag.

An anchor link on the same page would be #learn-to-courses. If you link from a different page, you need to include the full page URL. So for example: https://www.essex.ac.uk/sport/active-campus#learn-to-courses.

Linking to an accordion item

Accordion items are given anchor tags automatically. So to link to an accordion item, you don’t need to set up any additional tags.

When creating your hyperlink, just use the title of the accordion item and swap the spaces with hyphens and add a hashtag. You also need to make sure that no uppercase letters are in the tag. For example, if you wanted to link to this accordion item “Anchor links”, your link would be #anchor-links. If you link from a different page you need to include the full page URL. So in this case: https://www.essex.ac.uk/staff/web-support/creating-links#anchor-links.

The accordion item will be automatically expanded for the user to read the content. You can’t anchor link to something inside an accordion item as the accordion item will be closed by default.