How to Open External Links in a New Tab (target="_blank") in Hugo

When building a blog or website with Hugo, you might want to open external links in a new browser tab, just like using target="_blank" in HTML. By default, Markdown links in Hugo open in the same tab, but you can change this easily with a render hook.

Why Use target="_blank"?

Opening external links in a new tab improves user experience by keeping your site open in the original tab, especially when linking out to other websites.

Step-by-Step: Setting Up target="_blank" for External Links

1. Create the Render Hook File

Make a new file at:
layouts/_default/_markup/render-link.html
If the folder doesn’t exist, create it.

2. Insert the Following Template

Paste this code in the file (all on one line, with no extra spaces or newlines):

<a href="{{ .Destination | safeURL }}"{{ with .Title }} title="{{ . }}"{{ end }}{{ if or (strings.HasPrefix .Destination "http") (strings.HasPrefix .Destination "https") }} target="_blank" rel="noopener noreferrer"{{ end }}>{{ .Text | safeHTML }}</a>

Tips:

• Only external links (http or https) will have target="_blank" and rel="noopener noreferrer" automatically applied.
• This is secure and recommended for modern web sites.

3. Done!

Now, every Markdown external link will open in a new tab.

Internal links (like [Home](/)) will continue to open in the same tab.

Other Tips

• It applies to all existing articles automatically.
• You can further customize the render hook for your needs.
• In older Hugo, you could tweak this with config, but Goldmark (the current standard) requires this render hook approach.

Troubleshooting

• If it doesn’t work, double-check for extra spaces, line breaks, or mistakes in file path.
• For more customization, see the official Hugo documentation .

Now your Hugo site will smartly open all external links in a new tab.