Hugoで外部リンクを新しいタブで開く方法（target="_blank"）

Hugoでブログやサイトを構築する際、外部リンクをクリックしたときに新しいタブで開くようにしたいと思うことがあるはず。HTMLなら target="_blank" を使えば簡単だが、HugoのMarkdownリンクはデフォルトでは同じタブで開かれる。
これを簡単に変更できるのがRender Hook（レンダーフック）だ。

なぜ target="_blank" を使うのか？

外部リンクを新しいタブで開くことで、ユーザーがあなたのサイトを閉じずに他のサイトを閲覧できるようになる。ユーザー体験（UX）の観点でも有効だ。

手順：外部リンクを新しいタブで開く設定

1. Render Hookファイルを作成する

下記の場所に新しいファイルを作ります：
layouts/_default/_markup/render-link.html
※フォルダが存在しない場合は作成すること。

2. 次のテンプレートを貼り付ける

作成したファイルに、以下のコードを 1行で 記述する。（改行や余計なスペースは入れないこと）

<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>

ポイント:

• http または https で始まる外部リンクだけに、target="_blank" と rel="noopener noreferrer" が自動的に追加される。
• rel="noopener noreferrer" を同時に指定するのはセキュリティ上の推奨設定。

3. 完了！

これでMarkdownから生成される外部リンクは自動的に新しいタブで開くようになる。
内部リンク（例: [Home](/)）は従来通り同じタブで開く。

補足のTips

• すべての記事に自動で適用されるため、既存のMarkdown記事を編集する必要はない。
• Render Hookをさらにカスタマイズして、特定のリンクだけ別の挙動にすることも可能。
• 以前のHugoでは設定ファイルで調整できたが、現在の標準Markdownパーサー「Goldmark」ではRender Hook方式が推奨されている。

トラブルシューティング

• 動作しない場合は、記述中に余計な改行やスペースが入っていないか、またファイルの配置パスが正しいか確認すること。
• さらに高度なカスタマイズを行いたい場合は、Hugo公式ドキュメントのRender Hooks を参照すると便利だ。

これで、あなたのHugoサイトの外部リンクはスマートに新しいタブで開くようになる。