Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create HTML link that doesnt follow the link?
The nofollow attribute in HTML creates a link that doesn't pass SEO authority to the target page. When you add rel="nofollow" to a link, it tells search engines not to follow the link or transfer any ranking credit to the destination website.
Syntax
Following is the syntax to create a nofollow link −
<a href="URL" rel="nofollow">Link Text</a>
The rel attribute specifies the relationship between the current document and the linked document. When set to "nofollow", it instructs search engines not to follow the link.
Understanding Nofollow Links
The rel="nofollow" attribute serves several purposes −
SEO Control − Prevents passing link equity (PageRank) to the target page
Untrusted Content − Used for user-generated content like comments and forums
Paid Links − Required for sponsored or paid promotional links
Privacy Protection − Doesn't reveal your website as a referrer source
Basic Nofollow Link
Example
Following example demonstrates a basic nofollow link −
<!DOCTYPE html> <html> <head> <title>Nofollow Link Example</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>External Links</h2> <p>Visit our partner website:</p> <a href="https://example.com" rel="nofollow">Example Website</a> <p>This link will not pass SEO authority to the target site.</p> </body> </html>
The link appears and functions normally for users, but search engines won't follow it or pass ranking signals −
External Links Visit our partner website: Example Website (clickable link) This link will not pass SEO authority to the target site.
Nofollow vs Regular Links
Example − Comparing Link Types
Following example shows the difference between regular and nofollow links −
<!DOCTYPE html>
<html>
<head>
<title>Nofollow vs Regular Links</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; line-height: 1.6;">
<h2>Link Comparison</h2>
<div style="border: 1px solid #ccc; padding: 15px; margin: 10px 0;">
<h3>Regular Link (Dofollow)</h3>
<a href="https://tutorialspoint.com">TutorialsPoint - Regular Link</a>
<p><small>Passes SEO authority and link juice</small></p>
</div>
<div style="border: 1px solid #ccc; padding: 15px; margin: 10px 0;">
<h3>Nofollow Link</h3>
<a href="https://example.com" rel="nofollow">Example - Nofollow Link</a>
<p><small>Does not pass SEO authority</small></p>
</div>
</body>
</html>
Both links work identically for users, but search engines treat them differently −
Link Comparison Regular Link (Dofollow) TutorialsPoint - Regular Link Passes SEO authority and link juice Nofollow Link Example - Nofollow Link Does not pass SEO authority
Multiple Rel Attributes
You can combine nofollow with other rel values by separating them with spaces. Common combinations include noopener and noreferrer for security.
Example − Combined Attributes
<!DOCTYPE html>
<html>
<head>
<title>Combined Rel Attributes</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Secure External Links</h2>
<p>Sponsored content:</p>
<a href="https://sponsor-site.com" rel="nofollow sponsored" target="_blank">
Sponsored Link
</a>
<p>External reference:</p>
<a href="https://external-site.com" rel="nofollow noopener noreferrer" target="_blank">
Secure External Link
</a>
</body>
</html>
The combined attributes provide both SEO control and security benefits −
Secure External Links Sponsored content: Sponsored Link (opens in new tab) External reference: Secure External Link (opens in new tab, secure)
When to Use Nofollow Links
| Use Case | Description | Example |
|---|---|---|
| User-Generated Content | Comments, forum posts, reviews | Comment links in blog posts |
| Paid/Sponsored Links | Advertisements, sponsored content | Banner ads, paid promotions |
| Untrusted Sources | Links you don't endorse | External references you're unsure about |
| Internal Utility Pages | Login, register, terms pages | Privacy policy, sign-up forms |
JavaScript Alternative
You can also prevent link following using JavaScript by preventing the default click behavior −
Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript No-Follow Alternative</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Disabled Link with JavaScript</h2>
<a href="https://example.com" id="disabledLink">Disabled Link</a>
<p id="message"></p>
<script>
document.getElementById('disabledLink').addEventListener('click', function(e) {
e.preventDefault();
document.getElementById('message').textContent = 'Link click was prevented!';
});
</script>
</body>
</html>
This approach completely prevents the link from being followed when clicked −
Disabled Link with JavaScript Disabled Link (clicking shows message below instead of navigating) Link click was prevented!
Conclusion
The rel="nofollow" attribute creates links that don't pass SEO authority to the target page while still allowing user navigation. Use nofollow for user-generated content, paid links, and untrusted sources to maintain your website's search engine credibility and link profile quality.
457 Views
