Tag Archives: agency

What’s rel=”noopener” in WordPress & How to Remove It

wordpress

When you upgrade your WordPress to 4.7.4 version or newer, you will notice a new tag rel=”noopener”. It is located alongside the target=”_blank” tag in the HTML editor. When you make them open in a new tab, the tag is automatically added to all internal and external links.

As a web developer, you may be wondering what this tag does? Does it affect your websites negatively in any way? So, in this article we will discuss what is rel=”noopener” in WordPress and how to remove it. If you curious about rel=”noopener”, you better check this out!

What is rel=”noopener”?
Even though, it may sound a bit suspicious, but it is actually a security fix that prevent malicious links from taking control over an opened tab. Usually, window.opener Javascript object is used to control a parent window using a child window. With this feature, hackers can switch user’s currently opened website with a fake one and steal information, such as login details. Therefore, to prevent this, rel=”noopener” blocks the use of the window.opener Javascript object. If window.opener does not work, then a tab can’t control another tab.

In fact, on 23rd November 2016, this security fix was added in TinyMCE plugin. Actually, WordPress uses TinyMCE as its text editor; it also got updated with this feature in WordPress version 4.7.4.

Is It Bad for your Website?
You may relieve as it doesn’t have any bad impact to your site. Some WordPress users may be making all internal and external links “nofollow”, which cause bad score for SEO. But, the fact is rel=”noopener”is just an instruction for the user’s browser to cease the use of the window.opener Javascript object.

This is because SEO relates to search engines and they don’t interact with rel=”noopener” tag. It works the same for analytics software that completely ignores this tag.

At first, this might have been a bit of a problem when WordPress added rel=”noopener noreferrer” tag before the fix was released with WordPress version 4.7.4. In the older version, “noreferrer” blocked the link from knowing where it actually came from.

Even though, it may not affect your SEO, but it may affect some of the analytics tools and affiliate programs. However, in WordPress latest version, “noreferrer” tag has been removed , so you should have no problem with rel=”noopener” tag. SYou only need to make sure you have updated to the latest version of WordPress.

How to remove rel=”noopener”
As it is stated above, rel=”noopener” doesn’t affect SEO. It also has no impact on analytics tools, and affiliate links also won’t break. It works to protect your users from any potential malicious links that could hijack their tabs. In fact, it only will stop when you want to use the window.opener Javascript object for any purpose.

As it is integrated into the WordPress text editor, removing rel=”noopener”can be a bit difficult. Moreover, it will be added back again when you save the document, Even if you manually remove it from the HTML code. So, the best solution is to disable this feature from the TinyMCE plugin itself.

However, you may need to add some lines of code in the functions.php file of your WordPress theme. In the functions.php file, copy and paste the below mentioned code and save it:

// Note that this intentionally disables a tinyMCE security feature.
// Use of this code is NOT

recommended.add_filter(‘tiny_mce_before_init’,’tinymce_allow_unsafe_link_target’);

function tinymce_allow_unsafe_link_target( $mceInit ) {
    $mceInit[‘allow_unsafe_link_target’]=true;
    return $mceInit;
}

This will stop WordPress from automatically adding rel=”noopener” tag in your posts. But, you may need to mannually remove the added tags from posts saved after WordPress 4.7.4 update.

 

In Summary
Even though, it may sound suspicious but you have nothing to be afraid of on the rel=”noopener’ tag. It will secure your website visitors. But, you should embrace this new edition of security feature, if you want to use the window.opener feature.

 

4 Tips of Desktop-First Design for Responsive Websites

responsive website

Nowadays, where all attention is in mobile-first design, desktop-first design seems less popular. This is because many designers aim to create responsive design. However, starting from desktop is not the bad. In fact, this design works better if you want to create feature-rich designs. This workflow may not as popular as mobile-first design, but as a web designer, you should know why you also need to put attention on desktop-first design.

The Benefits of Desktop-First
Generally, desktop first is something that everyone made websites up until the responsive era. Today, with so many people talk about mobile first, there are still so many reasons why we have to stick with the desktop approach, especially if you want your site have tons of detailed features on larger screens.

Here are some benefits of the desktop-first ideologies.

  • You get to see all major features at once
  • It lets you imagine all the largest possibilities for your design first
  • It’s the best strategy if your audience mostly uses desktops/laptops

You must think that any modern websites like Twitter puts mobile-first design. However, even Twitter have lots of extra features that come along with the desktop experience. Therefore, you need to create feature-rich websites that depend on a strong desktop design. This is perhaps the biggest benefit of a desktop-first layout. You get to see the site as it should look with all of its accessories. These extras can be removed for smaller screens as you test and find certain features just don’t carry over well.

It’s easy to consider dynamic features more like an afterthought with a mobile-first approach. But, you’re treating these features as the primary display method with a desktop-first approach, then choosing to remove them as needed.

No one is better than other, so you can try both of them to see what you prefer. Working from smaller area or starting from desktop then working smaller.

Supporting All Browsers

Handling browser support is the trickiest part of desktop-first design. In fact, it is reasonable for all mobile browsers to basically support the same features as desktop browsers. The main difference can be seen not in HTML/CSS support, but rather in touch-based support.

So, it is important to consider how the different browsers work, what they support, and how to handle the user’s touch-based input when moving from desktop to mobile. A few good rules to consider while scaling down your desktop-first design:

  • Increase body text size so links are easier to tap
  • Make tappable elements larger
  • Add JavaScript libraries that support swipe motions

Graceful Degradation
Graceful degradation is a process that builds all your website’s top features with everything you want on the site, and then if other browsers can’t support them you revert to fallback methods. A common example of this tactic is the removal of dropdown sliding menus for mobile. However, rather a change in user experience, this isn’t strictly graceful degradation. On the other hand, you’re searching for JS functions or CSS3 properties that literally cannot be supported in a certain browser.

When Desktop Takes Priority
After all, you can think about designing a site where desktop takes priority over mobile. If the mobile experience can be incredibly simple but the desktop experience needs to be detailed and dynamic. But, you also should have a plan for the mobile site with at least a vague idea in mind of how it’ll look.