Is there a way to add custom code in Webflow to make all external links on a site "noopener" or "noreferrer" as recommended by Google Lighthouse?

Published on
September 22, 2023

Yes, it is possible to add custom code in Webflow to ensure that all external links on a site have the "noopener" or "noreferrer" attribute. This can be done by implementing the following steps:

  1. Access the settings for your Webflow project by clicking on the project name in your dashboard and selecting "Project Settings".

  2. In the Project Settings, navigate to the "Custom Code" tab.

  3. In the "Head Code" section, insert the following code snippet:

<script>    document.addEventListener("DOMContentLoaded", function() {         var links = document.querySelectorAll("a");        links.forEach(function(link) {            if (link.hostname !== window.location.hostname) {                link.rel = "noopener noreferrer";            }        });    });</script>
  1. Save your changes and publish your site to see the custom code in action.

With these steps, the custom code will add the "noopener noreferrer" attribute to all external links on your Webflow site. This helps improve security and follows Google's recommendations.

By implementing this code, you can address the recommendation provided by Google Lighthouse and enhance the overall security and performance of your website.

Additional Questions:

  1. How can I add custom code to my Webflow site?
  2. What is the purpose of the "noopener" and "noreferrer" attributes?
  3. Are there any other security considerations I should be aware of when building a website on Webflow?