YASD-TECH
YASD TECH
# Next.js

next-seo（NextSeo）

投稿日：2026/7/22

更新日：2026/7/22

ttitleImage

next-seo（NextSeo）まとめ

import { NextSeo } from 'next-seo';

1. next-seo とは

  • Next.js アプリの SEO 用メタタグを宣言的に管理するためのライブラリ。
  • <title> や <meta name="description">、OGP（Open Graph）、Twitter カード、canonical、robots などを、コンポーネントの props として書ける。
  • 素の Next.js では next/head に <meta> タグを手書きする必要があるが、next-seo を使うと 型安全かつ短い記述で済む。
npm install next-seo

2. 基本の使い方（ページ単位）

ページコンポーネント内に <NextSeo /> を置くと、そのページの <head> にメタタグが出力される。

import { NextSeo } from 'next-seo';

const Page = () => (
  <>
    <NextSeo
      title="ページタイトル"
      description="ページの説明文。検索結果に表示される。"
      canonical="https://www.example.com/page"
    />
    <p>ページ本文</p>
  </>
);

export default Page;

出力イメージ：

<title>ページタイトル</title>
<meta name="description" content="ページの説明文。検索結果に表示される。" />
<link rel="canonical" href="https://www.example.com/page" />

3. サイト全体のデフォルト設定（DefaultSeo）

  • 全ページ共通の設定は _app.tsx に DefaultSeo を置いて一括定義する。
  • 各ページの NextSeo は デフォルトを上書き（マージ） する関係になる。
// pages/_app.tsx
import { DefaultSeo } from 'next-seo';

export default function App({ Component, pageProps }) {
  return (
    <>
      <DefaultSeo
        titleTemplate="%s | サイト名"        // 各ページの title が %s に入る
        defaultTitle="サイト名"              // title 未指定ページ用
        description="サイトのデフォルト説明"
        openGraph={{
          type: 'website',
          locale: 'ja_JP',
          site_name: 'サイト名',
        }}
      />
      <Component {...pageProps} />
    </>
  );
}
  • 設定オブジェクトを next-seo.config.ts に切り出して <DefaultSeo {...SEO} /> と渡すパターンが定番。

4. 主要な props

prop 役割
title <title> タグ
titleTemplate %s を使ったタイトルの雛形（例 %s | サイト名）
description meta description
canonical canonical URL（重複コンテンツ対策）
noindex / nofollow true で robots メタタグに noindex / nofollow を出力
openGraph OGP（下記参照）
twitter Twitter カード設定
additionalMetaTags 任意の <meta> を追加
additionalLinkTags 任意の <link> を追加（favicon など）

OGP / Twitter カードの例

<NextSeo
  title="記事タイトル"
  description="記事の説明"
  openGraph={{
    url: 'https://www.example.com/articles/1',
    title: 'OGP用タイトル',          // 未指定なら title を流用
    description: 'OGP用の説明',      // 未指定なら description を流用
    images: [
      {
        url: 'https://www.example.com/og.png',
        width: 1200,
        height: 630,
        alt: 'OG画像の説明',
      },
    ],
    siteName: 'サイト名',
  }}
  twitter={{
    handle: '@handle',
    site: '@site',
    cardType: 'summary_large_image',
  }}
/>
  • SNS でシェアされたときのカード表示（画像・タイトル・説明）がこれで決まる。
  • OG 画像は 1200x630 が推奨サイズ。

検索結果に出したくないページ

<NextSeo noindex nofollow />
  • マイページや検索結果ページなど、インデックス不要なページで使う。

5. 構造化データ（JSON-LD）

next-seo は JSON-LD 用のコンポーネントも提供している。リッチリザルト対策に使う。

import { ArticleJsonLd, BreadcrumbJsonLd } from 'next-seo';

<ArticleJsonLd
  url="https://www.example.com/articles/1"
  title="記事タイトル"
  images={['https://www.example.com/og.png']}
  datePublished="2026-07-23T09:00:00+09:00"
  authorName="著者名"
  description="記事の説明"
/>
  • 他にも ProductJsonLd、FAQPageJsonLd、LocalBusinessJsonLd など多数ある。

6. 重要：App Router では基本的に使わない

  • next-seo は Pages Router（pages/ ディレクトリ）向けのライブラリ。内部で next/head を使っている。
  • App Router（app/ ディレクトリ）では、Next.js 標準の Metadata API（export const metadata / generateMetadata）を使うのが公式推奨。NextSeo は App Router のサーバーコンポーネントでは動かない。
// App Router ではこちらを使う
export const metadata = {
  title: 'ページタイトル',
  description: '説明',
  openGraph: { ... },
};
  • ただし JSON-LD 系コンポーネントは App Router でも利用可能（useAppDir={true} を付けて使う）。
  • 判断基準：
    • Pages Router のプロジェクト → next-seo が便利
    • App Router のプロジェクト → Metadata API を使う（メタタグ目的で next-seo を入れない）

7. 運用上の注意

  • DefaultSeo と各ページの NextSeo の 二重管理に注意。ページ側で指定した値が優先される。
  • canonical は動的ページで クエリパラメータを除いた正規 URL を指定する。
  • titleTemplate を使うとページ側は title="記事名" だけ書けばよくなり、サイト名の付け忘れ・重複を防げる。
  • OGP の images は絶対 URL で指定する（相対パスだと SNS 側で解決できない）。

参考

Index

  • next-seo（NextSeo）まとめ
  • 1. next-seo とは
  • 2. 基本の使い方（ページ単位）
  • 3. サイト全体のデフォルト設定（DefaultSeo）
  • 4. 主要な props
  • OGP / Twitter カードの例
  • 検索結果に出したくないページ
  • 5. 構造化データ（JSON-LD）
  • 6. 重要：App Router では基本的に使わない
  • 7. 運用上の注意
  • 参考