こんにちは。田村です。
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>この記事を書いた人
たむら しょうご
HTML&CSSコーダー
ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。
