Zenn
ℹ️

ゼロから学ぶ React, Next.js㉓【Learn Next.js】Chapter16,17

2024/05/25に公開
Next.js
React
tech

公式チュートリアルはこちら
https://nextjs.org/learn/dashboard-app/adding-metadata
https://nextjs.org/learn/dashboard-app/next-steps

【Chapter16】 メタデータの追加

メタデータはSEOと共有性にとって重要です。この章では、Next.jsアプリケーションにメタデータを追加する方法について説明します。

この章で扱うトピック

  • ℹ️ メタデータとは何か。
  • 📦 メタデータの種類。
  • 🖼️ メタデータを使用してOpen Graphイメージを追加する方法。
  • ⏭️ メタデータを使用してファビコンを追加する方法。

メタデータとは？

Web開発においてメタデータは、Webページに関する追加の詳細情報を提供します。メタデータは、ページを訪問するユーザーには表示されません。代わりに、ページのHTML内、通常は<head>要素内に埋め込まれ、舞台裏で機能します。この隠された情報は、検索エンジンやWebページのコンテンツをより理解する必要がある他のシステムにとって重要です。

メタデータが重要な理由

メタデータは、WebページのSEOを強化し、検索エンジンやソーシャルメディアプラットフォームにとってよりアクセスしやすく理解しやすいものにするために重要な役割を果たします。適切なメタデータは、検索エンジンがWebページを効果的にインデックス化するのに役立ち、検索結果でのランキングを改善します。さらに、Open Graphのようなメタデータは、ソーシャルメディア上で共有されるリンクの見た目を改善し、ユーザーにとってコンテンツをより魅力的で有益なものにします。

メタデータの種類

メタデータにはさまざまな種類があり、それぞれが独自の目的を果たしています。一般的なタイプには以下のようなものがあります。

タイトルメタデータ：ブラウザのタブに表示されるWebページのタイトルを担当します。検索エンジンがWebページの内容を理解するのに役立つため、SEOにとって重要です。

<title>ページタイトル</title>

ディスクリプションメタデータ：このメタデータは、Webページのコンテンツの簡単な概要を提供し、多くの場合、検索エンジンの結果に表示されます。

<meta name="description" content="ページコンテンツの簡単な説明。" />

キーワードメタデータ：このメタデータには、Webページのコンテンツに関連するキーワードが含まれ、検索エンジンがページをインデックス化するのに役立ちます。

<meta name="keywords" content="キーワード1, キーワード2, キーワード3" />

Open Graphメタデータ：このメタデータは、ソーシャルメディアプラットフォームで共有された際のWebページの表示方法を強化し、タイトル、説明、プレビュー画像などの情報を提供します。

<meta property="og:title" content="ここにタイトル" />
<meta property="og:description" content="ここに説明" />
<meta property="og:image" content="画像のURL" />

ファビコンメタデータ：このメタデータは、ファビコン（小さなアイコン）をWebページにリンクし、ブラウザのアドレスバーやタブに表示されます。

<link rel="icon" href="ファビコンへのパス/favicon.ico" />

メタデータの追加

Next.jsには、アプリケーションのメタデータを定義するために使用できるMetadata APIがあります。アプリケーションにメタデータを追加する方法は2つあります。

  • 設定ベース：layout.jsまたはpage.jsファイルで、静的なmetadataオブジェクトまたは動的なgenerateMetadata関数をエクスポートします。

  • ファイルベース：Next.jsには、メタデータの目的で特別に使用される一連の特別なファイルがあります。

    • favicon.ico、apple-icon.jpg、icon.jpg：ファビコンとアイコンに利用されます。
    • opengraph-image.jpg、twitter-image.jpg：ソーシャルメディア画像に利用されます。
    • robots.txt：検索エンジンのクロールに関する指示を提供します。
    • sitemap.xml：ウェブサイトの構造に関する情報を提供します。

これらのファイルを静的メタデータに使用することも、プロジェクト内でプログラムで生成することもできます。

これらのオプションのいずれを使用しても、Next.jsは自動的にページの関連する<head>要素を生成します。

ファビコンとOpen Graphイメージ

/publicフォルダを見ると、favicon.icoとopengraph-image.jpgの2つの画像があることがわかります。

これらの画像を/appフォルダのルートに移動します。

これを行うと、Next.jsはこれらのファイルをファビコンとOGイメージとして自動的に識別して使用します。開発者ツールでアプリケーションの<head>要素を確認することで、これを確認できます。

知っておくと良いこと：ImageResponseコンストラクタを使用して、動的なOG画像を作成することもできます。

ページタイトルと説明

layout.jsまたはpage.jsファイルからmetadataオブジェクトを含めて、タイトルや説明などの追加のページ情報を追加することもできます。layout.jsのメタデータは、それを使用するすべてのページで継承されます。

ルートレイアウトで、以下のフィールドを持つ新しいmetadataオブジェクトを作成します。

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

Next.jsは自動的にタイトルとメタデータをアプリケーションに追加します。

しかし、特定のページにカスタムタイトルを追加したい場合はどうすればよいでしょうか？ページ自体にmetadataオブジェクトを追加することでこれを行うことができます。ネストされたページのメタデータは、親のメタデータをオーバーライドします。

たとえば、/dashboard/invoicesページで、ページタイトルを更新できます。

/app/dashboard/invoices/page.tsx
+import { Metadata } from 'next';
 
+export const metadata: Metadata = {
+  title: 'Invoices | Acme Dashboard',
+};

これでも機能しますが、すべてのページでアプリケーションのタイトルを繰り返し設定する必要があり、会社名などが変更された場合、すべてのページで更新する必要があります。

代わりに、metadataオブジェクトのtitle.templateフィールドを使用して、ページタイトルのテンプレートを定義できます。このテンプレートには、ページタイトルや、含めたいその他の情報を含めることができます。

ルートレイアウトで、metadataオブジェクトを更新してテンプレートを含めます。

/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は、特定のページタイトルに置き換えられます。

次に、/dashboard/invoicesページでページタイトルを追加できます。

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

/dashboard/invoicesページに移動し、<head>要素を確認してください。ページタイトルがInvoices | Acme Dashboardになっているはずです。

練習：メタデータの追加

メタデータについて学んだので、他のページにタイトルを追加する練習をしましょう。

  • /login ページ。
  • /dashboard/ ページ。
  • /dashboard/customers ページ。
  • /dashboard/invoices/create ページ。
  • /dashboard/invoices/[id]/edit ページ。

Next.js Metadata APIは強力で柔軟性があり、アプリケーションのメタデータを完全に制御できます。ここでは、基本的なメタデータを追加する方法を示しましたが、キーワード、ロボット、正規表現など、複数のフィールドを追加できます。ドキュメントを自由に探索し、アプリケーションに必要な追加のメタデータを追加してください。

【Chapter17】 次のステップ

おめでとうございます！Next.jsの主な機能とWebアプリケーション構築のベストプラクティスについて学んだNext.jsダッシュボードコースを修了しました。

しかし、これはほんの始まりに過ぎません。Next.jsには他にも多くの機能があります。小さなサイドプロジェクト、次のスタートアップのアイデア、さらにはチームとの大規模なアプリケーションの構築に役立つように設計されています。

Next.jsの探求を続けるためのリソースをいくつか紹介します。

Next.jsアプリを共有しよう

このチュートリアルで構築したアプリをXで共有することをお勧めします。共有する場合は、@nextjsでチームにメンションしてください。私たちが見させていただきます！このコースに関するフィードバックもお待ちしています。

このコースを楽しんでいただけたことを願っています。そして、構築を通じて学び続けることをお勧めします。

Discussion