{"id":67385,"date":"2023-04-19T11:07:00","date_gmt":"2023-04-19T08:07:00","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=67385"},"modified":"2025-07-24T14:12:59","modified_gmt":"2025-07-24T11:12:59","slug":"rel-noopener","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/rel-noopener\/","title":{"rendered":"What Is rel=”noopener”?"},"content":{"rendered":"\n

What is rel=\u201dnoopener\u201d and how does it affect your WordPress site? When should you use it? These are the questions we will answer for you today. \ud83d\ude0e<\/p>\n\n\n\n\n\n\n\n

The first thing you should know is that WordPress adds the rel=\u201dnoopener\u201d<\/code> attribute automatically to all external links you add to your blog posts or pages.<\/p>\n\n\n

<\/div>\n\n\n\n

Understanding rel=noopener<\/h2>\n\n\n
\n\n\n\n

Rel=\u201dnoopener\u201d was introduced as part of the HTML5 specification and it helps protect you by preventing cross-origin exploitation. Essentially, when you use rel=\u201dnoopener\u201d<\/code> on an external link, it prevents malicious code from being able to access the page\u2019s window object.<\/p>\n\n\n<\/div><\/div>\n\n\n\n

This is important because, without it, a hacker could gain access to your site and even steal data like user information or cookies. That’s why WordPress automatically adds the rel=\u201dnoopener\u201d<\/code> attribute to any link that you want to open in a new tab.<\/p>\n\n\n\n

An example of when you would use rel=\u201dnoopener\u201d<\/code> is if your WordPress site has a blog post with an external link. If the user clicks on this link, it would open in a new tab and malicious code could have access to the page\u2019s window object (aka your website); rel=\u201dnoopener\u201d<\/code> prevents this from happening.<\/p>\n\n\n\n

\ud83d\udc49 Here\u2019s an example of a link with a rel=\u201dnoopener\u201d<\/code> tag:<\/p>\n\n\n\n

<a href=\u201dhttps:\/\/finmasters.com\/\u201d target=\"_blank\" rel=\u201dnoopener\u201d>FinMasters<\/a><\/code><\/pre>\n\n\n
<\/div>\n\n\n\n
What\u2019s the difference between noopener, noreferrer, and nofollow?<\/h2>\n\n\n\n
The rel=\u201dnoopener\u201d<\/code> attribute is used in WordPress to specify how browsers should treat external links. This ensures that any malicious code or tracking cookies on the destination site won\u2019t be able to access your WordPress website.<\/p>\n\n\n\n
The other two attributes, noreferrer<\/code> and nofollow<\/code>, are related but have different purposes. Noreferrer instructs browsers not to send referral information to the target website when clicking on the link (which also hides data in Google Analytics), while nofollow tells search engines not to index or follow the external link.<\/p>\n\n\n
<\/div>\n\n\n\n
How does rel=noopener affect your WordPress website?<\/h2>\n\n\n\n
The rel=noopener<\/code> attribute is used to prevent malicious websites from accessing certain information about the page you are currently viewing, such as its window object and parent frame. When a link with the rel=\u201dnoopener\u201d attribute is clicked on, the linked page will be opened in a new tab or window without accessing any of the information from the original page.<\/p>\n\n\n\n
Additionally, it does not<\/strong> affect your WordPress site\u2019s SEO<\/a>. In fact, having a rel=noopener<\/code> attribute on your site\u2019s links may provide SEO benefits, since Google is known to reward websites that improve their security.<\/p>\n\n\n
<\/div>\n\n\n\n