VIDEO LESSON

generateMetadataの使い方：ページごとのtitle・description・OGPを生成するの解説動画

再生時間 7:12動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回は、ジェネレートメタデータの使い方です。
0:04ウェブサイトでは、ページごとにタイトルや説明文が違うのが普通です。
0:09記事のページなら記事の見出しを、商品のページなら商品名をタイトルにしたいところです。
0:15手作業でページごとに書く代わりに、データから自動で組み立ててくれるのが、
0:19ジェネレートメタデータです。
0:23タイトル、ディスクリプションと呼ばれる説明文、そしてSNSで共有されたときの表示、
0:29いわゆるオージーピーの情報を、ページのデータに合わせて生成します。
0:34今回は、記事のコードを読みながら、本文とメタデータを一致させる考え方まで押さえます。
0:41まず前提です。
0:42この記事の例は、ネクストジェイエス十五以降の非同期リクエストエーピーアイに合わせた書き方です。
0:48ネクストジェイエス十六では、キャッシュコンポーネンツを有効にしない構成を前提とします。
0:54タイプスクリプトは五・二以降で、利用するネクストジェイエスが対応するノードジェイエスを使います。
1:01配置先は、アプリ直下にレイアウト・ティーエスエックスを備えたアップルーターのプロジェクトです。
1:07ページズルーターとは配置先も実行場所も異なるため、プロジェクトのルーターとバージョンを先に確認してください。
1:15ジェネレートメタデータは、ブラウザーではなくサーバー側で動く機能です。
1:19引数と戻り値を整理します。
1:21ジェネレートメタデータは、ページのプロップスと同じ形の引数を受け取り、その中には動的ルートの値であるパラムスなどが含まれます。
1:31戻り値は、メタデータ型のオブジェクトです。
1:34非同期関数として書く場合は、プロミス・メタデータ、つまりメタデータを返すプロミスが戻り値になります。
1:41使い分けも大切です。
1:43どのページでも変わらない固定の情報は、メタデータという名前でそのまま書き出します。
1:49一方、記事や商品のようにページごとに変わる動的な情報は、ジェネレートメタデータで生成します。
1:56この役割分担が、設計の出発点です。
1:58記事のコードの前半、土台の部分です。
2:00ファイルは、アプリ、アイテムズ、角括弧スラッグというフォルダーのページ・ティーエスエックスです。
2:06まず、ネクストからメタデータ型を読み込み、見つからない場合に使うノットファウンドも読み込んでいます。
2:12アイテムズという対応表には、スラッグのノートブックに対して、学習ノートというタイトルが入っています。
2:18プロップスの型では、パラムスがスラッグという文字列を持つプロミスであることを表します。
2:24ジェネレートスタティックパラムスで生成対象を列挙し、ダイナミックパラムスをフォルスにして、
2:28それ以外のスラッグを受け付けないようにしています。
2:32コードの後半、生成の本体です。
2:34ジェネレートメタデータは非同期関数で、最初にパラムスをアウェイトしてスラッグを取り出します。
2:40次に、対応表からそのスラッグのタイトルを引きます。
2:43タイトルがなければノットファウンドを呼んで、見つからないページとして処理を切り替えます。
2:48タイトルがあれば、タイトルそのものと、タイトルに説明文の文言をつないだディスクリプションを返します。
2:54スライドでは、テンプレート文字列を文字列の連結に置き換えて表示していますが、
2:57意味は同じです。
3:00この戻り値が、そのままページの頭の情報になります。
3:03実行結果を確認します。
3:05アイテムズ・スラッシュ・ノートブックを開くと、ブラウザーのタイトルに学習ノートが入り、
3:10ディスクリプションも生成されます。
3:15ページ本体も同じパラムスをアウェイトし、同じ対応表から見出しを表示するので、
3:20タイトルと本文の見出しが自然に一致します。
3:24もう一つ知っておきたいのが、親レイアウトの影響です。
3:29親のレイアウトにタイトルのテンプレート、つまりサイト名を後ろに付けるような決まりがある場合は、
3:35その決まりも適用されたうえで、最終的なタイトルが決まります。
3:41生成した値だけを見て、最終表示と違うと慌てないでください。
3:46オージーピーと、メタデータベースについてです。
3:49SNSで共有されたときに表示される画像、いわゆるオーグ画像のユーアールエルを追加する場合は、
3:55絶対ユーアールエルで書くか、メタデータベースという土台のアドレスと組み合わせます。
4:02メタデータベースを設定しておけば、相対パスで書いた画像も、正しい絶対ユーアールエルに解決されます。
4:09設定を忘れると、画像の場所が解決できず、共有時に画像が出ないことがあります。
4:14そして、指定した画像が実際に公開されているか、エイチティーティーピーで正しく応答するかまで確認してください。
4:22コードに書いただけでは、表示は保証されません。
4:25つまずきやすい点の一つ目です。
4:27ジェネレートメタデータはサーバー側で使う機能なので、クライアントコンポーネントからは書き出せません。
4:34よくある間違いが、操作ボタンを置くためにページ全体へユースクライアントを付けてしまうことです。
4:41そうすると、サーバー専用の書き出しと衝突してしまいます。
4:45対策はシンプルで、ページ自体はサーバーコンポーネントのままにし、クリック操作が必要な部分だけを子コンポーネントに切り出して、
4:51そちらにユースクライアントを付けます。
4:56ページ全体の性質を変えるのではなく、必要な部分だけを分ける、という考え方です。
5:02二つ目は、内容の誠実さです。
5:04実務では、本文とメタデータが同じ商品や記事を参照するように、データの取得処理を共通化します。
5:12片方だけが更新されて、タイトルと本文が食い違う事態を防ぐためです。
5:17また、実際の本文にない情報や、過大な説明を盛り込むのも避けてください。
5:23キーワードを詰め込んでも効果はなく、ページ固有の内容を短く正確に表すことが基本です。
5:30なお、メタデータを整えただけで、検索順位やエーアイ検索への採用が保証されるわけではありません。
5:37表示の土台を整える作業だと理解しておきましょう。
5:41タイトルと説明文は、開く前にそのページの中身を正しく予告するもの、と考えると、
5:46盛りすぎない書き方が自然と選べます。
5:50静的出力と確認課題です。
5:52今回の例は、ビルド時に値を確定できるため、静的出力に組み込めます。
5:57ただし、シーメス、シーエムエスの更新などで値を変えた場合は、再ビルドと再配置が必要です。
6:04確認課題として、タイトルを変更し、本文のエイチワンと、ヘッドのタイトル、
6:08ディスクリプションを比べてください。
6:12オージーピーを加えたら、画像のエイチティーティーピー応答と、SNS側のキャッシュを分けて確認します。
6:20開発サーバーだけでなく、本番用ビルドと公開先でも、ユーアールエルを直接開く場合とリンクから移る場合、
6:26値がない場合と不正な値の場合を分けて試しましょう。
6:32まとめです。
6:32ジェネレートメタデータは、アップルーターでページごとのタイトル、ディスクリプション、
6:37オージーピーを、データから生成するサーバー側の関数です。
6:42パラムスをアウェイトして値を取り出し、メタデータ型のオブジェクトを返すのが基本形です。
6:48固定情報はメタデータ、動的情報はジェネレートメタデータと分け、本文とは同じデータ源を使います。
6:54クライアントコンポーネントからは書き出さず、オーグ画像はメタデータベースや絶対ユーアールエルと合わせて、
6:59実際に公開されているかまで確認してください。
7:04これでジェネレートメタデータは完了です。
7:07お疲れさまでした。
7:08次回はジェネレートスタティックパラムスを学びます。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

generateMetadataで記事や商品のデータから検索結果向け情報とOGPを生成します。ページ本文との一致、metadataBase、サーバーでの実行を確認します。

解説記事・サンプルコードを読む：generateMetadataの使い方：ページごとのtitle・description・OGPを生成する →