External links in Eleventy

When building websites with Eleventy, you may want to ensure that external links open in a new tab and include proper attributes for privacy and accessibility. This can be achieved by adding a transform to your Eleventy configuration.

Adding a transform for external links

The following transform modifies all external links in your HTML output to include the target="_blank" and rel="noreferrer" attributes. This ensures that external links open in a new tab and prevent potential privacy risks associated with referrer leakage.

eleventyConfig.addTransform("external-links", (content, outputPath) => {
  if (outputPath.endsWith(".html")) {
    return content.replace(
      /<a href="(http[s]:\/\/)(?!www\.ludeeus\.dev)([^"]+)"/g,
      '<a href="$1$2" target="_blank" rel="noreferrer"'
    );
  }
  return content;
});

Explanation

• Regex pattern: The regular expression /<a href="(http[s]:\/\/)(?!www\.ludeeus\.dev)([^"]+)"/g matches all anchor tags with href attributes pointing to external URLs, excluding those from www.ludeeus.dev.
• target="_blank": Ensures that the link opens in a new browser tab.
• rel="noreferrer": Prevents the browser from sending the Referer header when navigating to the external link, improving privacy.

Why use this transform?

• Improved user experience: External links opening in a new tab prevent users from losing their place on your site.
• Enhanced privacy: Adding rel="noreferrer" mitigates potential privacy risks associated with referrer leakage.

When to use this transform

This transform is particularly useful for blogs, documentation sites, or any website where external links are common. It ensures a consistent and privacy-focused user experience across your site.

Additional considerations

• Always test your links to ensure they behave as expected.
• Consider using a link checker to identify broken external links.

For more information on Eleventy transforms, refer to the Eleventy documentation.