루트 레이아웃 한 파일로 서비스 전체 SEO 메타 일괄 정비

layout.tsx 한 파일에서 메타 풀세트를 뜯어고쳤다.

왜 지금 이 작업이었나

SEO 작업은 늘 "나중에"로 밀린다. 기능이 먼저고, 퍼포먼스가 다음이고, SEO는 그 다음이다. 근데 어느 시점에서 크롤러 리포트를 열어보면 og:image:alt 누락, robots 미설정, publisher 없음 같은 항목들이 쌓여 있다. 이번에 insightflow 서비스 메타 전반을 점검하면서 "이건 한 번에 밀어넣자"고 판단했다.

변경 파일이 src/app/layout.tsx 하나라는 게 포인트다. Next.js App Router 구조에서 layout.tsx는 모든 페이지의 메타를 책임지는 루트 레이아웃이다. 여기서 metadata 오브젝트를 제대로 채우면 하위 모든 페이지에 기본값이 내려가고, 각 페이지 단에서 오버라이드하는 구조가 된다. 반대로 여기가 빈 채로 있으면 페이지마다 따로따로 메타를 박아야 하는데, 그게 일관성도 없고 누락도 잦다. 루트에서 한 번에 잡는 게 맞다.

이번에 채운 항목들

사실 keywords는 구글이 공식적으로 랭킹 시그널로 안 쓴 지 오래다. 그래도 Bing, 네이버, 그리고 LLM 기반 검색 엔진들이 아직 참조하는 경우가 있어서 빼지 않았다. "이거 효과 있어요?" 질문을 팀에서 받으면 "손해는 없고 이득 가능성은 있다"고 답한다.

robots는 특히 신경 쓴 부분이다. 기본값이 index, follow라 명시 안 해도 동작은 하지만, 명시적으로 선언해 두는 게 나중에 스테이징/프로덕션 분기 처리할 때 훨씬 낫다. 스테이징에서 noindex로 오버라이드하는 패턴을 쓰려면 루트에 robots 선언이 먼저 있어야 한다.

og:image:alt는 접근성 맥락에서 챙겨야 하는 항목인데 빠지는 경우가 많다. OG 이미지가 아무리 예뻐도 alt가 없으면 스크린리더 환경에서 의미 없고, 일부 SNS 플랫폼에서 공유 미리보기 품질 점수에도 영향을 준다.

코드 패턴

Next.js App Router에서 이렇게 구성했다.

// src/app/layout.tsx
export const metadata: Metadata = {
  keywords: ['...'],
  authors: [{ name: '...' }],
  publisher: '...',
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
    },
  },
  openGraph: {
    images: [
      {
        url: '/og-image.png',
        alt: '...',
      },
    ],
  },
};

robots를 문자열 "index, follow" 대신 오브젝트로 넣은 이유는 googleBot 하위 옵션을 따로 제어할 수 있어서다. 구글봇에만 특정 크롤링 제한을 걸고 싶을 때 문자열 방식으론 안 된다.

회고

단일 파일 변경이지만 서비스 전체 SEO 기반을 바꾸는 작업이었다. 이런 작업을 코드리뷰할 때 주로 보는 건 "값이 하드코딩인가 환경변수 기반인가", "페이지별 오버라이드 전략은 설계되어 있나" 두 가지다. 루트 메타가 아무리 잘 채워져도 각 페이지가 덮어쓰는 구조가 없으면 결국 모든 페이지가 동일한 메타를 갖게 되고, 그건 SEO 관점에서 중복 콘텐츠 이슈를 만든다.

이번 풀세트 풍부화는 다음 단계인 페이지별 동적 메타 생성의 선행 조건이기도 하다. 루트가 깔끔하게 정의되어 있어야 각 페이지에서 generateMetadata로 오버라이드하는 작업이 예측 가능하게 돌아간다. 기반 없이 각 페이지 먼저 작업하면 나중에 뒤집는 게 더 고생이다.

끝.

🛒 이 글과 어울리는 추천 상품

• Next.js 메타데이터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.