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には、アプリケーションのメタデータを定義するために使用できる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オブジェクトを作成します
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など、複数のフィールドを追加できます。自由にドキュメントを探索し、アプリケーションに追加したい追加のメタデータを加えてください。
これは役立ちましたか？