Next.jsのmeta-dataを設定方法
初めに
SEO対策と聞いて何を思い浮かべますか?
HTMLタグの適切な利用を意識するあまり、メタデータに意識を疎かにしていました。
そこで今回はメタデータを中心に話したいと思います。
そもそもメタデータとは?
Next.jsでは、Layout.tsxにあるこんな記載です。
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
Web開発では、メタデータは Web ページに関する追加の詳細を提供します。メタデータは、ページを訪問するユーザーには表示されません。代わりに、ページのHTML (通常は<head>要素内)に埋め込まれ、舞台裏で機能します。
この非表示の情報は、Webページのコンテンツをよりよく理解する必要がある検索エンジンやその他のシステムにとって重要です。
またウェブサイトのメタデータが不適切に構成されていると、ユーザー エクスペリエンスとウェブサイトの検出可能性に重大な問題が発生する可能性があります。
メタデータはなぜ重要ですか?
メタデータは、ウェブページのSEO
を強化し、検索エンジンやソーシャル、メディア、プラットフォームにとってアクセスしやすく、理解しやすいものにする上で重要な役割を果たします。
適切なメタデータは、検索エンジンがウェブページを効果的にインデックスし、検索結果でのランキングを向上させるのに役立ちます。さらに、Open Graph などのメタデータは、ソーシャル メディアで共有されるリンクの外観を改善し、ユーザーにとってコンテンツをより魅力的で有益なものにします。
メタデータの構成が間違っているとどのような問題が発生する?
たとえば、メタデータの構成が適切でないと、検索ランキングが下がり、ユーザーが Web サイトを見つける可能性が低くなります (たとえば、検索エンジンの最初の結果ページ (SERP) の外側にランクされる)。これは、オンラインショップなどのオーガニックトラフィックで成長する Web サイトにとって非常に有害です。さらに、不正確または誤解を招くメタデータは、Web サイトの評判と信頼性を損ない、ユーザーがそのコンテンツの信頼性に疑問を抱く原因となります。
メタデータが正しくないか欠落している場合、リンク切れや 404 エラーが発生し、ユーザー エクスペリエンスが低下します。ユーザー エクスペリエンスが低下するその他の問題には、ページ タイトル、説明、または画像の不完全さ、重複コンテンツの問題、異なるページまたはセクション間でのブランドの一貫性の欠如、モバイル ユーザビリティの問題などがあり、エラーや不一致が発生するとユーザーが離脱する可能性が高くなります。
メタデータを適切に設定することで、これらの問題を回避し、ユーザーにとってより優れたエクスペリエンスを実現できます。
メタデータの用途
- 検索エンジン最適化 (SEO) : 検索エンジンはメタデータを使用して、特定の検索に対する Web ページの関連性や、検索エンジンが特定の Web ページをランク付けする方法を判断します。メタデータが正確で定義されているほど、検索エンジンはクエリに一致したときにそのメタデータをより適切に提供できるようになります。
- ソーシャル メディア共有: Facebook、Twitter、LinkedIn などのソーシャル メディア プラットフォームでは、Open Graph メタデータを使用して、Web サイトのコンテンツをフィードに表示します。これは、リンクが貼り付けられたときに様式化されたカードを表示するために使用される情報です。
- コンテンツの発見: メタデータは、ユーザーが自分の興味や好みに合ったコンテンツを見つけるのに役立ちます。
- リッチ スニペット: 検索エンジンは、Web サイトから構造化データを抽出して、検索結果にリッチ スニペットを表示できます。(5段階評価を星で表しているやつ)
私の大好きなHHKBを例に出すと写真の4.7の部分のことです。
メタデータの種類
- タイトル メタデータ: ブラウザ タブに表示される Web ページのタイトルを担当します。検索エンジンが Web ページの内容を理解するのに役立つため、SEO にとって非常に重要です。
- 説明メタデータ: このメタデータは、Web ページのコンテンツの簡単な概要を提供し、多くの場合、検索エンジンの結果に表示されます。
- キーワード メタデータ: このメタデータには、Web ページのコンテンツに関連するキーワードが含まれており、検索エンジンがページをインデックスするのに役立ちます。
- Open Graph メタデータ: このメタデータは、タイトル、説明、プレビュー画像などの情報を提供することで、ソーシャルメディアプラットフォームで共有されるときにWebページが表示される方法を強化します。
-
ファビコン メタデータ: このメタデータは、ブラウザのアドレス バーまたはタブに表示されるファビコン (小さなアイコン) を Web ページにリンクします。
公式サイトよりファビコンの設定はファイルでもできるようです
import { ImageResponse } from 'next/og'
// Image metadata
export const size = {
width: 32,
height: 32,
}
export const contentType = 'image/png'
// Image generation
export default function Icon() {
return new ImageResponse(
(
// ImageResponse JSX element
<div
style={{
fontSize: 24,
background: 'black',
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
}}
>
A
</div>
),
// ImageResponse options
{
// For convenience, we can re-use the exported icons size metadata
// config to also set the ImageResponse's width and height.
...size,
}
)
}
プロパティ | 役割 | 影響する範囲 |
---|---|---|
title | ページタイトル | 検索エンジン, ブラウザのタブ |
description | ページ説明 | 検索エンジンの結果ページ |
keywords | キーワード(現在は影響なし) | ほぼ無効 |
openGraph.title | SNSでのタイトル | Facebook, Twitter, LinkedIn など |
openGraph.description | SNSでの説明文 | Facebook, Twitter, LinkedIn など |
openGraph.url | シェア時のURL | SNS |
openGraph.image | シェア時の画像 | SNS(特に重要) |
openGraph.type | ページの種類 | SNS |
openGraph.site_name | サイト名 | SNS |
特に og:image が設定されていないと、SNSでのシェア時に画像が表示されずクリック率が下がる ので注意が必要です。
実際の使用方法
デフォルトでは、Next.jsは各ページのHTMLヘッダーセクションにページ タイトル、文字セット、ビューポート設定などの基本的なメタデータを含めます。以下は、新しく生成されたNext.js プロジェクトのHTMLです。
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<meta name="next-size-adjust" content="" />
<!-- script and link tags removed for brevity -->
</head>
ただし、このデフォルトの動作では、SEO やソーシャルメディアの最適化のための特定のメタデータは提供されません。
アプリケーションに独自のメタデータを追加する必要があります。多くの場合、ページごとに追加する必要があります。
Next.js は、アプリケーションのニーズに応じてメタデータをカスタマイズするためのいくつかのソリューションを提供します。
next/headの使用
最初のアプローチでは、Open Graph タグ、Twitter カード、その他の関連メタデータを含めることができる組み込みnext/head
コンポーネントを使用します。これにより、メタデータを特定のページやルートに合わせてカスタマイズできるため、検索結果やソーシャル メディア プラットフォームでコンテンツをどのように表示するかをより細かく制御できます。
import Head from 'next/head'
export default function Home() {
return (
<>
<Head>
<title>My Custom Title</title>
<meta name="description" content="This is my custom description for SEO." />
<meta name="keywords" content="Next.js, metadata, SEO" />
<meta property="og:title" content="My Custom Title" />
<meta property="og:description" content="Open Graph description for sharing." />
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1>Welcome to My Page</h1>
</main>
</>
)
}
metadataオブジェクトのエクスポート
App Routerを使用するNext.js のバージョンでは、metadataという適切な名前の変数をエクスポートしてページメタデータを定義することもできます。これにより、構造内でメタデータを定義できます。
export const metadata = {
title: 'Clerk | Authentication and User Management',
description:
'The easiest way to add authentication and user management to your application. Purpose-built for React, Next.js, Remix, and “The Modern Web”.',
keywords: ['Next.js', 'Authentication', 'User Management'],
openGraph: {
title: 'Clerk',
description: 'The best user management and authentication platform.',
url: 'https://xxx',
},
icons: {
icon: [
{
media: '(prefers-color-scheme: light)', // ライトモードの時
url: imageData.light,
href: imageData.path,
},
{
media: '(prefers-color-scheme: dark)', // ダークモードの時
url: imageData.dark,
href: imageData.path,
},
],
},
}
複数のページに同じ値を適用する場合は、metadataをレイアウトファイルからエクスポートすることもできます。これにより、そのレイアウトのすべての子ルートにメタデータが適用されます。
このアプローチは、メタデータが頻繁に変更されないページに最適です。
メタデータを動的に生成する
最後に、ページの読み込み時にメタデータ値を生成する場合は、generateMetadata()関数を使用して値を動的に設定できます。これは、ページ テンプレートが、読み込まれたデータに応じて異なる方法でレンダリングされる状況で使用されます。
ブログを例にすると、通常、すべての投稿をレンダリングするために使用されるページ テンプレートが1つあり、投稿スラッグがページ パラメータとして渡されます。次のスニペットは、このアプローチがどのように機能するかを示しています。スラッグは、そのページのメタデータを生成する前に、API から投稿のデータを取得するために使用されます。
export async function generateMetadata({ params }) {
const res = await fetch(`/api/posts/${params.slug}`)
const post = await res.json()
return {
title: post.title,
description: post.summary,
openGraph: {
title: post.title,
description: post.summary,
url: `https://xxx.com/blog/${params.slug}`,
images: [{ url: post.image }],
},
}
}
export default function BlogPost({ params }) {
return <h1>Blog Post: {params.slug}</h1>
}
データ ソースに基づいてページが動的に生成される場所では、このメソッドが使用されます。
Next.js メタデータ継承
Next.jsメタデータをカスタマイズする場合、すべてのルートで同じ値を指定する必要はありません。
Next.jsは、継承ルールが定義されていない場合、親ルートから子ルートに自動的に適用します。ブログの例では、Web サイトのルートの最上位レイアウトファイルに次のメタデータが定義されている場合です。
export const metadata = {
title: 'Clerk | Authentication and User Management',
description:
'The easiest way to add authentication and user management to your application. Purpose-built for React, Next.js, Remix, and “The Modern Web”.',
keywords: ['Next.js', 'Authentication', 'User Management'],
openGraph: {
title: 'Clerk',
description: 'The best user management and authentication platform.',
url: 'https://clerk.com',
},
}
また、ブログ投稿のメタデータを生成するこの機能もあります。
export async function generateMetadata({ params }) {
const res = await fetch(`/api/posts/${params.slug}`)
const post = await res.json()
return {
title: post.title,
description: post.summary,
openGraph: {
title: post.title,
description: post.summary,
url: `https://clerk.com/blog/${params.slug}`,
},
}
}
keywords関数内で値が明示的に定義されていない場合でも、ブログ投稿に値が設定されます。
generateMetadataこれは、値が存在する場合にのみ、子メタデータが親メタデータを上書きするためです。
動的なタイトルのテンプレートを設定する場合
export const metadata: Metadata = {
title: {
template: '%s | Authentication and User Management',
default:'Authentication and User Management',
},
default:'The easiest way to add authentication and user management to your application. Purpose-built for React, Next.js, Remix, and “The Modern Web”.',
metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};
例えば、ページごとに title を変えつつ、共通の接尾辞を付けたい場合に使う。
%s の部分が、各ページごとに設定された title に置き換えられる。
title.default:titleが指定されていないページでは、デフォルトのタイトルとして "Authentication and User Management"を表示する。
metadataBase(ベースURLの設定)
metadataBaseを指定すると、相対URLで設定したメタデータのURLが自動的に絶対URLに変換される。
SNSシェア時やSEOのためのURLの正規化に使われます。
ページ | title の設定 | 実際の出力 |
---|---|---|
/ (ホーム) | undefined | Authentication and User Management |
/settings | Settings | `Settings |
/profile | User Profile | `User Profile |
最後に
この記事が誰かの役にたてれば幸いです。
Discussion