Next.js 레이아웃 canonical 상속의 함정 — 놀이터 240개가 홈 중복이 된 이유

Next.js App Router에서 루트 layout의 metadata에 canonical을 넣으면, 자기 alternates를 정하지 않은 모든 하위 페이지가 그 값을 그대로 물려받아 "내 대표 주소는 홈페이지"라고 선언하게 된다. canonical은 루트 레이아웃에 절대 두면 안 되는 값이다.

구글이 영삼넷 글을 잘 색인하지 않아서 사이트 전체를 점검하다가 찾은 문제다. 놀이터 페이지 약 240개가 구글 입장에선 홈페이지의 사본이었다. 원인은 루트 레이아웃 한 줄이었다. 같은 점검에서 나온 중복 글 정리와 사이트맵 lastmod 문제는 다른 글에서 따로 다룬다.

• 루트 layout.tsx에 alternates: { canonical: 'https://youngsam.net/' }가 있었고, 자기 canonical이 없는 하위 페이지는 전부 이 값을 상속했다.
• 놀이터(개발 도구, 미니게임, 코딩 챌린지 단계) 약 240개가 canonical=홈. 'use client' 페이지는 metadata가 아예 없어 제목·설명까지 홈과 똑같았다.
• 루트 canonical을 지우고, 공용 메타 헬퍼로 페이지마다 자기 주소 canonical과 고유 제목을 붙였다. 재점검에서 놀이터 250개와 전체 9,709개가 모두 정상이었다.

// app/layout.tsx — 고치기 전
import type { Metadata } from 'next'

export const metadata: Metadata = {
  metadataBase: new URL('https://youngsam.net'),
  title: { default: '영삼넷', template: '%s | 영삼넷' },
  description: '개발 노트와 무료 프로그램',
  alternates: { canonical: 'https://youngsam.net/' }, // 이 한 줄이 문제
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>{children}</body>
    </html>
  )
}

// app/layout.tsx — 고친 뒤
export const metadata: Metadata = {
  metadataBase: new URL('https://youngsam.net'),
  title: { default: '영삼넷', template: '%s | 영삼넷' },
  description: '개발 노트와 무료 프로그램',
  // canonical 없음 — 페이지마다 자기 주소를 직접 정한다
}

// app/page.tsx — 홈만 홈을 가리킨다
export const metadata: Metadata = {
  alternates: { canonical: '/' },
}

// lib/playground-meta.ts
import type { Metadata } from 'next'

const SUFFIX = ' — 영삼넷 놀이터'

export function playgroundMeta(path: string, name: string, description: string): Metadata {
  const title = name + SUFFIX
  return {
    title: { absolute: title },
    description,
    alternates: { canonical: path },          // 자기 자신
    openGraph: { title, description, url: path },
  }
}

export function stageMeta(base: string, challenge: string, stage: { id: string; no: number; title: string; goal: string }) {
  return playgroundMeta(
    base + '/' + stage.id,
    challenge + ' ' + stage.no + '단계: ' + stage.title,   // 예: 정규식 챌린지 5단계: 그룹 + 대체
    stage.goal,
  )
}

// app/playground/<도구>/layout.tsx  (서버 컴포넌트, 'use client' 없음) — 경로·이름은 예시
import { playgroundMeta } from '@/lib/playground-meta'

export const metadata = playgroundMeta(
  '/playground/json-formatter',
  'JSON 포매터',
  '붙여 넣은 JSON을 정렬하고 문법 오류 위치를 알려 주는 브라우저 도구',
)

export default function Layout({ children }: { children: React.ReactNode }) {
  return children
}

// 같은 폴더의 page.tsx는 그대로 'use client' 컴포넌트

import re, urllib.request
from concurrent.futures import ThreadPoolExecutor

UA = 'Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)'
LOC = re.compile(r'<loc>\s*([^<\s]+)\s*</loc>')
CANON = re.compile(r'<link[^>]+rel=["\']canonical["\'][^>]*href=["\']([^"\']+)', re.I)
TITLE = re.compile(r'<title[^>]*>(.*?)</title>', re.I | re.S)

def fetch(url):
    req = urllib.request.Request(url, headers={'User-Agent': UA})
    try:
        with urllib.request.urlopen(req, timeout=20) as r:
            return r.status, r.geturl(), r.read().decode('utf-8', 'replace')
    except urllib.error.HTTPError as e:
        return e.code, url, ''

def check(url):
    status, final, html = fetch(url)
    c, t = CANON.search(html), TITLE.search(html)
    canon = c.group(1) if c else None
    return url, status, canon, (t.group(1).strip() if t else ''), canon == url and final == url

_, _, index = fetch('https://youngsam.net/sitemap.xml')
urls = [u for sm in LOC.findall(index) for u in LOC.findall(fetch(sm)[2])]
with ThreadPoolExecutor(max_workers=16) as ex:
    for url, status, canon, title, ok in ex.map(check, urls):
        if status != 200 or not ok:
            print(status, url, '-> canonical:', canon, '|', title)

1. 루트 레이아웃에는 모든 페이지에 똑같이 맞는 값만 둔다. canonical은 절대 아니다.
2. 하위 페이지가 alternates를 정하지 않으면 부모 값이 통째로 내려온다. 정하면 객체 전체가 바뀐다.
3. 'use client' 페이지는 metadata를 내보낼 수 없으니 같은 폴더의 서버 layout.tsx로 준다.
4. 사이트맵은 숫자 반복이 아니라 페이지가 실제로 쓰는 데이터에서 만든다.
5. 눈으로 찾지 말고, 사이트맵 전수 점검 스크립트를 배포마다 돌린다.