今回は、Next.jsのApp Routerでメタデータを設定する方法についてまとめます。
メタデータとは、ページのタイトルや説明文など、そのページに関する情報のことです。
設定した内容は、HTMLの<title>要素や<meta>タグなどとして出力されます。
たとえば、次のような用途で使用されます。
設定方法
固定のメタデータを設定するのか、動的にメタデータを設定するのか(ブログ記事のタイトル等)によって設定方法が異なります。
まずは固定のメタデータの設定方法から。
import type { Metadata } from "next";
export const metadata: = {
: ,
: ,
};
() {
}
オブジェクトにtitleやdescriptionなど、設定したい内容を詰め込みます。
続いて動的なページ。
動的なページで設定する場合は、generateMetadata関数をexportします。
コードはこんな感じ。
この例では、URLから受け取ったslugを使って記事を取得し、その記事のタイトルと説明文をメタデータとして設定しています。
getArticleの実装は省略していますが、データベースなどから記事を取得する処理を想定しています。
開発者ツールを開いてページにアクセスしてみると、無事設定されているのを確認できました。
設定できる代表的なメタデータは以下の通りです。
他にも色々とあるみたいなので、気になった方はドキュメントを見てみるとよいかもしれません。
https://nextjsjp.org/docs/app/api-reference/functions/generate-metadata
メタデータは検索結果だけでなく、ブラウザのタブやSNSでURLを共有した際の表示にも使用されるため、ページの内容に合わせて設定しておきましょう！
import { getArticle } from '@/app/lib/article';
import type { Metadata } from "next";
type Props = {
params: Promise<{ slug: string }>
}
export async function generateMetadata({
params
}: Props): Promise<Metadata> {
const { slug } = await params;
const article = await getArticle(slug);
return {
title: article.title,
description: `${article.title}に関する記事です。`
}
}
export default async function ArticlePage({ params }: Props) {
const { slug } = await params;
const article = await getArticle(slug);
return (
<main> <h1>{article.title}</h1> <p>{article.description}</p> </main>
);
}
| プロパティ | 内容 |
|---|
| title | ページのタイトル |
| description | ページの説明文 |
| keywords | ページに関連するキーワード |
| authors | ページや記事の著者 |
| robots | 検索エンジンのクロールやインデックスに関する設定 |
| alternates | canonical URLの設定 |
| openGraph | SNSなどで共有された際に使用される情報 |
| Xで共有された際に使用される情報 |