개발 slecs

루트 레이아웃에 OG·canonical·네이버 인증 메타 태그 일괄 적용

목차

src/app/layout.tsx 한 파일에 메타 태그 묶음을 한 번에 밀어 넣었다.

작업 자체는 단순해 보이지만, 이런 SEO 관련 변경은 사실 타이밍이 꽤 중요하다. 서비스가 어느 정도 모양이 갖춰진 뒤에도 메타 태그 정리가 밀려 있는 경우가 많은데, 늦으면 늦을수록 크롤러가 이미 "미완성 버전"을 캐싱해 버려서 정정하는 데 시간이 더 걸린다. 그래서 이번엔 기능 배포 사이클이 조금 숨통이 트인 틈을 타서 한 번에 처리하기로 했다.

뭘 넣었냐

크게 네 가지다.

항목 역할 누락됐을 때
OG 태그 카카오·페이스북 등 SNS 링크 공유 시 썸네일/제목/설명 링크 공유 시 빈 카드 또는 임의 이미지
Twitter Card X(트위터) 공유 미리보기 텍스트 링크로만 표시
canonical 중복 URL 대표 주소 명시 검색엔진이 중복 페이지로 판단, 점수 분산
Naver 인증 메타 네이버 서치어드바이저 소유권 인증 네이버 색인/통계 수집 불가

이걸 layout.tsx의 metadata export에 한 번에 때려 박았다. Next.js App Router 기준으로 metadata 객체를 루트 레이아웃에 선언하면 하위 페이지가 별도로 override 하지 않는 한 전역으로 상속되기 때문에, 공통 기본값을 여기서 잡아 두는 게 맞다.

// src/app/layout.tsx (패턴 예시)
export const metadata: Metadata = {
  metadataBase: new URL('https://example.com'),
  title: {
    default: '서비스명',
    template: '%s | 서비스명',
  },
  openGraph: {
    type: 'website',
    siteName: '서비스명',
    images: [{ url: '/og-image.png', width: 1200, height: 630 }],
  },
  twitter: {
    card: 'summary_large_image',
    site: '@handle',
  },
  alternates: {
    canonical: '/',
  },
  verification: {
    other: {
      'naver-site-verification': 'XXXXXX',
    },
  },
};

포인트는 metadataBase를 반드시 선언해야 한다는 거다. 이게 없으면 openGraph.images 같은 상대 경로가 실제 절대 URL로 변환되지 않아서 SNS 크롤러가 이미지를 못 가져온다. 팀에서 처음 OG 설정할 때 이 부분에서 한 번씩 막히는 경우를 꽤 봤다.

canonical은 왜 넣어야 하나

검색엔진 입장에서 https://example.com, https://example.com/, https://www.example.com 은 사람 눈엔 같아도 엄연히 다른 URL이다. 여기다 쿼리 파라미터(?ref=, ?utm_source= 등)까지 붙으면 같은 콘텐츠가 수십 개의 URL로 쪼개지는 상황이 발생한다. canonical은 "이 URL들 중 이게 진짜야"라고 크롤러에게 알려 주는 힌트다. 힌트가 없으면 점수가 분산되고, 원하는 URL이 색인의 우선순위에서 밀릴 수 있다.

루트 레이아웃에 기본 canonical을 박아 두면, 각 페이지 레벨에서 generateMetadata로 override 하지 않는 한 최소한의 안전망이 생기는 셈이다.

구글 Search Console은 DNS 인증이나 파일 업로드 방식도 있어서 HTML 메타 방식을 안 쓰는 팀도 있는데, 네이버 서치어드바이저는 메타 태그 방식이 가장 무난하다. 문제는 이게 <head> 안에 들어가야 하는데, App Router 구조에서는 layout.tsx의 metadata가 가장 깔끔한 위치다. 별도 컴포넌트로 빼거나 next/head를 쓰려다 삽질하는 경우가 있으니, 처음부터 metadata.verification에 넣는 게 낫다.

변경 파일이 layout.tsx 하나뿐이라는 게 이번 작업의 의도를 잘 보여 준다. 핀포인트로, 전역 기본값 한 군데만 건드린 것. 나중에 특정 페이지가 OG 이미지나 제목을 다르게 가져가야 할 때는 해당 페이지 page.tsx에서 generateMetadata를 따로 선언하면 된다. 지금은 기반을 깔았다고 보면 된다.

배포 후엔 꼭 확인해야 할 것들이 있다.

  • 카카오 공유 디버거 로 OG 캐시 갱신
  • Meta Sharing Debugger 로 이미지 resolve 확인
  • 네이버 서치어드바이저에서 인증 버튼 클릭 → "확인됨" 상태 체크
  • <head> 소스 직접 열어서 canonical href 값이 의도한 URL인지 육안 확인

이 체크를 빠뜨리면 배포는 됐는데 실제 크롤러엔 반영이 안 되는 상황이 생긴다. 특히 OG 이미지는 SNS 플랫폼들이 캐싱을 꽤 오래 들고 있어서, 디버거로 강제 갱신을 안 하면 며칠이 지나도 구버전이 보일 수 있다.

다음엔 페이지별 generateMetadata 분리 작업.

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

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

이어보기

댓글 0

첫 댓글 달아줘.