React Academy · レッスン

Metadata APIとApp RouterのSEO

staticおよびdynamic metadata objectsをexportし、ページタイトル、説明、OG tagsを設定します。

「Metadata APIとApp RouterのSEO」はCoddyKit上の無料React Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

メタデータが重要な理由

適切なメタデータ（title、description、OGタグ）は、SEOの順位やソーシャル共有時のプレビューを改善します。Next.jsのApp Routerには型安全なMetadata APIがあり、サーバー側で<head>タグを生成します。

静的メタデータのエクスポート

任意のpage.tsxまたはlayout.tsxからmetadataオブジェクトをエクスポートすると、そのセグメントに静的タグを設定できます。

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'My App',
  description: 'The best app ever built',
  keywords: ['react', 'nextjs', 'typescript'],
};

export default function Page() { return <main>Hello</main>; }

タイトルテンプレート

レイアウトでtitle.templateを使用すると、サイト名を繰り返し記述しなくても、子ページに自動的に整形されたタイトルを設定できます。

// app/layout.tsx
export const metadata: Metadata = {
  title: {
    template: '%s | My App',
    default: 'My App',
  },
};

// app/about/page.tsx
export const metadata: Metadata = {
  title: 'About', // renders as "About | My App"
};

generateMetadataによる動的メタデータ

データに基づくタグが必要なルートでは、非同期のgenerateMetadata関数をエクスポートします。この関数はparamsと親のメタデータを受け取ります。

export async function generateMetadata({ params }: { params: { id: string } }): Promise<Metadata> {
  const product = await getProduct(params.id);
  return {
    title: product.name,
    description: product.summary,
    openGraph: {
      title: product.name,
      images: [product.imageUrl],
    },
  };
}

Open Graphタグ

openGraphキーは、Facebook、LinkedIn、Slackでのソーシャル共有に使用するOGタグを設定します。

export const metadata: Metadata = {
  openGraph: {
    title: 'My Product',
    description: 'Buy now!',
    url: 'https://example.com/product',
    siteName: 'My App',
    images: [{ url: 'https://example.com/og.png', width: 1200, height: 630 }],
    type: 'website',
    locale: 'en_US',
  },
};

Twitterカードタグ

twitterキーは、ツイート内のリッチプレビューに使用するTwitter固有のカードメタデータを設定します。

twitter: {
  card: 'summary_large_image',
  title: 'My Product',
  description: 'Buy now!',
  images: ['https://example.com/twitter.png'],
  creator: '@myhandle',
},

RobotsとCanonical

robotsでクロールを制御し、canonical URLを設定して重複コンテンツによるペナルティを防ぎます。

export const metadata: Metadata = {
  robots: { index: true, follow: true, googleBot: { index: true } },
  alternates: { canonical: 'https://example.com/products' },
};

ファビコンとアイコン

予約された名前（icon.png、apple-icon.png、favicon.ico）のアイコンファイルをapp/に配置するか、metadata.iconsで宣言します。

// Convention: place app/icon.png → auto-detected as favicon

// Or declare explicitly:
export const metadata: Metadata = {
  icons: {
    icon: '/icon.png',
    apple: '/apple-icon.png',
    shortcut: '/shortcut-icon.png',
  },
};

ImageResponseによるOG画像の生成

route.tsでnext/ogのImageResponseを使用すると、JSXをPNGとしてレンダリングして動的なOG画像を生成できます。

// app/og/route.ts
import { ImageResponse } from 'next/og';

export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') ?? 'Default';
  return new ImageResponse(
    <div style={{ fontSize: 48, background: '#fff', width: '100%', height: '100%' }}>
      {title}
    </div>,
    { width: 1200, height: 630 }
  );
}

構造化データ（JSON-LD）

ページのJSXに<script>タグを挿入して、JSON-LD構造化データを追加します。これはMetadata APIの一部ではありませんが、併用できます。

export default function ProductPage({ product }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: product.name,
    price: product.price,
  };
  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      <h1>{product.name}</h1>
    </>
  );
}

メタデータの検証

ブラウザのDevTools（NetworkタブやHTMLソースの表示）またはopengraph.xyzなどのツールを使用して、メタデータがサーバーHTML内に正しく出力されていることを確認します。

確認問題

子ページが「About | My App」のような共通のタイトル末尾を継承してカスタマイズできるようにする、Next.js Metadata APIの機能はどれですか？

まとめ

静的タグにはmetadataを、動的なタグにはgenerateMetadata()をエクスポートします。レイアウトではDRYなタイトルを作るためにtitle.templateを使用し、ソーシャル共有のプレビューにはopenGraphとtwitterを設定します。動的なOG画像を配信するには、ルートハンドラーでImageResponseを使用します。

よくある質問

「Metadata APIとApp RouterのSEO」レッスンは無料ですか？

はい。「Metadata APIとApp RouterのSEO」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「Metadata APIとApp RouterのSEO」で何を学びますか？

staticおよびdynamic metadata objectsをexportし、ページタイトル、説明、OG tagsを設定します。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「Metadata APIとApp RouterのSEO」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

App Routerのファイル規約
Next.jsのServer ComponentsとClient Components
Dynamic RoutesとRoute Groups
Metadata APIとApp RouterのSEO

← React Academyに戻る