Inserting Hyperlinks in Posts and Pages

Hyperlinks on your web page should be composed of brief but meaningful text that provides information about where the link goes when read out of context. A descriptive link gives as much information to as many different users as possible.  Remember, visitors to your site may or may not be familiar with you and your program. They may or may not be familiar with the topic about which you are writing. They may or may not be using assistive technologies to access your web content (i.e. visually impaired user using screen reading software).

Descriptive hyperlinks are key to practicing universal usability on your website.

Do not use “Click here”

Make your hyperlinks descriptive and informative so they clearly define the content of the linked page.  When composting your links, ask yourself the following questions:

  • Will my hyperlinks make sense if they were read out of context?
  • Do my links tell readers where they will end up if they follow the links?

For example:

Don’t do this:         
Click here
to learn more about UW-Extension.

Instead, do this:
Learn more about UW-Extension.

On a well-designed, accessible site, a screen reader user could browse by hyperlink title. For example, a visually impaired reader could instruct his or her screen reading software to read a list of all the hyperlinks on a given web page.  Hearing “click here,” “click here,” “click here” is not useful.

Descriptive hyperlinks, on the other hand, are useful and accessible because they give the user the ability to ‘skim read’ the document in order to find the information he or she is looking for.

One more reason not to use “click here” links is confusing search engine (Google) results. Search engines like Google automatically catalog our websites using words contained within our posts and pages. If you are using “click here” links, it is likely that they will be categorized incorrectly and missed on search results.

For more examples of ways to rewrite “click here” links, see “Don’t use “click here” as link textfrom W3C Quality Assurance Tips for Webmasters.

Creating meaningful hyperlinks

When you create a hyperlink on your WordPress site, make sure the clickable text is descriptive and meaningful. With your mouse, highlight the meaningful text that will become the hyperlink, and then use the Insert/edit link quicktag to set up the hyperlink.

Insert hyperlink

The Insert/edit link dialog box will open. Insert the destination URL for the new link (or copy and paste it from a browser window.) Next, you will see that WordPress has automatically brought in the text you have highlighted and placed it into the Link Text box.

Link Text Box

Note: Changing the text in the Link Text box, will change the text that is displayed for the link in the published post. Be specific and use keywords that have to do with the page you’re linking to.

Insert and Edit link window

If you need to link to a page within your existing WordPress site, then instead of typing in a new URL, click the arrow next to “…or link to existing content” to see existing pages within your site. Select the existing page you want to link to and you’ll notice that WordPress automatically completes the URL and Link Text fields for you at the top of the Insert Link dialog box. Double-check that the link’s text is descriptive and edit it if necessary.

When finished click the blue Add Link button at the bottom of the dialog box.

The selected text in your post will now be formatted as a descriptive hyperlink.

Descriptive Hyperlink

Creating an email hyperlink

The syntax for creating a hyperlink that opens an email link is slightly different than a typical hyperlink.  It does not use the typical “http://” beginning.

  1. In the body of your post/page, add the descriptive text for the link that will be the email link. For example, the email address, “contact us” or “email Lorem County”, etc.email link image 1
  2. Highlight the descriptive text, click the insert hyperlink button.
  3. Click insert hyperlink.
  4. Delete the “http://” in the URL field.
    email link image 2
  5. Type mailto:EmailAddress, ex., mailto:molly.immendorf@ces.uwex.edu, in the URL field.
    email link image 3
  6. Click Add Link.