Next.js App Routerでschema-dtsを活用し、SEO強化のための構造化データを実装する方法

はじめに

SEOを向上させるために、検索エンジンに正確な情報を伝えることは重要です。その手段として、Googleが推奨する**構造化データ（Structured Data）**を活用します。

Next.jsのApp Router（app/ディレクトリ）環境で、型安全な構造化データを実装する方法を解説します。TypeScriptとschema-dtsを組み合わせて、Next.jsの最新アーキテクチャに適した構造化データの管理を行います。

schema-dtsとは？

schema-dtsは、Schema.orgの型定義をTypeScriptで利用できるライブラリです。これにより、型安全にJSON-LDフォーマットの構造化データを作成できます。

✅ schema-dtsを使うメリット

TypeScriptで型安全に構造化データを管理
コードの保守性が向上
Googleのリッチリザルト表示に対応しやすい

schema-dtsの導入手順

まず、Next.jsのプロジェクトにschema-dtsをインストールします。

npm install schema-dts

または

yarn add schema-dts

Next.js App Routerで構造化データを設定する方法

Next.jsのApp Router（app/ディレクトリ）では、サーバーコンポーネントやメタデータ管理の仕組みを活用できます。ここでは、schema-dtsを用いてSEO最適化を行います。

1. ブログ記事の構造化データを作成

Next.jsのページコンポーネントで、JSON-LDの構造化データを作成します。

構造化データの型定義

import { WithContext, Article } from "schema-dts";

export const getArticleSchema = (): WithContext<Article> => ({
 "@context": "https://schema.org",
 "@type": "Article",
 "headline": "Next.js App Routerでschema-dtsを活用し、SEO強化のための構造化データを実装する方法",
 "author": {
 "@type": "Person",
 "name": "TOMOSHIBI Dev"
 },
 "publisher": {
 "@type": "Organization",
 "name": "語りの灯火",
 "logo": {
 "@type": "ImageObject",
 "url": "https://katari-no-tomoshibi.com/logo.png"
 }
 },
 "datePublished": "2025-02-11",
 "dateModified": "2025-02-11"
});

2. Next.jsのApp Routerに適用

Next.jsのApp Routerでは、メタデータをgenerateMetadataで定義できます。構造化データは<script>タグに埋め込む形で適用します。

`app/blog/[slug]/page.tsx`（ブログ記事ページ）

import { getArticleSchema } from "@/lib/schema";
import { Metadata } from "next";

export const generateMetadata = (): Metadata => {
 return {
 title: "Next.js App Routerでschema-dtsを活用し、SEO強化のための構造化データを実装する方法",
 description: "Next.jsのApp Router環境でschema-dtsを活用し、構造化データを適用する方法を詳しく解説します。",
 };
};

export default function BlogPost() {
 const articleSchemaJson = JSON.stringify(getArticleSchema());

 return (
 <main>
 <h1>Next.js App Routerでschema-dtsを活用し、SEO強化のための構造化データを実装する方法</h1>
 <p>このページでは、schema-dtsを使った構造化データの導入方法を詳しく解説します。</p>

 <script
 type="application/ld+json"
 dangerouslySetInnerHTML={{ __html: articleSchemaJson }}
 />
 </main>
 );
}

schema-dtsの活用例

schema-dtsを使うと、さまざまな構造化データのスキーマを型安全に適用できます。

1. BlogPosting（ブログ記事）

Google検索で「リッチリザルト」に表示されやすくなるブログ記事の構造化データを適用します。

`app/blog/[slug]/page.tsx`

import { WithContext, BlogPosting } from "schema-dts";

export const getBlogSchema = (): WithContext<BlogPosting> => ({
 "@context": "https://schema.org",
 "@type": "BlogPosting",
 "headline": "Next.js App Routerでschema-dtsを活用し、SEO強化のための構造化データを実装する方法",
 "author": {
 "@type": "Person",
 "name": "TOMOSHIBI Dev"
 },
 "publisher": {
 "@type": "Organization",
 "name": "語りの灯火"
 },
 "datePublished": "2025-02-11",
 "dateModified": "2025-02-11"
});

2. BreadcrumbList（パンくずリスト）

Google検索結果にパンくずリストを表示し、サイト構造を最適化できます。

`app/components/Breadcrumb.tsx`

import { WithContext, BreadcrumbList } from "schema-dts";

export const getBreadcrumbSchema = (): WithContext<BreadcrumbList> => ({
 "@context": "https://schema.org",
 "@type": "BreadcrumbList",
 "itemListElement": [
 {
 "@type": "ListItem",
 "position": 1,
 "name": "ホーム",
 "item": "https://katari-no-tomoshibi.com/"
 },
 {
 "@type": "ListItem",
 "position": 2,
 "name": "ブログ",
 "item": "https://katari-no-tomoshibi.com/blog"
 },
 {
 "@type": "ListItem",
 "position": 3,
 "name": "Next.js App Routerでschema-dtsを活用し、SEO強化のための構造化データを実装する方法",
 "item": "https://katari-no-tomoshibi.com/blog/nextjs-schema-dts"
 }
 ]
});