メタデータを追加し、OG画像を作成する方法
メタデータAPIを使用すると、SEOの向上やWebの共有性を高めるためにアプリケーションのメタデータを定義できます。以下を含みます:
- 静的な
metadata
オブジェクト - 動的な
generateMetadata
関数 - 静的または動的に生成されたfaviconやOG画像を追加するための特別なファイル規約
上記のすべてのオプションを使用すると、Next.jsはページに関連する<head>
タグを自動的に生成し、ブラウザの開発者ツールで確認できます。
デフォルトフィールド
ルートがメタデータを定義していない場合でも、常に追加されるデフォルトのmeta
タグが2つあります:
- meta charsetタグは、Webサイトの文字エンコーディングを設定します
- meta viewportタグは、異なるデバイスに合わせてWebサイトのビューポート幅とスケールを設定します
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
他のメタデータフィールドは、Metadata
オブジェクト(静的メタデータ用)またはgenerateMetadata
関数(生成されたメタデータ用)で定義できます。
静的メタデータ
静的メタデータを定義するには、静的なlayout.js
またはpage.js
ファイルからMetadata
オブジェクトをエクスポートします。たとえば、ブログルートにタイトルと説明を追加するには:
- TypeScript
- JavaScript
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'My Blog',
description: '...',
}
export default function Page() {}
export const metadata = {
title: 'My Blog',
description: '...',
}
export default function Page() {}
利用可能なオプションの完全なリストは、メタデータ生成ドキュメントで確認できます。
生成されたメタデータ
generateMetadata
関数を使用して、データに依存するメタデータをfetch
できます。たとえば、特定のブログ投稿のタイトルと説明を取得するには:
- TypeScript
- JavaScript
import type { Metadata, ResolvingMetadata } from 'next'
type Props = {
params: Promise<{ id: 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) {}
export async function generateMetadata({ params, searchParams }, parent) {
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 }) {}
Next.jsは、メタデータをUIとは別にストリームし、解決され次第HTMLにメタデータを注入します。
データリクエストのメモ化
メタデータとページ自体の両方に同じデータを取得する必要がある場合があります。重複したリクエストを避けるために、Reactのcache
関数を使用して戻り値をメモ化し、データを一度だけ取得します。たとえば、メタデータとページの両方にブログ投稿情報を取得するには:
- TypeScript
- JavaScript
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
})
import { cache } from 'react'
import { db } from '@/app/lib/db'
// getPostは2回使用されますが、1回だけ実行されます
export const getPost = cache(async (slug) => {
const res = await db.query.posts.findFirst({ where: eq(posts.slug, slug) })
return res
})
- TypeScript
- JavaScript
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>
}
import { getPost } from '@/app/lib/data'
export async function generateMetadata({ params }) {
const post = await getPost(params.slug)
return {
title: post.title,
description: post.description,
}
}
export default async function Page({ params }) {
const post = await getPost(params.slug)
return <div>{post.title}</div>
}
Favicons
Faviconsは、ブックマークや検索結果でサイトを表す小さなアイコンです。アプリケーションにfaviconを追加するには、favicon.ico
を作成し、アプリフォルダのrootに追加します。


コードを使用してfaviconをプログラム的に生成することもできます。詳細はfaviconドキュメントを参照してください。
静的Open Graph画像
Open Graph(OG)画像は、ソーシャルメディアでサイトを表す画像です。アプリケーションに静的なOG画像を追加するには、opengraph-image.png
ファイルをアプリフォルダのrootに作成します。


特定のルートにOG画像を追加するには、フォルダ構造のさらに下にopengraph-image.png
を作成します。たとえば、/blog
ルートに特定のOG画像を作成するには、blog
フォルダ内にopengraph-image.jpg
ファイルを追加します。


より特定の画像は、フォルダ構造内の上位のOG画像よりも優先されます。
他の画像形式(
jpeg
、png
、webp
など)もサポートされています。詳細はOpen Graph Imageドキュメントを参照してください。
生成されたOpen Graph画像
ImageResponse
コンストラクタを使用すると、JSXとCSSを使用して動的な画像を生成できます。これは、データに依存するOG画像に便利です。
たとえば、各ブログ投稿にユニークなOG画像を生成するには、blog
フォルダ内にopengraph-image.ts
ファイルを追加し、next/og
からImageResponse
コンストラクタをインポートします:
- TypeScript
- JavaScript
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>
)
)
}
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 }) {
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プロパティの完全なリストを参照してください。
Good to know:
- Vercel OG Playgroundで例を確認できます。
ImageResponse
は、@vercel/og、Satori、およびResvgを使用してHTMLとCSSをPNGに変換します。- flexboxとCSSプロパティのサブセットのみがサポートされています。高度なレイアウト(例:
display: grid
)は機能しません。