前回
Next.jsのチュートリアルをやってみる【認証の追加】
はじめに
前回はNextAuth.jsを利用して認証関連の機能を追加いたしました。今回はSEOのためにメタデータを追加する方法について学んでいきます。
メタデータとは？
メタデータはWebページに関する詳細な情報を提供します。基本的にはHTMLの<head>要素内に埋め込むことでページを訪れたユーザーには見えず裏で機能します。この情報によって検索エンジンやほかのシステムにどのようなページかを伝えることができます。
なぜメタデータが重要なのか？
メタデータはSEOを強化するうえで重要な役割を果たし、検索エンジンやソーシャルメディアプラットフォームにとってアクセスしやすく、理解しやすいものにします。適切にメタデータを追加することで、検索結果でのランキングを向上させるのに役立ちます。
メタデータの種類
メタデータには様々な種類があり、それぞれ独自の目的を果たします。一般的には以下の種類が使用されます。
タイトル
ブラウザのタブに表示されるウェブページのタイトルを担当します。検索エンジンがウェブページの内容を理解するのに役立つため、SEO対策には欠かせないメタデータです。
<title>Page Title</title>説明
このメタデータは、Webページのコンテンツの概要を示すもので、検索エンジンの検索結果に表示されることが多いです。
<meta name="description" content="A brief description of the page content." />キーワード
このメタデータには、ウェブページのコンテンツに関連するキーワードが含まれ、検索エンジンがページをインデックスするのに役立ちます。
<meta name="keywords" content="keyword1, keyword2, keyword3" />オープングラフ
このメタデータはソーシャルメディアプラットフォームでウェブページが共有される際に、タイトル、説明文、プレビュー画像などの情報を提供し、ウェブページの表現方法を向上させます。
<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つの方法があります。
- 設定ベース：静的なメタデータオブジェクト、もしくは動的な
generateMetadata関数をlayout.jsまたはpage.jsファイルにエクスポートします。 - ファイルベース：Next.jsには、メタデータ用に使用する特別なファイルがいくつかあります。
favicon.ico,apple-icon.jpg,icon.jpg：ファビコンやアイコンに使用opengraph-image.jpg,twitter-image.jpg：SNSの画像に採用されます。robots.txt：検索エンジンのクロールに関する指示。sitemap.xml：ウェブサイトの構造に関する情報を提供します。
これらのファイルを静的なメタデータとして使用することも、プロジェクト内で動的に生成することもできます。この両方のオプションを使用すると、Next.jsはページに関する<head>要素を自動的に生成します。
ファビコンとオープングラフ画像
publicフォルダの中を確認するとfavicon.icoとopengraph-image.jpgの二種類の画像があることが確認できます。
これらの画像を/appフォルダのルートに移動しましょう。
すると、Next.jsは自動的にこれらのファイルを識別して、ファビコンとOG画像として使用します。開発ツールなどでアプリケーションの<head>要素をチェックすることで確認できます。
ImageResponseコンストラクタを使用すると、動的なOG画像を作成することもできます。
ページのタイトルと説明
layout.jsやpage.jsファイルからもmetadataオブジェクトをインクルードして、タイトルや説明文などのページ情報を追加することができます。
ルート・レイアウトで以下のフィールドを持つ新しい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'),
};Next.jsは自動的にタイトルとメタデータをアプリケーションに追加します。
特定のページにカスタムタイトルを追加したい場合は、ページ事態にmetadataオブジェクトを追加することで実現できます。入れ子になったページのメタデータは、親のメタデータを上書きします。
以下のように/dashboard/incoicesページでタイトルを変更することができます。
import { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Invoices | Acme Dashboard',
};ですが、この場合すべてのページで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ページに移動してページタイトルが「Invoices | Acme Dashboard」になっていたら成功です。
練習：メタデータの追加
メタデータの追加方法を学ぶことができたので、他のページのタイトルも変えてみましょう。
/loginpage./dashboard/page./dashboard/customerspage./dashboard/invoices/createpage./dashboard/invoices/[id]/editpage.
まとめ
- メタデータとはWebページのコンテンツに関する情報のデータ。
- メタデータは
<head>要素で設定することができる。 - Next.jsでは
layout.jsまたはpage.jsでメタデータを追加することができる。 title.templateフィールドの様に使用することで、ページタイトルのテンプレートを定義することができる。（その他の情報も可能）
