User experience (UX) has become an important Google ranking signal, so ensuring that your website meets the standards is more important than ever. Good navigation helps improve the user experience, so it’s best to always pay attention to the hyperlinks on your website.
Hyperlinks allow users to “travel” between pages. When the mouse cursor changes from an arrow to a hand when hovering over the links, you will know that the links are active. You can attach HTML links to various page elements, including text, images, etc.
In this guide, we will explore how hyperlinks (called “HTML links” or “a href links”) work, why it is important to master hyperlinks, and how to use site review tools to find and fix incorrect hyperlinks.
Why are HTML links important?
Users search the Internet purposefully; they are looking for answers, products, guidance, etc. Thanks to your SEO efforts, Google has put you in their sight.
After capturing visitors, you need to easily guide them through your website so that their user experience is pleasant. Your HTML link is very important to direct your users from one page on your website to another.
Good HTML links will increase the user’s session time and may lead to more pages visited per session-these two indicators are very important for network analysis.
The anchor tag (or “a href” or “link” tag) includes the opening tag, any tag attributes, anchor text or objects, and the closing tag. E.g:
<a href="url">Link text or object</a>.
What is the HREF attribute link?
href attribute link (“HHypertext referenceserence”) indicates the relationship between the page and the search engine.
href is an attribute of the anchor tag and contains two components:
- URL (actual link) and
- Clickable text or objects that users will see on the page (called “anchor text)
<a href="https://www.semrush.com/">Visit Semrush!</a>
After clicking Where can the HTML link be opened?
When a user clicks on your HTML link, the linked page may open in the same browser window or tab. Unless you use code to specify how the link is displayed, this is the default setting.
However, if you have downloaded content or want the page to open in a different window or tab, you can use target attributes such as “_blank”.
The most common target attribute values are:
- _Self: The page/document opens in the same window
<a href="https://www.semrush.com/"target=_self">Visit Semrush!</a>
- _Blank = Open the document/page in a new window
<a href="https://www.semrush.com/"target=_blank">Visit Semrush!</a>
Relative and absolute URL
Your URL structure helps Google effectively crawl your website. You might use one of two common URL structure types: relative and absolute.
Relative links use part of the URL and are mainly used for internal links. The links are located on the same site and therefore belong to the same root domain. They look like this:
<a href="blog/hrefland-attribute-101/">hreflang attribute 101</a>.
However, absolute links use complete website links, including the domain name of the website:
<a href=" https://www.semrush.com/">Visit Semrush!</a>.
When to use relative URLs
When you want to link to a page on your website, you can use a relative URL. You will use the “slug” of the URL in the link.
Some advantages of using relative URLs include:
- Quickly transfer to a new domain (you don’t need to update every URL)
- Faster page load time (Google ranking factor
When to use absolute URLs
If you send users to an external page (ie away from your website), you will use an absolute URL.
Some of the benefits of using absolute URLs include:
- The link always points to the correct URL (Google will always know where to go)
- The Google web crawler can scan these URLs more easily (important for indexing)
When you hover your mouse over anchor text, images, buttons, etc., you will find HTML links on the web page, and the pointer will turn into a hand.
By default, the link is displayed as:
- Underline and blue (if you haven’t visited the link)
- Underline and purple (you have visited the link)
- Underline and red (active link)
This is an example of a copy of a website with a hyperlink. The words highlighted in blue contain hyperlinks:
Please note that if the color of your website link is too similar to the background color of your website, you can change the color of the link to make it stand out.
Companies with branded colors may know the hexadecimal code of the color.Use the hexadecimal code to modify your HTML tags (anchor tags), as shown below:
<a href="https://www.semrush.com/" style="color:#SS000;">Here's the modified link!</a>
If you don’t have a hexadecimal color code, you can choose about 140 named colors. You can add the color itself instead of the hexadecimal code, such as “blue” or “red”:
<a href="https://www.semrush.com/" style="color:red;">Red Link</a>
Types of hyperlinks
There are several ways to use hyperlinks to create a simple navigation experience on your website. Think of a link as a connection between one resource and another, whether it is a web page, document, form, etc.
Let’s take a look at the most common types of hyperlinks you will find on the website:
- image link: You can hyperlink An image To another resource. For example, you can hyperlink a product image to its product page.
You might use a link structure similar to this:
<img src="semrush.jpg" alt="semrush logo" style="width:100px;height:100px;">
- Email and phone link: You can use these links when you want users to contact you directly. On mobile devices, these types of links lead users to direct actions: dial your phone number or draft an email to you.
For email addresses, you add mailto: in the href attribute as shown below:
<a href="mailto:[email protected]">Semrush email</a>
For phone numbers, you add tel: in the href attribute:
<a href="tel:+61 1800 934 242">+61 1800 934 242</a>
- Button link: The hyperlink button is a popular web design feature that can be used to add a call to action (CTA) to your website. CTA tells your users what to do: contact us, download brochures, read more, etc.
One way to add a link to a button is to wrap the button element in a link:
<a href='https://www.semrush.com/'><button>Linking to semrush.com</button></a>
Hreflang attribute Show search engines the relationship between pages in different languages on your website. If your website is aimed at a multi-national audience, you need to add the hreflang attribute.
Here are some examples:
<link rel="alternate" hreflang="en-us" href="http://www.example.com/usa/" />
<link rel="alternate" hreflang="en-ca" href="http://www.example.com/ca/" />
How to identify link issues in Semrush
When Google bots try to scan your website, if they find multiple broken links, they may stop moving forward. Therefore, if Google chooses to index your site, it will be more difficult and take longer.
This Website audit tool Can help you identify any errors in links on the website. It includes more than 120 techniques and page checks for finding common errors.
Before using the site audit tool, you need to create a project for your domain.
Step 1: After creating the project, launch the site audit tool from the project dashboard:
Use the panel to configure the crawling scope and website access permissions of the tool.
After the review is complete, click the Questions tab:
Filter the questions to find any link errors. If you are not sure what the error means, the tool contains explanations and suggestions on how to solve the problem (“why and how to solve it”).
Find and repair broken links
Use site audit tools
Good hyperlinks can make it easier to browse and crawl your website. Regardless of your link structure, it is important to find and update broken links as soon as possible.
Use site audit tools to find any broken or erroneous links, and keep abreast of any potential technical errors.