Best Practices for Links

As a website editor, one of your main responsibilities is to ensure that the content on your site is easy to navigate and provides a seamless user experience. One way to accomplish this is by implementing best practices for links on your web pages. Links not only provide users with a way to access additional information but also help search engines understand the structure of your site.

Anatomy of a Link

You probably don't think about it much but a link, or hyperlink to be more technical, has multiple components to it and each part is very important.

The URL

A good link starts with the right URL. You need to know where you are linking to, after all! Whether you are using a button, an in-text link, or some other method of creating the link, your URL needs to go to a functioning, correct location, or else your visitor left your page for no reason. There are two types of URLs you may use on your site:

Absolute URL

This is a URL that starts with the traditional "https://..." and gets you directly to a specific page. This is necessary for external links but can be used for internal links if necessary.

Relative URL

This style of URL only works for internal links, that is links on the same site the user is linking from. Rather than including the entire URL, you can leave off the start of the URL up to the end of the primary domain. That's a super technical description, so look at this example:

"https://www.gmu.edu/about" will get you to the About section of the core Mason site. This link will work from anywhere. However, if I am already on the core site, there is no reason for me to include the start of that URL. Setting the URL to "/about" will work just as well. So linking to the About section from, say, Admissions, can use a relative URL.

The Text

A link needs something to link from or provide context to your click. Typically this is text formatted to be a link (typically called "anchor text", though you can also use a button or image with text to indicate what a person is linking to. There are many particular standards for link text:

• Avoid using link text like "click here" or "read more" as these links can be confusing if a screen reading software speaks them out of context.
• Use unique, descriptive text where possible. This not only helps users understand what they can expect to find when they click the link but also helps search engines understand the context of the linked content.
• Outside of rare cases, it is best to not paste a "naked" URL into the content of your page. A screen reader would have to read that out to a site visitor one letter at a time, while other visitors may just find the sight of it unpolished.
• While it is sometimes ok to link an entire sentence, less is usually better, and you should never link more than that.

The Title

When a user hovers their cursor over the link, the text in the title attribute will appear as a tooltip. The title of a link can provide additional information about the link. For example, if a sentence says "The students published a three-page report on their project" you might link "Three-page report on their project." An appropriate title would then be the formal name of the report. This helps visitors know where a URL will send them, and therefore if they reach a different destination through a redirect. The title can also provide context to a URL for those using screen readers when the text of a link falls short.

Color Contrast and Accessibility

We already discussed some ways to make your links accessible for screen reader technology. However, there are other considerations to make. Mason follows WCAG guidelines for how to format your site to make it accessible. To meet those standards, URLs must follow certain visual standards:

• Links must use a non-color indicator, such as an underline, to indicate they are different from the surrounding text.
• The contrast ratio between the surrounding text and the background must be at least 4.5:1
• The contrast ratio between the link and the background must be at least 4.5:1
• The contrast ratio between the link and the surrounding text must be at least 3:1.

Check What You Type

The SiteMasonry team helps Content Collaborators monitor broken links via tools like Dubbot that can check for 404 errors (broken links) for you. We see a few common trends when reviewing results on Dubbot involving links that are copied and pasted in a few unique situations.

Microsoft Outlook

When you send a link via Microsoft Outlook, it is run through a safety protocol that, as a side effect, changes the link you get when you copy the link or text directly from an email into another location. This results in a very messy and long URL that does not tell visitors where it takes them to. On top of that, Outlook URLs tend to expire, rendering your link broken after a few weeks.

If you want to copy over a link from an email, open the link yourself first. Then copy the URL from the site itself. This will remove all the special formatting.

Blackboard Links

In order to get a permanent link to a file hosted by Blackboard, you need to follow very specific steps. You can't just copy the URL out of your browser window, as that URL is specific to you. Make sure you get the permanent link for your Blackboard file and set the file to be viewable by the general public. We've placed these steps in a separate tutorial on Blackboard URLs.

In conclusion, following best practices for links on your web pages can help improve the user experience and make your site more accessible and navigable. By using descriptive and relevant anchor text, implementing internal and external linking, using proper formatting, and testing your links, you can create an effective and user-friendly website that provides value to your audience.