How to make a link clickable on the website? How to optimize the link’s HTML code? These are common questions for many who are beginning to optimize their website.
In this post, you will learn the basic HTML code for a link and how to create both SEO- and user-friendly links.
How to link a website?
To create a clickable link that links to another web page, you only need to add a single tag to the HTML code.
We start by seeing what an HTML code for a link looks like:
<a href=”link this page here “> Enter anchor text here </a>
- The black text illustrates the link tag in its basic form.
- The green text, i.e. between quotes, is where you place the link where you want to link.
- The blue text between <a> and </a> is where you type the link’s anchor text. It is thus the visible text on the page that links to the URL.
Below you see an example of the same code for this link: Digital Marketing Tomatoes?
<a href="https://digitalmarketingtomatoes.com/ "> Digital Marketing Tomatoes </a>
This is the basic form of a link.
How to make a link that opens in a new tab or window
Sometimes you may want links to open in a new tab or window.
In some cases, links that open in a new tab may benefit usability, while they may have the opposite effect in other cases. For example, I usually do this when I link to other sites so that the visitor will find their way back to my page.
To create such a link, you only need to add the target = “_ blank” code into the first tag <a>. If we apply this in the link we looked at before, it will look like this:
<a href="https://digitalmarketingtomatoes.com/ " target="_blank"> Digital Marketing Tomatoes </a>
With this HTML code, the link will open in another tab or window, depending on which browser the visitor uses.
How to make a nofollow link (affects SEO)
First of all, what is a nofollow link?
In short, a nofollow link means that Google and other search engines do not pass value (PageRank) from the page that links to another page. It is a rel attribute that can also be included in the <a> tag.
When building links on other websites, you want to get regular follow links that lead to your page, as they convey link value that can improve your SEO performance.
However, there are situations where you need to make sure that outbound links from your site are nofollow, so as not to transfer PageRank to irrelevant web pages.
To make a nofollow link, you only need to place the rel =” nofollow” attribute in the <a> tag as follows:
<a href="https://digitalmarketingtomatoes.com/ " rel="nofollow"> Digital Marketing Tomatoes </a>
Originally, this rel attribute was created to prevent the manipulation of PageRank with links to blog comments. It, therefore, pays to use the attribute for the following links, among other things:
- Links in the comments section of your blog or web pages.
- Advertising links and banners to other pages.
- Links to domains with low value (Domain authority / Domain rating) or “less relevant links”.
What do “noopener” and “noreferrer” link tags mean then?
In previous WordPress versions, “noopener” and “noreferrer” were automatically included in links. However, WordPress removed these in later updates.
The tags should not negatively affect your SEO in any way. These are basically to make the web more secure for the user by minimizing the risk of being hacked.
These are entered in the same way as the nofollow link, for example by including rel = “noopener” in the <a> tag.
I hope these tips have helped you understand how links work and how you can create links.