LLM Best Practices

HTML: Link rel Attribute

4 min read

View markdown source

Overview

The rel attribute on <a> and <link> elements declares the relationship between the current document and the linked resource. Browsers use it to make security decisions, prioritize resource loading, and build the prefetch queue. Search engines use it to decide which links to follow and how to credit them.

Add rel="noopener" to any <a target="_blank">. Without it, the opened page can access window.opener and redirect your tab. This is a real attack vector on phishing sites.

<a href="https://example.com" target="_blank" rel="noopener">Open docs</a>

Add noreferrer when you also want to suppress the Referer header. noreferrer implies noopener, so you can use either alone or both together. Prefer noopener noreferrer for external links; it covers both the security and the privacy case.

Search engines read rel to decide how much weight to pass through a link.

  • nofollow: you are not vouching for the destination. Use it on paid links that do not qualify as sponsored, on comment links you do not control, and on any link where you are uncertain.
  • sponsored: the link is part of a paid placement or advertisement. Required by Google’s guidelines for paid links.
  • ugc (user-generated content): the link appears in user-submitted content, such as a forum post or comment.
<a href="https://partner.com" rel="sponsored">Sponsored partner</a>
<a href="https://forum.example.com/post/1" rel="ugc">Forum source</a>

These attributes do not prevent crawling. They signal that you are not passing ranking benefit. Combine with noopener on external links that also open in a new tab.

Preload for critical resources needed on the current page

<link rel="preload"> fetches a resource at high priority as soon as the browser parses the <head>, before it discovers the resource in the body. Use it for the hero image, the web font used above the fold, or a critical script loaded late in the document.

<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/hero-800.jpg" as="image" />

Always set as to the correct resource type. Without it, the browser fetches at wrong priority and may double-fetch. See html-multimedia for image preloading rules alongside <picture>.

Prefetch for resources needed on the next page

<link rel="prefetch"> fetches a resource at idle priority for use on a future navigation. Use it when you are confident the user will visit the next page soon, such as the next step in an onboarding flow.

<link rel="prefetch" href="/step-2" as="document" />

Do not prefetch speculatively for every possible next page. Wasted bytes hurt users on metered connections.

Preconnect and dns-prefetch to eliminate connection latency

<link rel="preconnect"> establishes the TCP connection, TLS handshake, and DNS lookup for a third-party origin early. Use it for fonts.googleapis.com, your CDN, or an analytics endpoint you know will be needed.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<link rel="dns-prefetch"> runs only the DNS lookup, with lower overhead. Use it as a fallback for browsers that do not support preconnect, or for origins you might need but are less certain about.

See html-head-tags for the canonical placement rules. The short version: put <link rel="canonical" href="https://example.com/this-page"> in every page’s <head>.

Manifest registers a Progressive Web App

<link rel="manifest" href="/manifest.json"> points the browser to the Web App Manifest. The manifest file declares the app name, icons, theme colors, and start URL for PWA installation prompts.

Alternate for feeds, translations, and pagination

  • rel="alternate" type="application/rss+xml": declares an RSS or Atom feed for the page.
  • rel="alternate" hreflang="fr": declares a French translation for international SEO.
  • rel="prev" and rel="next": pagination signals (Google deprecated these for ranking but they still help crawlers understand series).

For the full structured-data picture that pairs with these signals, see technical.

Graph View

Backlinks