記事を執筆していると、「自分のサイト内の他のページへの内部リンクは同じ画面（タブ）のまま遷移させたいけれど、よそのサイトへ飛ぶ外部リンクに関しては新しいタブで開きたい」と思う場面が多くありますよね。

通常、Markdownを普通のHTMLに展開した場合、すべて同じタブでリンクが開いてしまいます。そのため新しいタブで開けるようにするには毎回手動で以下のようなHTMLを直接書くしかありませんでした。

<a href="https://example.com" target="_blank" rel="noopener">リンク</a>

…しかし記事を書く度にこれを挿入するのは面倒すぎます😫

そこで役に立つのが HugoのRender Hooks（レンダーフック） という強力な機能です。この機能を設定して、リンクの動作指定（内部か外部かの判定）を全自動化してしまいましょう！

Render Hooksとは？
Markdownの変換ルールを自由にカスタマイズできる強力な機能です。詳しくは 【解説】Markdownの変換を自由自在に！Render Hooksとは？ をご覧ください。

設定方法

テーマフォルダの中に、以下のフォルダとファイルを作成します。

作成するファイル:
themes/my-tutorial-theme/layouts/_markup/render-link.html
(※Hugo v0.145以前は layouts/_default/_markup/render-link.html に配置する仕様でした)

中身のコード:

```html
{{ $isExternal := strings.HasPrefix .Destination "http" }}
{{ if strings.HasPrefix .Destination site.BaseURL }}
  {{ $isExternal = false }}
{{ end }}
<a href="{{ .Destination | safeURL }}"
  {{ with .Title }} title="{{ . }}"{{ end }}
  {{ if $isExternal }} target="_blank" rel="noopener"{{ end }}>
  {{ .Text | safeHTML }}
</a>

何をしているの？

  1. strings.HasPrefix .Destination "http"
    👉 URLが http で始まっているかチェックします（この時点では自分自身への絶対パスも含みます）。
  2. strings.HasPrefix .Destination site.BaseURL
    👉 「自分のサイトのURL（BaseURL）」で始まっているか？ をチェックします。
    もし自分のサイトなら、$isExternal（外部フラグ）を false にして、無効化します。
  3. 最終的に「httpで始まり、かつ自分のサイトではない」場合だけ、target="_blank" をつけます。

これで、Markdownで ref 機能を使って絶対パスの内部リンクができても、勝手に別タブになるのを防げます！

運用ルール

この設定を使う場合、リンクの書き方は以下のルールで統一するのがおすすめです。

  • 🔴 外部リンク: https://... から書く
    • 👉 自動で「新しいタブ」になります。
  • 🟢 内部リンク: / から始まるパスで書く（またはファイル名指定）

Render Hooksでリンクの挙動を自動化・最適化しよう

外部リンクの別タブ処理をHugo側で自動化させることで、執筆時は純粋にMarkdownの簡潔な記法に集中できるようになり、面倒なHTMLタグを手入力する手間や記述ミスが完全になくなります。

render-link.html を一つテーマ内に追加するだけで、読者にとって回遊しやすいUX（ユーザー体験）と、あなた自身の快適な執筆体験が同時に手に入るため、非常におすすめのカスタマイズです！🎉