HugoのエイリアスでもOGPを適用したい

最近、ブログのジェネレーターをHugoに乗り換えて色々機能を見ていく中で特に便利だと思ったのがエイリアスの機能でした。一つ残念だったのがデフォルトの状態だとエイリアスのURLにはOGPのメタデータが付与されないため、例えばTwitterで投稿されたリンクがTwitterカードとして展開されないという点でした。(自分が利用しているAnubisテーマだと通常のページにはOGPメタデータはデフォルトで挿入されるようでした。)

解決策

エイリアスのテンプレートに独自の変更を入れることでメタデータを伝播させることができました。

 1<!DOCTYPE html>
 2<html>
 3
 4<head>
 5    {{ if .Page }}
 6        {{ template "_internal/opengraph.html" . }}
 7        {{ template "_internal/twitter_cards.html" . }}
 8        <title>{{ .Page.Title }}</title>
 9    {{ else }}
10        <title>{{ .Permalink }}</title>
11    {{ end }}
12    <link rel="canonical" href="{{ .Permalink }}" />
13    <meta name="robots" content="noindex">
14    <meta charset="utf-8" />
15    <meta http-equiv="refresh" content="0; url={{ .Permalink }}" />
16</head>
17
18</html>

上記のHTMLをlayouts/以下にalias.htmlとして保存することでエイリアスのURLをポストした際もメタデータをうまく伝えてくれます。Card Validator | Twitter Developers でしっかりメタデータが渡せているか確認できます。

参考

See Also