Zenn
🚀

Astroで構造化データを使う方法

2023/09/24に公開
SEO
Astro
構造化データ
jsonld
tech

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>

簡単に解説します。

  1. JSON.stringify()で構造化データを文字列化する
  2. scriptタグのset:htmlに文字列化した構造化データを指定する

set:html属性を使うことで、構造化データがエスケープされるのを防げます。また、構造化データの文字列化については、JSON.stringify()の代わりにテンプレートリテラルを使うこともできます。

参考

Discussion