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

# はじめに

Next.js app routerのチュートリアルの第16章のアウトプットをします。

https://nextjs.org/learn/dashboard-app/adding-metadata

<details><summary>前の記事</summary>

【01】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/af58da3d20cbc790e767

【02】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/edf450b3ee135e83d1e8

【03】Next.js app routerのチュートリアルやってみる
https://qiita.com/naoyuki2/items/612221eac233aa9cbb74

【04】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/62f9beccbfe36eaf7f90

【05】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/8b71b1d1df7c9435a9c9

【06】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/58130c3cfbaf8a573de2

【07】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/2c2da0f8071e60454679

【08】Next.js app routerのチュートリアルやってみる

https://qiita.com/naoyuki2/items/45f45fcb9cc14506f79f

【09】Next.js app routerのチュートリアルやってみる(loading.tsxとSuspenseでストリーミング)

https://qiita.com/naoyuki2/items/717694288ec6017a3af2

【10】Next.js app routerのチュートリアルやってみる(部分的な事前レンダリング)

https://qiita.com/naoyuki2/items/8062f755b0679fe925b1

【11-1】Next.js app routerのチュートリアルやってみる(URLパラメーターを利用した検索機能)

https://qiita.com/naoyuki2/items/2be9503ac80fc4a1fa6a

【11-2】Next.js app routerのチュートリアルやってみる(URL パラメータを利用したページネーション)

https://qiita.com/naoyuki2/items/fd00dc2b376e7d87fb44

【12-1】Next.js app routerのチュートリアルやってみる(React Server Actionsを使ったデータ作成処理)

https://qiita.com/naoyuki2/items/04ffef203ae798f8c7bc

【12-2】Next.js app routerのチュートリアルやってみる(React Server Actionsを使ったデータ更新処理)

https://qiita.com/naoyuki2/items/41f16ef69a50171d9d86

【12-3】Next.js app routerのチュートリアルやってみる(React Server Actionsを使ったデータ削除処理)

https://qiita.com/naoyuki2/items/487239ef9c54c5ef7875

【13】Next.js app routerのチュートリアルやってみる(エラーハンドリング error.tsx not-found.tsx)

https://qiita.com/naoyuki2/items/41585b11448036aec74a

【14】Next.js app routerのチュートリアルやってみる(useFormStateでエラーメッセージを表示)

https://qiita.com/naoyuki2/items/adf25075e2225d82a7f8

</details>

:::note info
第15章は認証に関する話だったのですが、ログインとログアウトのみでアカウント登録はできない。OAuthも使用しないという内容だったので割愛しました。
:::

# 第16章 メタデータとは

検索エンジンでWebページを表示する際にタイトルや説明などを加えることができる要素です。

下は`Qiita`と検索したときの例です。

このような情報を表示するためにメタデータを記述します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582046/41def437-b4da-ddbf-f526-e3ac48df124a.png)

# メタデータを追加する

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

ファビコンはブラウザのタブなどに表示される画像です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582046/fed38408-2eb5-a510-b18e-c37df9ecad7e.png)


オープングラフはSNSなどでリンクを共有したときに表示される画像です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3582046/50449cd9-a37d-1049-0b62-0813f4b84295.png)

これらを設定するためには、`favicon.ico`と`opengraph-image.jpg`という名前でそれぞれ`/app`フォルダ配下に配置することで自動的に認識してくれるらしいです。

### ページのタイトルと説明

ページのタイトルは`title`に、

説明は`description`に書くことができます。

```diff_tsx:/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() {
  // ...
}
```
<details><summary>metadateBase補足</summary>

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

> metadataBaseは、一般的にウェブアプリケーションの基本URLを指定するために使用されます。この値は、アプリケーション内の他の場所で使用される可能性があります。例えば、リンクの作成やリダイレクトの設定などに使用されるかもしれません。
>
>具体的には、以下のような場合に使用されます：
>
>絶対URLの作成：metadataBaseを基にして、アプリケーション内の特定のパスへの絶対URLを作成することができます。例えば、/aboutページへのリンクを作成する場合、metadataBaseにパス/aboutを追加して絶対URLを作成します。
>
>リダイレクト：ユーザーをアプリケーション内の別のページにリダイレクトする場合、metadataBaseを使用してリダイレクト先の絶対URLを作成します。
>
>SEO：metadataBaseは、ウェブページのメタデータ（例えば、<link rel="canonical" href="...">タグ）を設定する際にも使用されます。これは、検索エンジンがウェブページを正しくインデックス化するのを助けます。
>
>したがって、metadataBaseを設定することは、アプリケーションの動作やSEOに重要な影響を与えます。

</details>

先ほど`/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`という文字列が使い回されていることが分かります。

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

```diff_tsx:/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`に書く必要がなくなります。

```diff_tsx:/app/dashboard/invoices/page.tsx
export const metadata: Metadata = {
+ title: 'Invoices',
};
```

# おわりに

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

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

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

# 次の記事

執筆中…