+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() {
  // ...
}

metadateBase補足

metadateBaseはgithub copilotによればこんな感じのものらしいです。

metadataBaseは、一般的にウェブアプリケーションの基本URLを指定するために使用されます。この値は、アプリケーション内の他の場所で使用される可能性があります。例えば、リンクの作成やリダイレクトの設定などに使用されるかもしれません。

具体的には、以下のような場合に使用されます：

絶対URLの作成：metadataBaseを基にして、アプリケーション内の特定のパスへの絶対URLを作成することができます。例えば、/aboutページへのリンクを作成する場合、metadataBaseにパス/aboutを追加して絶対URLを作成します。

リダイレクト：ユーザーをアプリケーション内の別のページにリダイレクトする場合、metadataBaseを使用してリダイレクト先の絶対URLを作成します。

SEO：metadataBaseは、ウェブページのメタデータ（例えば、タグ）を設定する際にも使用されます。これは、検索エンジンがウェブページを正しくインデックス化するのを助けます。

したがって、metadataBaseを設定することは、アプリケーションの動作やSEOに重要な影響を与えます。

先ほど/app/layout.tsxにtitleを記述したため、すべてのページで、Acme Dashboardというタイトルになっています。

これを/app/dashboard/invoices/page.tsxでは表示を変えてみましょう。

/app/dashboard/invoices/page.tsx

import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Invoices | Acme Dashboard',
};

ただ単に上書きすれば正常に表示されます。

ですが、Acme Dashboardという文字列が使い回されていることが分かります。

その場合は、以下のようにすることができます。

/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'),
};

titleをオブジェクトとして、プロパティにtempalteとdefaultを追加しました。

templateの%sの中身は文字列を代入することができます。

これでわざわざAcme Dashboardという記述を他のページのtitleに書く必要がなくなります。

/app/dashboard/invoices/page.tsx

export const metadata: Metadata = {
+ title: 'Invoices',
};

おわりに

他にもkeywords、robots、canonicalなどのたくさんのメタデータが用意されているらしいです。

これでNextチュートリアルはおしまいです。

でも色々いじってみようと思います。

執筆中…

【15】Next.js app routerのチュートリアルやってみる(メタデータを追加)

はじめに

第16章メタデータとは

メタデータを追加する

ファビコンとオープングラフの画像

ページのタイトルと説明

おわりに

次の記事

【15】Next.js app routerのチュートリアルやってみる(メタデータを追加)

はじめに

第16章 メタデータとは

メタデータを追加する

ファビコンとオープングラフの画像

ページのタイトルと説明

おわりに

次の記事

第16章メタデータとは