発行:

SEO対策（実装編）

前章の概念を踏まえ、Next.js (App Router) で実際にSEO対策を行うための実装方法を解説します。

1. Metadata API（タイトル・詳細など）

App Router では、layout.tsx や page.tsx から metadata という定数をエクスポートすることで、ページの <head> タグ内の情報を設定できます。

基本的な実装

layout.tsx (ルートレイアウト) で、ベースとなる設定を行います。特に metadataBase の設定は、OGP画像のURLなどを正しく解決するために重要です。

src/app/layout.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  // metadataBaseは、OGP画像などの相対パスを解決するために必須と言っても過言ではありません
  metadataBase: new URL('https://example.com'),

  title: {
    template: '%s | My Next.js Blog',
    default: 'My Next.js Blog', // ページごとの設定がない場合
  },
  description: 'Next.jsの学習記録や技術情報を発信するブログです。',

  // 正規URL（カノニカル）の設定
  alternates: {
    canonical: '/',
  },

  openGraph: {
    title: 'My Next.js Blog',
    description: 'Next.jsの学習記録です。',
    url: 'https://example.com',
    siteName: 'My Next.js Blog',
    images: [
      {
        url: '/og-image.png', // metadataBaseがあるので相対パスでOK
        width: 1200,
        height: 630,
      },
    ],
    locale: 'ja_JP',
    type: 'website',
  },
};

各ページ (page.tsx) で metadata を定義すると、そのページの設定が優先（またはマージ）されます。

src/app/about/page.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'About Us', // "About Us | My Next.js Blog" になる
  description: '私たちについて紹介します。',
};

export default function AboutPage() {
  return <h1>About Us</h1>;
}

これで、HTMLの <title> タグや <meta name="description"> が自動的に生成されます。

2. 構造化データ (JSON-LD) 構造化データ とは、検索エンジン（ロボット）に対して、より詳細にページの内容を伝えるためのデータ形式です。

これを設定すると、検索結果に記事の公開日が出たり、レシピの評価が出たり（リッチリザルト）するようになります。

JSON-LD（ジェイソン・エルディー）という形式で書くのが一般的です。

実装方法

コンポーネント内に <script> タグを埋め込むことで実現します。

src/app/blog/[slug]/page.tsx
export default function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
  // 記事データ（タイトルや日付など）を取得する想定
  const article = {
    title: "Next.js SEO入門",
    publishedAt: "2024-01-01",
    author: "Taro Yamada",
    slug: "seo-intro"
  };

  // 構造化データを作成
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: article.title,
    datePublished: article.publishedAt,
    author: {
      '@type': 'Person',
      name: article.author,
    },
  };

  return (
    <section>
      {/* 構造化データを埋め込む */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />

      <h1>{article.title}</h1>
      <p>公開日: {article.publishedAt}</p>
      {/* 記事本文... */}
    </section>
  );
}

dangerouslySetInnerHTML という少し怖い名前のプロパティを使いますが、JSONデータを埋め込む分には安全です。
これにより、Googleのクローラーが「これは記事（Article）で、タイトルはこれで、著者は誰々だな」と明確に理解してくれます。

まとめ

Next.js での SEO 対策実装は非常にシンプルです。

  1. Metadata API : export const metadata を書くだけ。
  2. JSON-LD : 必要に応じて <script> タグで埋め込むだけ。

これらを適切に設定することで、あなたの作ったWebサイトがより多くの人に見てもらえるチャンスが広がります。
次章からは、少し発展的なトピックに入っていきます。