Next.js 15でのSEO最適化: Canonical URLとメタデータの実装ベストプラクティス

1https://example.com/article/web-performance
2https://example.com/article/web-performance/
3https://example.com/article/web-performance?utm_source=twitter
4https://example.com/article/WEB-PERFORMANCE

1import { Metadata } from 'next';
2
3export const defaultMetadata: Metadata = {
4  metadataBase: new URL(process.env.NEXT_PUBLIC_BASE_URL || 'https://tech.jugoya.ai'),
5  title: {
6    default: 'tech.jugoya.ai',
7    template: '%s | tech.jugoya.ai'
8  },
9  robots: {
10    index: true,
11    follow: true
12  }
13};
14

1import { Metadata, ResolvingMetadata } from 'next';
2import { formatTagForUrl, getOriginalCaseTag } from '@/lib/tags';
3
4type Props = {
5  params: Promise<{ tag: string }>;
6};
7
8export async function generateMetadata(
9  { params }: Props,
10  parent: ResolvingMetadata
11): Promise<Metadata> {
12  const { tag } = await params;
13  const originalCase = await getOriginalCaseTag(tag);
14  const canonicalPath = `/tags/${formatTagForUrl(originalCase)}`;
15  
16  return {
17    title: `${originalCase}の記事一覧`,
18    description: `tech.jugoya.aiの${originalCase}に関する記事一覧です。`,
19    alternates: {
20      canonical: canonicalPath,
21    },
22    openGraph: {
23      title: `${originalCase}の記事一覧 | tech.jugoya.ai`,
24      description: `tech.jugoya.aiの${originalCase}に関する記事一覧です。`,
25      url: canonicalPath,
26    },
27  };
28}

1/**
2 * タグのURL形式への変換
3 * - 小文字に統一
4 * - スペースをハイフンに変換
5 * - 特殊文字の除去
6 */
7export function formatTagForUrl(tag: string): string {
8  return tag
9    .toLowerCase()
10    .replace(/\s+/g, '-')
11    .replace(/[^a-z0-9-]/g, '');
12}
13
14/**
15 * オリジナルの大文字小文字を保持したタグの取得
16 */
17export async function getOriginalCaseTag(tag: string): Promise<string> {
18  const tags = await getAllTags();
19  return tags.find(t => formatTagForUrl(t) === tag) || tag;
20}

1const nextConfig: NextConfig = {
2  async redirects() {
3    return [
4      // トレーリングスラッシュの正規化
5      {
6        source: '/tags/:tag/',
7        destination: '/tags/:tag',
8        permanent: true
9      },
10      // 旧URLパターンの対応
11      {
12        source: '/category/:slug',
13        destination: '/tags/:slug',
14        permanent: true
15      }
16    ];
17  },
18};
19

1import { NextResponse } from 'next/server';
2import type { NextRequest } from 'next/server';
3import { formatTagForUrl } from '@/lib/tags';
4
5export async function middleware(request: NextRequest) {
6  const { pathname } = request.nextUrl;
7
8  // タグページのURL正規化
9  if (pathname.startsWith('/tags/')) {
10    const tag = decodeURIComponent(pathname.replace('/tags/', ''));
11    const normalizedTag = formatTagForUrl(tag);
12
13    // タグが正規化形式と異なる場合のみリダイレクト
14    if (tag !== normalizedTag) {
15      const url = request.nextUrl.clone();
16      url.pathname = `/tags/${normalizedTag}`;
17      
18      // クエリパラメータを保持
19      for (const [key, value] of request.nextUrl.searchParams.entries()) {
20        url.searchParams.set(key, value);
21      }
22      
23      return NextResponse.redirect(url, {
24        status: 308 // Permanent Redirect
25      });
26    }
27  }
28
29  return NextResponse.next();
30}

1import { Metadata } from 'next';
2
3/**
4 * サイト全体のデフォルトメタデータ設定
5 */
6export const defaultMetadata: Metadata = {
7  metadataBase: new URL(process.env.NEXT_PUBLIC_BASE_URL || 'https://tech.jugoya.ai'),
8  title: {
9    default: 'tech.jugoya.ai',
10    template: '%s | tech.jugoya.ai'
11  },
12  description: 'Web技術とAIに関する実践的な知見を共有するテックブログ',
13  openGraph: {
14    type: 'website',
15    locale: 'ja_JP',
16    siteName: 'tech.jugoya.ai',
17    images: ['/api/og/default.png']
18  },
19  twitter: {
20    card: 'summary_large_image',
21    creator: '@yonaka'
22  },
23  alternates: {
24    canonical: '/',
25    types: {
26      'application/rss+xml': '/feed.xml'
27    }
28  },
29  robots: {
30    index: true,
31    follow: true,
32    nocache: false,
33    googleBot: {
34      index: true,
35      follow: true,
36      'max-video-preview': -1,
37      'max-image-preview': 'large',
38      'max-snippet': -1
39    }
40  }
41};
42
43/**
44 * メタデータのマージユーティリティ
45 */
46export function mergeMetadata(base: Metadata, override: Metadata): Metadata {
47  return {
48    ...base,
49    ...override,
50    openGraph: {
51      ...base.openGraph,
52      ...override.openGraph
53    },
54    robots: {
55      ...base.robots,
56      ...override.robots
57    }
58  };
59}

1import { Metadata, ResolvingMetadata } from 'next';
2import { getPostBySlug } from '@/lib/posts';
3import { mergeMetadata, defaultMetadata } from '@/types/metadata';
4
5type Props = {
6  params: Promise<{ slug: string }>;
7};
8
9export async function generateMetadata(
10  { params }: Props,
11  parent: ResolvingMetadata
12): Promise<Metadata> {
13  const { slug } = await params;
14  const post = await getPostBySlug(slug);
15  const canonicalPath = `/blog/${post.slug}`;
16
17  const postMetadata: Metadata = {
18    title: post.meta.title,
19    description: post.meta.description,
20    openGraph: {
21      title: post.meta.title,
22      description: post.meta.description,
23      type: 'article',
24      publishedTime: post.meta.publishedAt,
25      authors: [post.meta.author?.name],
26      images: post.meta.ogImage ? [post.meta.ogImage] : undefined
27    },
28    alternates: {
29      canonical: canonicalPath
30    }
31  };
32
33  return mergeMetadata(defaultMetadata, postMetadata);
34}