nextjs製のブログに構造化データを追加する方法
構造化データとは?
構造化データとは、ページに関する情報を様々なサイトで活用できるように標準化したデータ形式で、例えばレシピページでは材料、加熱時間と加熱温度などを詳細に提供できます。
(google検索セントラルから引用)
今回導入した構造化データの種類
今回はブログということで、articleを入れてみます。
具体的な方法
1.schema-dtsのインストール
これを行うことでtsで構造化データを書く際に型補正、修正ができるので推奨します。
1#npmの場合
2npm i schema-dts
3#yarnの場合
4yarn add schema-dts
5#pnpmの場合
6pnpm i schema-dts2. page.tsxの編集
1export default async function Page() {
2 const data = await getArticleData();
3 const jsonLd: WithContext<Article> = {
4 "@context": "https://schema.org",
5 "@type": "Article",
6 headline: data.title,
7 description: data.description,
8 datePublished: data.date,
9 image: data.image,
10 author: {
11 "@type": "Person",
12 name: "chakkun1121",
13 url: "https://chakkun1121.github.io/",
14 },
15 };
16 return (
17 <>
18 <script
19 type="application/ld+json"
20 dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
21 />
22 </>
23 );
24}最後に
このようにすることでnextjs製のブログに構造化データを導入できました。