Edited at

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

More than 1 year has passed since last update.

久々にブログの 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": "+1-401-555-1212",
"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 レンダリング時に何か余計な気を使ってくれているっぽいですね。小一時間ムダにしました :disappointed:


参考になった記事