ましじめ株式会社

この記事は最終更新日から2年以上経過しています。

Astroでパンくずリストの構造化データを作る

公開日：

更新日：

スタッフブログ

こんにちは。田村です。
Astroでパンくずリスト（BreadcrumbList）の構造化データを作る機会がありましたのでメモです。

パンくずリスト（BreadcrumbList）の構造化データ を詳しく確認したい方はこちらのリンクから確認してください。

コードと使い方

StructuredDataのコンポーネントを作ります。

// StructuredData.astro

---
export interface Hierarchy {
  position: number;
  itemPath: string;
  itemName: string;
}

interface Props {
  hierarchies?: Hierarchy[];
}

const { hierarchies } = Astro.props;

const schema = {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "item": Astro.site,
      "name": "ましじめ株式会社"
    },
    ...(hierarchies
      ? hierarchies.map((hierarchy) => ({
          "@type": "ListItem",
          "position": hierarchy.position,
          "item": `${Astro.site}${hierarchy.itemPath}`,
          "name": hierarchy.itemName
        }))
      : [])
  ]
};

---

<script type="application/ld+json" set:html={JSON.stringify(schema)} />

import先で次のように使用します。

---

...

const hierarchies = [
  {
    position : 2,
    itemPath: 'blog',
    itemName: 'スタッフブログ'
  },
  {
    position : 3,
    itemPath: 'blog/entry1.html',
    itemName: '記事1'
  }
]
---

...

<StructuredData hierarchies={hierarchies} />

結果

次のような構造化データが出力されます。

<script type="application/ld+json">
{
	"@context": "http://schema.org",
	"@type": "BreadcrumbList",
	"itemListElement":
	[
	  {
		"@type": "ListItem",
		"position": 1,
		"item":
		{
		"@id": "https://masizime.com/",
		"name": "ましじめ株式会社"
		}
	  },
	  {
		"@type": "ListItem",
		"position": 2,
		"item": "https://masizime.com/blog",
		"name": "スタッフブログ"
	  },
	  {
		"@type": "ListItem",
		"position": 3,
		"item": "https://masizime.com/blog/entry1.html",
		"name": "記事1"
	  }
	]
}
</script>

この記事をシェアする