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 Bookmarks/Anchor Links on a Page
- Place your cursor where you want to set your bookmark.
Click on the bookmark icon button and type in your bookmark ID. Type your chosen bookmark ID in the pop-up box. Use simple, meaningful text. Lowercase is recommended. Use hyphens and underscores rather than spaces. Each bookmark must be unique on the given page. Example: "the-uo-duck"
- Click the green Insert button to apply the bookmark.
- To link to the bookmark you have just created, go to the location where you will place a link to your bookmark (often at the top of the page).
Highlight the link text and click on the link button.
- Type the # sign and then add the bookmark ID (like #the-uo-duck) 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. This issue does not occur if you are using the new Bookmark button.
Link to a Bookmark on a Different Page
To link to a bookmark on a different page, you will need to manually copy and paste the URL containing the bookmark information.
- Copy the bookmark ID you want to link to, which should look something like "the-uo-duck" or "application-instructions".
- Go to the page where your link will be coming from and highlight the text where you will place the link.
Click the Link button, add the URL of the page that contains the bookmark, then add # followed by the bookmark ID.
- Example: https://digital.uoregon.edu/drupal/links#bookmarks
Back to Top Links
To allow users to jump back to the top of a page, insert the following code in the source view at the location you would like to place the Back to Top link:
<p class="back-to-top">
<a class="back-to-top__link" href="#main-content">Back to Top</a>
</p>
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 a bookmark, or fill out the information for an email.
- After you make any changes, click the OK button to commit your changes.