🚀
Astroで構造化データを使う方法
Astroで構造化データ（JSON-LD）を使う場合、単純な固定の文字列でよければ普通に書けます。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
.
.
.
}
</script>
しかし、構造化データの中で変数を使いたい場合は、少し工夫する必要があります。変数をそのまま書こうとすると、変数名が出力されてしまいます。
構造化データの中で変数を使う方法
次のように書くことで、Astroで構造化データの中で変数を使えます。
※.envでSITE_NAMEを定義しているとします。
---
const schema = JSON.stringify({
"@context": "https://schema.org",
"@type": "WebSite",
name: import.meta.env.SITE_NAME,
url: Astro.site
});
---
<!-- 略 -->
<script type="application/ld+json" set:html={schema}></script>
簡単に解説します。
-
JSON.stringify()で構造化データを文字列化する -
scriptタグのset:htmlに文字列化した構造化データを指定する
set:html属性を使うことで、構造化データがエスケープされるのを防げます。また、構造化データの文字列化については、JSON.stringify()の代わりにテンプレートリテラルを使うこともできます。
Discussion