The three types of website links and how to use them
Adding links to your website gives people a convenient way to learn more about a subject that interests them. The action of clicking or tapping on a link changes the active website page, switching to a destination (called a “target”) of another page on your website or on someone else’s website. Links can be built into text, buttons, or images.
Examples
Example from AstrologyHeart.com of button links with accompanying image links.
Example of a call-to-action button link.
Example from BrennerReikiHealing.org of text links that go to other parts of the website.
Example from HRPossibilities.com of text links. One links to a page on the website and two link to external websites. The page also has a related image link that goes to an external website.
Which type of link should you use?
Traditional user interface designers who code web pages from scratch tend to advise using text links for linking to other pages and reserve buttons, which require more coding, only for actions. (See A Complete Guide to Links and Buttons and When to Use a Button or Link.) With a do-it-yourself website design platform like Squarespace, it’s just as easy to create button links as text links, so the lines blur, in my opinion, about the traditional rules about using links. Here are the guidelines I go by when deciding which type of link to use.
When to use a text link
Use a text link to lead website visitors to extra related information that provides more background, context, or details about the subject. The information you link to could be on another page of your website (an “internal” link) or on someone else’s website (an “external” link).
Examples of text links to pages on your website
Link to a Services page
Link to a photo gallery
Link to the About page from a summary on the Home page
Link to a blog post
Link to a product page or online store
Link to the Contact page
Link to a hidden page that contains more details, such as policies or a form
Examples of text links to pages on an external website
Link to an online article or resource
Link to a purchasing site
Link to a social media site
Link to a contributor’s website as a credit or attribution
Link to a professional organization, club, or group
When to use a button link
Use a button link as a bold call to action that you don’t want people to miss. A button is a design element that has a distinctive color and shape that’s easily seen, but also coordinates with the colors of your website. The text on the button (the “label”) is usually a short, command-style word or phrase, such as “Read More,” “Learn More,” “Contact Me,” “Get Started,” “Shop Now.”
I prefer to use buttons for links to pages on the same website. Because they take up space on the website page, I want buttons to promote an action that keeps people on the website rather than encouraging them to go to another website.
Examples of button links to pages on your website
A button link can be used in the same situations that a text link would be useful, but I tend to use it most often for these types of links.
Link to a Services page
Link to a product page or online store
Link to the Contact page
When to use an image link
Image links are used as an additional way to link to the information represented by the image. When a website visitor clicks or taps the image, they see the new page. I usually supplement image links with a button or text link because I’ve discovered it’s not always obvious to website visitors that an image can be a link that leads somewhere else.
Examples of image links to pages on your website
For most websites I design, image links lead to information on the same website, such as:
Specific services pages
The About page
A category of products for sale
A photo gallery
A blog post
Examples of image links to pages on an external website
Images that link to an external website are often logo images that represent the company, organization, or educational institution being linked to. Here are some reasons you might add an image that links to an external website:
Link to a description of a professional honor, award, or certification
Link to organizations with whom you have professional affiliations
Link to educational institutions from which you received degrees or training
Link to client websites
Pro tips
Here are a few guidelines I’ve developed and use with my clients’ websites.
Open external links in a new window
When you link to an external website, I recommend setting the option to open the link in a new window so your website page stays open in the original browser tab, which helps visitors find their way back to your website easily.
Make an external website name readable
When you link to a website name, make the text short and readable. Use either the company name or a shortened version of the URL, such as Kerry A. Thompson, KerryAThompson.com, or kerryathompson.com. Use the full URL (with http:// or https://) only for the actual link you’re setting.
Avoid styling text as underlined
Avoid styling text as underlined. Squarespace will automatically style text links on your website. Underlined text that isn’t an active link will confuse readers.
Check your links periodically
Occasionally check the links on your website to make sure they still work correctly. Pages on your website or external websites can be renamed or removed over time, resulting in a 404 Page Not Found error.
Specialized links
Squarespace and other builders offer other types of links that are used for special purposes.
Email links
Email links when clicked or tapped open the reader’s default mail application with the To: field filled in.
Phone links
Phone links when clicked or tapped open the dialer on a smartphone or mobile device to call the number.
File
You can upload a file, usually a PDF document, to a file link. When people click or tap the link, the file opens in the browser.
Links to specific blog posts or products
You can link to blog posts by typing the URL of your blog page and the blog post link, omitting your domain name (such as /blog/whats-the-purpose-of-your-website). You can also link to products if you have set up a store.
Links to a specific part of a page
A link to a specific part of a page on your website is known as an anchor link.
You can add anchor links in Squarespace if you have a Business plan or higher by using a Code Block. Click here for a Help article with instructions.
Links are a convenient way to direct people to other parts of your website to help them find the information they need to make a decision about hiring you. Links are also helpful for highlighting your credentials and building credibility by referencing sources of information outside your website. Follow the guidelines here to use links judiciously as additional paths to information for your website visitors.
