Is there a way to change the external links in Webflow to "noopener" instead of "target = blank" to comply with best practices according to Lighthouse?

Published on
September 22, 2023

Yes, there is a way to change the external links in Webflow to use "noopener" instead of "target = _blank" in order to comply with best practices according to Lighthouse. Lighthouse is a tool developed by Google that helps you improve the performance, accessibility, and SEO of your website.

To achieve this in Webflow, you can follow these steps:

  1. Select the link element: In the Webflow Designer, select the external link that you want to modify.

  2. Open the link settings: Once the link is selected, go to the "Settings" panel on the right-hand side of the Designer.

  3. Change the link type: Under the "Settings" panel, go to the "Link Settings" section. By default, the link type is set to "External URL (opens in new tab)". Click on the dropdown menu and select "Custom URL".

  4. Add the custom URL: After selecting "Custom URL", an input field will appear. Enter the URL of the external website that you want to link to.

  5. Add rel attribute: To add the "noopener" attribute, you will need to utilize the HTML embed feature in Webflow. Drag and drop an HTML embed element onto the canvas and place it inside the custom link element. You can find the HTML embed element in the Add panel on the left-hand side of the Designer.

  6. Insert the rel attribute: Double-click on the HTML embed element and a code editor will open. Inside the code editor, add the following HTML code:

<a rel="noopener" href="URL_OF_EXTERNAL_SITE" target="_blank"></a>

Replace "URL_OF_EXTERNAL_SITE" with the actual URL of the external site you want to link to.

  1. Publish the changes: Once you have made the necessary modifications, publish your changes in Webflow to make them live on your website.

By following these steps, you will have replaced the default "target=_blank" attribute with "noopener" for external links in Webflow. This helps improve the security and performance of your website, as it prevents potential security vulnerabilities and ensures a better user experience.

Please note that this workaround is a manual process for each external link and cannot be applied globally to all external links in your Webflow project.

Additional Questions:

  1. How do I add an external link in Webflow?
  2. Can I style external links differently than internal links in Webflow?
  3. Are there other ways to optimize my Webflow website for better performance according to Lighthouse?