Next.js 13 新しいメタデータ APIで SEO サポート | Next.js 13.2 チュートリアル

Next.js 13 新しいメタデータ APIで SEO サポート | Next.js 13.2 チュートリアル

目录

1. ✨ 導入
2. 📦 Next 13 アプリとは？
3. ⚙️ バージョン 13.3 での変更点
4. 🔄 metadata の新しい方法
   • 4.1 metadata のキー: title
   • 4.2 metadata のキー: title templates
5. 📝 metadata のカスタマイズ方法
   • 5.1 layout ファイルの metadata オブジェクト
   • 5.2 ページごとの metadata のカスタマイズ
6. 📄 ページにおけるデフォルトの metadata
7. 🌐 ページの説明データ
8. 🔑 他のメタデータオプション
   • 8.1 keywords キー
   • 8.2 open graph キー
   • 8.3 robots キー
   • 8.4 icons キー
   • 8.5 theme color キー
   • 8.6 Manifest キー
   • 8.7 ソーシャルメディア用の meta タグ
   • 8.8 app キー
   • 8.9 viewport の更新
   • 8.10 その他のキー
9. ❗️バージョン 13.2 以降での head タグの廃止
10. 🎥 まとめと最後に

✨ 導入 最近、Next 13アプリを作成したことがある場合、特にnext 13.2以降のバージョンでそのアプリを開いた場合、何かが欠けていることに気づくかもしれません。head ファイルが存在しないのです。ただし、これは良いことです。バージョン13.3では、headタグを廃止し、将来のバージョンではheadファイルが削除されました。headファイルはメタデータを保持していた場所でしたが、バージョン13.2以降では、すべてのメタデータはlayout.js ファイルに保持されるようになりました。このビデオでは、layoutファイル内で新しいmetadata機能がどのように機能するかを説明します。

📦 Next 13 アプリとは？ Next 13アプリは、ReactフレームワークであるNext.jsを使用して作成されたアプリケーションのことを指します。Next.jsは、サーバーサイドレンダリングやスタティックサイト生成などの機能を提供し、高速でパフォーマンスの良いウェブアプリケーションを開発するための便利なツールです。

⚙️ バージョン 13.3 での変更点 バージョン13.3では、headタグの廃止が行われました。これにより、headファイルは使われなくなり、layoutファイル内のmetadataオブジェクトでメタデータを管理するようになりました。これにより、タイトルや説明などの重要なメタデータをより簡単に設定できるようになりました。

🔄 metadata の新しい方法

metadataを設定するための新しい方法を紹介します。metadataオブジェクト内には、さまざまなキーを使用して、異なるメタデータを設定できます。

4.1 metadata のキー: title

metadataオブジェクトの中で最も重要なキーの1つは、titleです。このキーを使用すると、サイト名やブラウザのタブに表示されるタイトルを制御することができます。例えば、ホームページのmetadata内で"My Next Site"と記述すると、ブラウザのタブに"My Next Site"と表示されます。

4.2 metadata のキー: title templates

title templatesは、metadataテンプレートを作成するためのオプションです。metadataテンプレートは、アプリ全体にデフォルトのタイトルを設定するための便利な機能です。metadataテンプレートを使用すると、個々のページ内のタイトルの一部を簡単に更新することができます。例えば、ルートのlayout内でデフォルトのタイトルテンプレートを設定し、ページごとにタイトルを更新することができます。

以上がmetadataの新しい方法の概要です。次は、metadataのカスタマイズ方法について詳しく説明します。