Getting Started with Links
Before you get started adding links to your page, learn more about the dos and don'ts of writing links.
You should also familiarize yourself with how to use UTM codes in your links to better track your content in Google analytics.
Opening Links in the Same Tab vs. a New Tab
By default, all links (internal and external) on Drupal websites managed by University Communications open in the same tab.
If you’ve ever googled something along the lines of “should a link open in a new tab,” you know that this is a topic of debate in UX communities. Although the debate continues, we recommended that on all University of Oregon websites links to both internal and external webpages should open in the same tab.
Reasons to Open Links in the Same Tab
Easier navigation on mobile devices:
Opening links in the same tab keeps the “back button” available as an option for users to return to the previous page. This reduces the chance that mobile users will get lost or be unable to locate a previous tab.
Increased accessibility:
Opening links in a new tab can quickly cause usability issues. For example, WebAIM, an organization that leads the way with tools and resources for web accessibility, explains how these kinds of links can cause issues for users using screen readers:
“Newer screen readers alert the user when a link opens a new window, though only after the user clicks on the link. Older screen readers do not alert the user at all. Sighted users can see the new window open, but users with cognitive disabilities may have difficulty interpreting what just happened. Then when they try to click on the Back button in the browser, nothing happens, because there is no previous link to go back to in a new window or tab.”
Having links open in the same tab eliminates this issue and helps make sure our websites are accessible for all of our users.
Users have a choice:
Setting links to open in the same tab allows users with different preferences to engage with your website in the way they like best.
If a user prefers that links open in a new tab, they can open the link in a new tab by right-clicking or by pressing and holding the link on a mobile device. This option is always available to users no matter how a link is set to open.
However, if a link is set to open in a new tab but a user prefers that links open in the same tab, the user does not have the option to choose and is forced to adapt to this undesired linking behavior.
Consistency improves usability:
A critical part of providing a positive user experience is maintaining a consistent experience throughout a website. Site visitors benefit from knowing that all links on a site will behave the same way when clicked. That is why it is important to set both internal and external website links to open in the same tab.
Exception: When opening content in the same tab would make it difficult or impossible to complete a task, opening the link in a new tab may be required for functionality. For example, linking to the same tab could cause a user to lose the information the have entered in a form.
Accessibility
Links should have concise and descriptive screen text that allows the user to understand where that link will take them without reading the surrounding text. Use words such as "University of Oregon homepage" rather than a URL like "http://www.uoregon.edu" so that the user can easily understand where the link goes. Hear a screen reader read a URL.
Avoid using "Click Here" or "Read More" when possible because many screen readers allow users to jump to links. If the title of the link is "Click Here" it provides no context for where the link goes.
Links should be labeled with the most important keyword or phrase people are looking for to guide them to the information they want.
Dos and Don'ts for Writing Links
Add a Link to Your Page
- Highlight the text or click on an image that you would like to make into a link to another webpage, document, or other content URL.
Click on the link button in the editing menu:
- This will open an Add Link window.
- If the link is to an external page not located on your website, copy the full URL, including the HTTP:// or HTTPS://, and paste it into the link URL box. Click the Save button to add the external link to your content.
- If the link is to an internal page located on your website, start typing the title of a page on your site. This will bring up a list of page titles that contain the word you entered. Click on the page title you want to link to and the URL will be filled in automatically. This may show up as "node/#" (Drupal content is stored as "nodes") or "/pagename".
If you are looking for information on linking to a file saved on your site, please see Linking to a File.
Add a Link to an Email
Click the link button to bring up the Add Link window:
In the link field, type:
mailto:
Followed by the email address you want to link which will look something like mailto:theduck@uoregon.edu.
Create Anchor / Jump Links on a Page
Place the Anchor
- Place your cursor where you want to set your anchor.
Click on the Anchor link icon button (can be either a flag or an # ID):
and type in your anchor name.
Anchor LInk Notes:There cannot be any spaces between words in your anchor name. Instead, use dashes (-) or underscores (_), like "the-uo-duck".
In some versions of our latest Drupal CKEditor there may not be an indicator in the visual editor that an anchor link exists. The anchor link can still be clicked on in that spot and edited by clicking the # ID or Flag buttons, or from the Source Code view.
- Copy the entire link name and click the "OK" button.
Link to the Anchor
Scroll up to where you will place a link to your anchor (usually at the top of your body content).
Highlight the link text and click on the link button (can be either one or two chain links).
- Type the # sign and then paste the anchor link name you copied (like #the-uo-duck) in the step above and click the Save button.
Note: There is currently a bug in some Drupal versions where the CKEditor automatically adds a "-link" to the end of some anchor link names. If your new anchor link is not working, double check in the source code view what the link name actually is to make sure your anchor link did not get the "-link" added to it by the editor.
Adding Anchor / Jump Links to a Different Page
To create anchors on a different page you cannot use the dropdown options listed above, you will have to manually copy and paste the anchor link information:
- Copy the anchor name on the page where your link will go, which should look something like "the-uo-duck" or "class-12345".
- Go to the page where your link will be coming from and click your cursor on the text that will be the link.
Click the Link button (can be either one or two chain links)
on the right side of the Content Editor menu and type in the name of the page that has the anchor link, then add # followed by your anchor name.
- As an example, an anchor jump to this section from an outside page would look like this:
/drupal/links#anchor-jump-links-extermal
Back to Top Links
Often when you have Anchor / Jump links on your page you will also want to use a "Back to Top" link to allow your users to go back to where they were. To do this we have a template item that you can use:
Just place your cursor in an empty paragraph location and insert the template item from our Component Templates from the editor menu. The template item will look like this:
Making Edits to Links and Files
- With your cursor on the link you want to edit, click the link icon in the middle of the Content Editor menu:
- This will bring up a link menu where you can fill in a new URL, change the link type from a straight URL, an internal link to an anchor, or fill out the information for an email.
- After you make any changes, click the OK button to commit your changes.