[Joomla] How to add rel=”noopener noreferrer” to all external links

As Joomla 3.10 and Joomla 4 released, the important is security first, Google (web.dev) said that “Links to cross-origin destinations are unsafe“. All external links should be added rel=”noopener” or rel=”noreferrer” or both, and of course with target=”_blank”. So we have a short blog about how to add this attribute rel=”noopener noreferrer” to all external links as Google suggested.

If you’re using our Joomla 4 templates or use other templates, just make sure that you have an area to add Custom JS code. From our template, go to Template Settings, open tab “Custom Code”, tab “Custom JS code”, you add more JS code as below

jQuery(function($) {
    // your attr
    var $AttrRel = 'noopener noreferrer';

    // find out if link is external and add class, rel and target to it
    $('a').filter(function() {
           return this.hostname && this.hostname !== location.hostname;
    }).addClass("externalURL").attr({
        target:'_blank',
        rel: $AttrRel
    });    

});// End jQuery

As demo JS code, I set rel attribute with both “noopener noreferrer”

var $AttrRel = ‘noopener noreferrer’;

if you want to set one attribute only, just set

var $AttrRel = ‘noopener’;

or

var $AttrRel = ‘noreferrer’;

This is simple jQuery but keep all your links with rel=”noopener noreferrer”.

or if you want to make ‘nofollow’ for all external links (recommend by Google for qualify outbound links, good for SEO), just replace it with

var $AttrRel = ‘nofollow noopener noreferrer’;

or dofollow for all external links (not recommended, only apply this if you know what you’re doing)

var $AttrRel = ‘follow noopener noreferrer’;

After implementing it, you can clear your site cache and browser cache to see an update with JS code. In case you have some JS conflicts, just open the Inspect browser console and debug it. The normal bug is jQuery definition with “$”, just replace “$” with the keyword “jQuery”.

Alright, if you have any questions about JS code or assistant with this implementation, feel free let me know.

• Author
• Recent Posts

Kelvin

Hello everyone! My name is Kelvin – I’m Founder & CMO at Ltheme. I have more than 10 years in Joomla! & WordPress development, more than 4 years in Digital Marketing, SEO specialist. Everyday I make some blogs for Joomla! and WordPress, support everyone with building beauty websites based on these CMSs, help everyone from Joomla Support Board as Joomla Guru role in forum support.

Latest posts by Kelvin (see all)

• Accessible Web Design Features for Users with Low Vision, Hearing Loss, and Other Disabilities - December 18, 2024
• Top 10 Tools to Elevate Your Service Business - December 17, 2024
• Personalizing Direct Mail for Real Estate: Key Strategies to Increase Relevance - December 2, 2024