Ping and rel types

Learn rel types like noopener, noreferrer, license and bookmark.

The rel attribute and new types

The rel attribute tells the link's relation. You should remember noopener from external links opened in a new tab. Now two new types: license points to a licence or copyright page, bookmark to a permanent link of a post.

Example: <a href="/license" rel="license">Licence</a> says the link goes to the licence page. <a href="/posts/first-post" rel="bookmark">Permanent link</a> says this URL is the permanent location of a post.

noopener, noreferrer and ping

With target="_blank" on external links, rel="noopener" adds security: the opened tab cannot reach the opener page's window.opener. noreferrer stops the referer information from reaching the target page; useful for privacy.

You usually write them together: rel="noopener noreferrer". The ping attribute does something else: when the link is clicked, the browser sends small background requests to listed URLs; it is mostly used to track user behaviour.

Exercise Write a safe external link

Write an external link: href goes to https://wikipedia.org and rel="noopener noreferrer" makes it safe. The link text is Wikipedia.

Show example solution

<a href="https://wikipedia.org" rel="noopener noreferrer">Wikipedia</a>

Test yourself

Which rel value points to a licence page?
- bookmark
- license
- noopener
- noreferrer
Show answer

license — Correct. license is reserved for licence and copyright pages.

Complete the rel attribute

<a href="https://wikipedia.org" target="_blank" rel="____">Wikipedia</a>

Show answer

<a href="https://wikipedia.org" target="_blank" rel="noopener noreferrer">Wikipedia</a>

Match each rel type to its meaning

noopener

Safe new tab
noreferrer

Blocks referer info
license

Points to licence page
bookmark

Permanent post link

Next lesson: Hreflang and canonical

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies