2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at

Astroで構造化データ(JSON-LD)を使う場合、単純な固定の文字列でよければ普通に書けます。

<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebSite",
        .
        .
        .
    }
</script>

しかし、構造化データの中で変数を使いたい場合は、少し工夫する必要があります。変数をそのまま書こうとすると、変数名が出力されてしまいます。

構造化データの中で変数を使う方法

次のように書くことで、Astroで構造化データの中で変数を使えます。

.envSITE_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()の代わりにテンプレートリテラルを使うこともできます。

参考

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?