Next.js 13でのmetaタグの管理にはMetadata APIを使用しますが、その際canonicalの表示に少しハマったのでメモします。
Metadata APIとは
Next.js 12以前まではHeadコンポーネントを利用して直接書いていましたが、Next.js 13以降では推奨されていません。
index.tsx
import Head from 'next/head'
function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
<meta property="og:title" content="My page title" key="title" />
<link rel="canonical" href="https://example.com/" />
</Head>
</div>
)
}
export default IndexPage
以下のコードは公式サイトのドキュメントに記載されているものです。
静的ページの場合はmetadata関数内にメタデータを記述します。動的ページはgenerateMetadata関数を利用して記事ページなどのIDをparamsとして受け取り、そこからフェッチしたデータからメタデータを取得します。
layout.tsx
import { Metadata } from 'next'
// 静的メタデータの場合
export const metadata: Metadata = {
title: '...',
}
layout.tsx
import { Metadata } from 'next'
type Props = {
params: { id: string }
}
// 動的メタデータの場合
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const { id } = params
const post = await fetch(`endpoint/${id}`).then((res) => res.json())
return {
title: post.title,
}
}
canonicalはalternateもセットに考える
ただし、canonicalはそのままcanonicalと記述するとエラーとなるため、以下のようにalternatesプロパティを使う必要があります。
layout.tsx
import { Metadata } from 'next'
// 静的メタデータの場合
export const metadata: Metadata = {
title: "Your title",
description: "Your meta description",
- canonical: "https://example.com",
+ alternates: {
+ canonical: "https://example.com",
+ },
}
layout.tsx
import { Metadata } from 'next'
type Props = {
params: { id: string, slug: string }
}
// 動的メタデータの場合
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const { id, slug } = params;
const post = await fetch(`endpoint/${id}`).then((res) => res.json());
return {
title: post.title,
description: post.description,
- canonical: `https://example.com/${slug}`,
+ alternates: {
+ canonical: `https://example.com/${slug}`,
+ },
};
}
私自身alternateタグを意識して使ったことがなかったのですが、PC用ページとは別にスマホ用ページが存在する場合、URL正規化するためにGoogleに伝えるのがalternateタグだそうです。
Metadata APIの場合、alternateとcanonicalをセットとして覚える必要がありそうですね。
参考資料
この記事はこちらを参考に作成しました。