logoNext.js
ドキュメントブログ学習

メタデータの追加

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

メタデータとは？

ウェブ開発において、メタデータはウェブページに関する追加情報を提供します。メタデータはページを訪れるユーザーには見えません。代わりに、ページのHTML内、通常は<head>要素内に埋め込まれ、裏側で機能します。この隠された情報は、検索エンジンやその他のシステムがウェブページの内容をよりよく理解するために重要です。

メタデータが重要な理由

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

メタデータの種類

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

タイトルメタデータ: ブラウザのタブに表示されるウェブページのタイトルを担当します。SEOにおいて重要で、検索エンジンがウェブページの内容を理解するのに役立ちます。

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

ディスクリプションメタデータ: このメタデータはウェブページの内容の簡単な概要を提供し、検索エンジンの結果に表示されることがよくあります。

<meta name="description" content="ページ内容の簡単な説明" />

キーワードメタデータ: このメタデータには、ウェブページの内容に関連するキーワードが含まれており、検索エンジンがページをインデックス化するのに役立ちます。

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

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

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

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

<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ダッシュボード',
  description: 'App Routerで構築された公式Next.jsコースダッシュボード',
  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: '請求書 | Acmeダッシュボード',
};

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

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

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

/app/layout.tsx
import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: {
    template: '%s | Acmeダッシュボード',
    default: 'Acmeダッシュボード',
  },
  description: 'App Routerで構築された公式Next.jsラーニングダッシュボード',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};

テンプレート内の%sは、特定のページタイトルに置き換えられます。

これで、/dashboard/invoicesページで、ページタイトルを追加できます：

/app/dashboard/invoices/page.tsx
export const metadata: Metadata = {
  title: '請求書',
};

/dashboard/invoicesページに移動し、<head>要素を確認してください。ページタイトルが請求書 | Acmeダッシュボードになっているはずです。

練習: メタデータの追加

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

  1. /loginページ
  2. /dashboard/ページ
  3. /dashboard/customersページ
  4. /dashboard/invoices/createページ
  5. /dashboard/invoices/[id]/editページ

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

認証機能の追加

NextAuth.js、Server Actions、Middlewareを使用してダッシュボードルートを保護する認証機能を追加します。

On this page