最終確認日
Next.jsのブログサイトにcanonicalを設定する
概要
Next.jsのブログ記事がインデックスされないための対応策の１つとしてcanonicalを実装する。
参考
実装
- 日本語はエンコードされている状態にする
aliternates: { canonical: url }に設定- canonicalは絶対パスで指定する
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const { slug } = await params;
const decodedSlug = decodeURIComponent(slug);
const post = await getPost(decodedSlug);
if (!post) return {};
// 日本語パスはencodeされた状態する
const url = `${process.env.NEXT_PUBLIC_SITE_URL}/${post.category}/${slug}`
return {
post.title,
post.description,
alternates: {
canonical: url,
},
};
}
公開日
更新日