メタデータと OG 画像

Metadata API は、アプリケーションメタデータを定義して SEO と Web シェアラビリティを向上させるために使用でき、以下が含まれます：

静的な metadata オブジェクト
動的な generateMetadata 関数
静的または動的に生成されたファビコンとOG 画像を追加するために使用できる特殊なファイル規約。

上記のすべてのオプションを使用すると、Next.js はページの関連する <head> タグを自動的に生成します。これはブラウザの開発者ツールで検査できます。

metadata オブジェクトと generateMetadata 関数のエクスポートは、Server Components でのみサポートされています。

デフォルトフィールド

ルートがメタデータを定義していない場合でも、常に追加される 2 つのデフォルト meta タグがあります：

meta charset タグは、ウェブサイトの文字エンコーディングを設定します。
meta viewport タグは、ウェブサイトのビューポート幅とスケールを設定して、異なるデバイスに対応します。

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

その他のメタデータフィールドは、Metadata オブジェクト（静的メタデータの場合）または generateMetadata 関数（生成されたメタデータの場合）で定義できます。

静的メタデータ

静的メタデータを定義するには、静的な layout.js または page.js ファイルから Metadata オブジェクトをエクスポートします。たとえば、ブログルートにタイトルと説明を追加するには：

app/blog/layout.tsx

TypeScript

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'My Blog',
  description: '...',
}
 
export default function Layout() {}

利用可能なオプションの完全なリストは、generateMetadata ドキュメントで確認できます。

生成されたメタデータ

generateMetadata 関数を使用して、データに依存するメタデータを fetch できます。たとえば、特定のブログ投稿のタイトルと説明を取得するには：

app/blog/[slug]/page.tsx

TypeScript

import type { Metadata, ResolvingMetadata } from 'next'
 
type Props = {
  params: Promise<{ slug: string }>
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
}
 
export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const slug = (await params).slug
 
  // ブログ投稿情報を取得
  const post = await fetch(`https://api.vercel.app/blog/${slug}`).then((res) =>
    res.json()
  )
 
  return {
    title: post.title,
    description: post.description,
  }
}
 
export default function Page({ params, searchParams }: Props) {}

ストリーミングメタデータ

動的にレンダリングされるページの場合、Next.js はメタデータを個別にストリーミングし、generateMetadata が解決されると HTML に注入します。UI のレンダリングをブロックしません。

ストリーミングメタデータは、視覚的コンテンツが最初にストリーミングされることにより、知覚されたパフォーマンスを向上させます。

ストリーミングメタデータは、<head> タグにメタデータが含まれることを期待するボットとクローラー（例：Twitterbot、Slackbot、Bingbot）に対して無効です。これらは、受信リクエストの User Agent ヘッダーを使用して検出されます。

Next.js 設定ファイルの htmlLimitedBots オプションを使用して、ストリーミングメタデータをカスタマイズまたは完全に無効にできます。

静的にレンダリングされるページでは、メタデータがビルド時に解決されるため、ストリーミングは使用されません。

ストリーミングメタデータについて詳しく学びます。

データリクエストのメモ化

メタデータとページ自体の両方に対して同じデータを取得する必要がある場合があります。重複リクエストを避けるために、React の cache 関数を使用して、戻り値をメモ化し、データを 1 度だけ取得できます。たとえば、メタデータとページの両方でブログ投稿情報を取得するには：

app/lib/data.ts

TypeScript

import { cache } from 'react'
import { db } from '@/app/lib/db'
 
// getPost は 2 回使用されますが、1 回だけ実行されます
export const getPost = cache(async (slug: string) => {
  const res = await db.query.posts.findFirst({ where: eq(posts.slug, slug) })
  return res
})

app/blog/[slug]/page.tsx

TypeScript

import { getPost } from '@/app/lib/data'
 
export async function generateMetadata({
  params,
}: {
  params: { slug: string }
}) {
  const post = await getPost(params.slug)
  return {
    title: post.title,
    description: post.description,
  }
}
 
export default async function Page({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug)
  return <div>{post.title}</div>
}

ファイルベースのメタデータ

メタデータで利用可能な以下の特殊ファイルがあります：

これらを静的メタデータに使用するか、コードを使用してこれらのファイルをプログラムで生成できます。

ファビコン

ファビコンは、ブックマークと検索結果でサイトを表す小さいアイコンです。アプリケーションにファビコンを追加するには、favicon.ico を作成して app フォルダのルートに追加します。

コードを使用してプログラムでファビコンを生成することもできます。詳しくは、ファビコンドキュメントを参照してください。

静的な Open Graph 画像

Open Graph（OG）画像は、ソーシャルメディアでサイトを表す画像です。アプリケーションに静的な OG 画像を追加するには、app フォルダのルートに opengraph-image.png ファイルを作成します。

App フォルダ内の OG 画像特殊ファイルと兄弟レイアウトおよびページファイル

フォルダ構造の奥深くに opengraph-image.png を作成することで、特定のルートに OG 画像を追加することもできます。たとえば、/blog ルート専用の OG 画像を作成するには、blog フォルダ内に opengraph-image.jpg ファイルを追加します。

より具体的な画像は、フォルダ構造の上にある OG 画像よりも優先されます。

jpeg、png、gif などの他の画像形式もサポートされています。詳しくは、Open Graph Image ドキュメントを参照してください。

生成される Open Graph 画像

ImageResponse コンストラクタを使用すると、JSX と CSS を使用して動的画像を生成できます。これは、データに依存する OG 画像に便利です。

たとえば、各ブログ投稿に対して一意の OG 画像を生成するには、blog フォルダ内に opengraph-image.tsx ファイルを追加し、next/og から ImageResponse コンストラクタをインポートします：

app/blog/[slug]/opengraph-image.tsx

TypeScript

import { ImageResponse } from 'next/og'
import { getPost } from '@/app/lib/data'
 
// 画像メタデータ
export const size = {
  width: 1200,
  height: 630,
}
 
export const contentType = 'image/png'
 
// 画像生成
export default async function Image({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug)
 
  return new ImageResponse(
    (
      // ImageResponse JSX 要素
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        {post.title}
      </div>
    )
  )
}

ImageResponse は、flexbox と絶対位置指定、カスタムフォント、テキスト折り返し、中央揃え、ネストされた画像を含む一般的な CSS プロパティをサポートしています。サポートされている CSS プロパティの完全なリストを参照してください。

補足：

例は Vercel OG Playground で利用できます。

ImageResponse は、HTML と CSS を PNG に変換するために @vercel/og、satori、および resvg を使用します。

flexbox と CSS プロパティのサブセットのみがサポートされています。高度なレイアウト（例：display: grid）は機能しません。

メタデータと OG 画像

デフォルトフィールド

静的メタデータ

生成されたメタデータ

ストリーミングメタデータ

データリクエストのメモ化

ファイルベースのメタデータ

ファビコン

静的な Open Graph 画像

生成される Open Graph 画像

API リファレンス

favicon、icon、apple-icon

メタデータファイル

opengraph-image と twitter-image

robots.txt

sitemap.xml

generateMetadata

generateViewport

ImageResponse

htmlLimitedBots