Hugo で JSON-LD 内の URL がなぜかエスケープされる問題

久々にブログの Hugo テンプレートをいじって JSON-LD に対応させようとして、ハマりました。バージョンは Hugo-0.18.1-windows_amd64 です。

エスケープ問題

url 属性に .Permalink を当てはめようとすると、普通に書けば以下のようになると思います。

partials/json-ld.html

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Corporation",
  "url": "{{ .Permalink }}",
  "contactPoint": [{
    "@type": "ContactPoint",
    "telephone": "[phone]",
    "contactType": "customer service"
  }]
}
</script>

しかし、そのレンダリング結果には余計なURLエスケープが入ってしまいます。

<script type="application/ld+json">
{
  ...
  "url": "http:\/\/localhost:1313\/about\/",
</script>

いろいろググると、「{{ .Permalink | safeJS }} を使え」とか「{{ printf "%s" .Permalink }} ならうまくいく」とか書かれていましたが、どれも結果は同じでした。

解法

最終的にたどり着いた解法は、「{{ .Permalink}} を " で囲わない」 でした。

partials/json-ld.html

<script type="application/ld+json">
{
  ...
  "url": {{ .Permalink }},
  ...
}
</script>

これで期待通りプレーンな URL が生成されます。

<script type="application/ld+json">
{
  ...
  "url": "http://localhost:1313/about/",
  ...
}
</script>

JSON レンダリング時に何か余計な気を使ってくれているっぽいですね。小一時間ムダにしました

参考になった記事

• HUGOで作れるCMSっぽいパーツ:関連記事・目次・JSON-LDなど - Qiita