なんか SEO によさそうなので、この Next.js のブログで構造化データ (JSON-LD) に対応してみました。
目次
実装
pages ディレクトリ時代は「Seo」みたいなコンポーネントで page title や description でメタ情報を設定するのが主流だったと思いますが、今は <NextHead> が非推奨となっており、Metadata API を使ってメタ情報を設定します。
型定義ファイルの導入
型ファイルがあった方が安心なので、Google が作っている schema-dts というパッケージをインストールします。
$ yarn add schema-dts
// or
$ npm i schema-dtsページへ JSON-LD を追加
記事表示部分のコンポーネントへ追加しました。
import {
Article as JsonLDArticle,
WebPage as JsonLDWebPage,
WithContext,
} from 'schema-dts';
export default function Article({ data, slug, page = false }: Props) {
const jsonLd: WithContext<JsonLDArticle | JsonLDWebPage> = {
'@context': 'https://schema.org',
'@type': !page ? 'Article' : 'WebPage',
name: data.title,
headline: data.title,
description: data.description,
image: `${process.env.NEXT_PUBLIC_BASE_URL}/img/icon_r.webp`,
datePublished: data.publishedAt,
dateModified: data.updatedAt,
url: `${process.env.NEXT_PUBLIC_BASE_URL}${
!page ? '/article' : ''
}/${slug}`,
mainEntityOfPage: `${process.env.NEXT_PUBLIC_BASE_URL}${
!page ? '/article' : ''
}/${slug}`,
author: {
'@type': 'Person',
name: 'Khsmty',
url: process.env.NEXT_PUBLIC_BASE_URL,
},
publisher: {
'@type': 'Organization',
name: 'Khsmty',
logo: {
'@type': 'ImageObject',
url: `${process.env.NEXT_PUBLIC_BASE_URL}/img/icon_r.webp`,
},
},
};
return (
<article>
<script
key="json-ld"
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
// 省略...
</article>
);
});こんな感じになりました。
image をどうするか悩みました。このブログはアイキャッチを絵文字で表現しているので、設定できる画像がないです。。かといって省略したら警告が出るので、とりあえずアイコンを設定しておきました。
そのうち satori とかで動的 OGP を作りたい。
実際のコードは以下にあるので、興味があれば見てみてください↓
https://github.com/Khsmty/Khsmty.com/blob/main/components/Article/index.tsx
検証
Google の Rich Results Test でこのサイトの記事ページを検証してみました。
いい感じにデータが並んでいます。設定できてそうです。
コメント