16
チャプター16
メタデータの追加
メタデータは、SEO（検索エンジン最適化）と共有可能性にとって非常に重要です。この章では、Next.js アプリケーションにメタデータを追加する方法について説明します。
このチャプターでは...
取り上げるトピックは以下の通りです。
メタデータとは。
メタデータの種類。
メタデータを使用して Open Graph 画像を追加する方法。
メタデータを使用してファビコンを追加する方法。
メタデータとは
ウェブ開発において、メタデータはウェブページに関する追加情報を提供します。メタデータは、ページを訪れるユーザーには表示されません。代わりに、ページの HTML 内、通常は <head> 要素内に埋め込まれ、バックグラウンドで機能します。この非表示の情報は、ウェブページのコンテンツをよりよく理解する必要がある検索エンジンやその他のシステムにとって非常に重要です。
メタデータはなぜ重要なのでしょうか？
メタデータは、ウェブページの SEO を強化し、検索エンジンやソーシャルメディアプラットフォームがそれをより理解しやすくするために重要な役割を果たします。適切なメタデータは、検索エンジンがウェブページを効果的にインデックス化するのを助け、検索結果でのランキングを向上させます。さらに、Open Graph のようなメタデータは、ソーシャルメディアで共有されたリンクの外観を改善し、コンテンツをユーザーにとってより魅力的で情報量の多いものにします。
メタデータの種類
メタデータにはさまざまな種類があり、それぞれが独自の目的を果たしています。一般的な種類としては以下のようなものがあります。
タイトル メタデータ：ブラウザのタブに表示されるウェブページのタイトルを担当します。検索エンジンがウェブページの内容を理解するのに役立つため、SEO に不可欠です。
<title>Page Title</title>説明 メタデータ：このメタデータは、ウェブページのコンテンツの簡単な概要を提供し、検索エンジンの結果に表示されることがよくあります。
<meta name="description" content="A brief description of the page content." />キーワード メタデータ：このメタデータは、ウェブページのコンテンツに関連するキーワードを含み、検索エンジンがページをインデックス化するのを助けます。
<meta name="keywords" content="keyword1, keyword2, keyword3" />Open Graph メタデータ：このメタデータは、ソーシャルメディアプラットフォームでウェブページが共有される際の表示方法を強化し、タイトル、説明、プレビュー画像などの情報を提供します。
<meta property="og:title" content="Title Here" />
<meta property="og:description" content="Description Here" />
<meta property="og:image" content="image_url_here" />ファビコン メタデータ：このメタデータは、ファビコン（小さなアイコン）をウェブページにリンクし、ブラウザのアドレスバーまたはタブに表示されます。
<link rel="icon" href="path/to/favicon.ico" />メタデータの追加
Next.js には、アプリケーションのメタデータを定義するために使用できるメタデータ 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 オブジェクトを作成します。
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 ページで、ページタイトルを更新できます。
import { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Invoices | Acme Dashboard',
};これは機能しますが、すべてのページでアプリケーションのタイトルを繰り返しています。会社名などが変更された場合、すべてのページを更新する必要があります。
代わりに、metadata オブジェクトの title.template フィールドを使用して、ページタイトルのテンプレートを定義できます。このテンプレートには、ページタイトルや含めたいその他の情報を含めることができます。
ルートレイアウトで、テンプレートを含むように metadata オブジェクトを更新します。
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 ページで、ページタイトルを追加できます。
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 のメタデータ API は強力で柔軟であり、アプリケーションのメタデータを完全に制御できます。ここでは基本的なメタデータの追加方法を示しましたが、keywords、robots、canonical など、複数のフィールドを追加できます。ドキュメントを自由に参照し、アプリケーションに追加したいメタデータを追加してください。
役に立ちましたか？