What are Link Rel Attributes?
The rel attribute tells the browser "what kind of relationship" your page has with the linked page.
Different Rel Values Explained:
rel value | What it means | When to use |
|---|---|---|
| "Don't let the new page control my page" | For ALL external links with |
| "Don't tell the other website where you came from" | For privacy, when you don't want to share your address |
| "Search engines, don't give credit to this link" | For paid ads, untrusted links, or user comments |
| "Hey browser, start connecting to this server early" | For important external resources (fonts, APIs) |
| "Load this resource early because you'll need it" | For important CSS, fonts, or hero images |
Examples:
1<!-- Security: ALWAYS use for external links opening in new tab -->
2<a href="https://othersite.com" target="_blank" rel="noopener noreferrer">External Link</a>
3
4<!-- SEO: Don't give link credit (sponsored or untrusted) -->
5<a href="https://sponsored.com" rel="nofollow">Sponsored Ad</a>
6
7<!-- Performance: Connect early to important servers -->
8<link rel="preconnect" href="https://fonts.googleapis.com">
9<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
11<!-- Preload important resources -->
12<link rel="preload" href="style.css" as="style">
13<link rel="preload" href="hero-image.jpg" as="image">Why noopener is important:
Without noopener: The new page can control your page (change location, inject code, steal data). This is a security risk.
With noopener: The new page runs in isolation. It cannot touch your page.
Why nofollow is important for SEO:
Tells Google "I don't endorse this link" — use for:
Paid advertisements
Untrusted user comments
Links you don't want to pass "link juice" to
Affiliate links