Next.jsの勉強がてら公式のチュートリアルを1からなぞってみました。
実際にチュートリアルをベースに書いたソースコードはこちら
- Next.js基礎コース App Router やってみた 1 ~ 3
- Next.js基礎コース App Router やってみた 4 ~ 6
- Next.js基礎コース App Router やってみた 7 ~ 9
- Next.js基礎コース App Router やってみた 10 ~ 12
- Next.js基礎コース App Router やってみた 13 ~ 15
- Next.js基礎コース App Router やってみた 16 ~ 17
16. メタデータの追加
メタデータの種類
title メタデータ
ブラウザタブに表示されるウェブページのタイトルを管理します。検索エンジンがウェブページの内容を理解するのに役立つため、SEOにとって非常に重要です。
<title>Page Title</title>
description メタデータ
Web ページのコンテンツの概要を簡単に提供し、検索エンジンの結果に表示されます。
<meta name="description" content="A brief description of the page content." />
keyword メタデータ
Web ページのコンテンツに関連するキーワードが含まれており、検索エンジンがページをインデックスするのに役立ちます。
<meta name="keywords" content="keyword1, keyword2, keyword3" />
Open Graph メタデータ
タイトル、説明、プレビュー画像などの情報を提供することで、ソーシャル メディア プラットフォームで共有されるときに Web ページが表示される方法を強化します。
<meta property="og:title" content="Title Here" />
<meta property="og:description" content="Description Here" />
<meta property="og:image" content="image_url_here" />
fabicon メタデータ
ブラウザのアドレス バーまたはタブに表示されるファビコン (小さなアイコン) を Web ページにリンクします。
<link rel="icon" href="path/to/favicon.ico" />
メタデータの追加
Next.jsにはメタデータAPIがあり、メタデータの追加には2つの方法があります
- 設定ベース
layout.jsまたはpage.jsファイル内で、静的なメタデータオブジェクトまたは動的なgenerateMetadata関数をエクスポートします。 - ファイルベース
Next.js にはメタデータ専用に設計された特殊ファイルが用意されています-
favicon.icoapple-icon.jpgicon.jpg: ファビコンやアイコンとして使用 -
opengraph-image.jpgtwitter-image.jpg: ソーシャルメディア画像として使用 -
robots.txt: 検索エンジンのクロールに関する指示を提供 -
sitemap.xml: ウェブサイトの構造に関する情報を提供
-
これらのファイルを静的なメタデータとして使用することも、プロジェクト内でプログラム的に生成することも可能です。
いずれの方法でも、Next.jsは自動的にページ用の関連する
要素を生成します。favicon と Open Graph 画像
/public 配下の favicon.ico と opengraph-image.jpg を /app 配下に移動します。
そうすると、Next.jsはこれらのファイルを自動的に識別子、ファビコンとOG画像として使用します。
ブラウザの開発ツールで <head> タグを確認して、適応されているかどうかを確認します。
cp public/favicon.ico app/favicon.ico
cp public/opengraph-image.png app/opengraph-image.png
ページのタイトルと説明
任意の layout.js または page.js ファイルに metadata オブジェクトを定義することで、 title や description などの追加ページ情報を追加できます。 layout.js 内のメタデータは、それを使用するすべてのページに継承されます。
/app/layout.tsx
// ...
import { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Acme Dashboard',
description: 'The official Next.js Course Dashboard, built with App Router.',
metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};
export default function RootLayout() {
// ...
}
特定のページにのメタデータを変更したい場合は、 page.js に metadata オブジェクトを定義します。
/app/dashboard/invoices/page.tsx
import { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Invoices | Acme Dashboard',
};
これは機能しますが | Acme Dashboard の部分が各ページで重複してしまいます。
代わりに、metadata オブジェクトの title.template フィールドを使用して、ページタイトルのテンプレートを定義できます。
このテンプレートには、ページタイトルやその他の任意の情報を含めることができます。
/app/layout.tsx
import { Metadata } from 'next';
export const metadata: Metadata = {
title: {
template: '%s | Acme Dashboard',
default: 'Acme Dashboard',
},
description: 'The official Next.js Learn Dashboard built with App Router.',
metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};
テンプレート内の %s は特定の page.js の metadata の title に置き換えられます。
/app/dashboard/invoices/page.tsx
export const metadata: Metadata = {
title: 'Invoices',
};
以下のページにも title を追加してみましょう
- /login ページ。
- /dashboard/ ページ。
- /dashboard/customers ページ。
- /dashboard/invoices/create ページ。
- /dashboard/invoices/[id]/edit ページ
17. 次のステップ
Next.jsをさらに学ぶためのリソース