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.
Table of Contents
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.
Leave a Reply