16
チャプター16
メタデータの追加
メタデータはSEOと共有可能性にとって非常に重要です。この章では、Next.jsアプリケーションにメタデータを追加する方法について説明します。
この章の内容
ここでは、取り上げるトピックを紹介します。
メタデータとは何か。
メタデータの種類。
メタデータを使用してOpen Graph画像を追加する方法。
メタデータを使用してファビコンを追加する方法。
メタデータとは？
Web開発において、メタデータはWebページに関する追加の詳細情報を提供します。メタデータは、ページを訪れるユーザーには見えません。代わりに、ページ上のHTML内に、通常は<head>要素内に埋め込まれて、バックグラウンドで動作します。この隠れた情報は、検索エンジンやWebページのコンテンツをより深く理解する必要があるその他のシステムにとって非常に重要です。
メタデータが重要な理由
メタデータは、WebページのSEOを強化し、検索エンジンやソーシャルメディアプラットフォームにとってよりアクセスしやすく理解しやすいものにする上で重要な役割を果たします。適切なメタデータは、検索エンジンがWebページを効果的にインデックス化し、検索結果でのランキングを向上させるのに役立ちます。さらに、Open Graphのようなメタデータは、ソーシャルメディアで共有されたリンクの表示を改善し、ユーザーにとってコンテンツをより魅力的で有益なものにします。
メタデータの種類
メタデータにはさまざまな種類があり、それぞれが独自の目的を果たします。一般的な種類には次のようなものがあります。
タイトルメタデータ：ブラウザのタブに表示されるWebページのタイトルを担当します。検索エンジンがWebページの内容を理解するのに役立つため、SEOにとって非常に重要です。
<title>Page Title</title>説明メタデータ：このメタデータは、Webページコンテンツの簡単な概要を提供し、検索エンジンの結果に表示されることがよくあります。
<meta name="description" content="A brief description of the page content." />キーワードメタデータ：このメタデータには、Webページのコンテンツに関連するキーワードが含まれており、検索エンジンがページをインデックス化するのに役立ちます。
<meta name="keywords" content="keyword1, keyword2, keyword3" />Open Graphメタデータ：このメタデータは、ソーシャルメディアプラットフォームで共有されたときにWebページが表示される方法を強化し、タイトル、説明、プレビュー画像などの情報を提供します。
<meta property="og:title" content="Title Here" />
<meta property="og:description" content="Description Here" />
<meta property="og:image" content="image_url_here" />ファビコンメタデータ：このメタデータは、ファビコン（小さなアイコン）をWebページにリンクし、ブラウザのアドレスバーまたはタブに表示されます。
<link rel="icon" href="path/to/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：Webサイトの構造に関する情報を提供します。
これらのファイルを静的メタデータに使用したり、プロジェクト内でプログラムで生成したりすることができます。
これらの両方のオプションを使用すると、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 Metadata APIは強力で柔軟性があり、アプリケーションのメタデータを完全に制御できます。ここでは、基本的なメタデータを追加する方法を示しましたが、keywords、robots、canonicalなど、複数のフィールドを追加できます。ドキュメントを参照して、アプリケーションに必要な追加のメタデータを追加してください。
この情報は役に立ちましたか？