개발 slecs

검색·소셜 메타데이터 누락 해결

목차

요즘 웹서비스의 검색 엔진 노출과 소셜 쉐어 도달률은 메타데이터 품질에 직결된다. 이번 작업은 사이트에 거의 없었던 SEO 메타데이터들을 전면 보강한 경험을 기록해본다.

왜 이 작업이 필요했나

웹페이지의 <head> 섹션에 담긴 메타데이터는 검색 엔진이 페이지를 이해하는 주요 단서다. 페이지 제목, 설명, canonical 링크, OpenGraph 정보들이 여기에 들어간다. 사용자가 구글 검색 결과에서 보는 "제목+설명"은 모두 이 메타데이터로부터 나온다. 또한 사람들이 SNS에 링크를 공유할 때도 이 정보들이 미리보기로 표시된다.

그런데 이전 상태는 이런 메타데이터들이 거의 세팅되지 않아 있었다. 검색 결과에는 페이지 URL만 떴고, 소셜 쉐어시에는 제목 없이 링크만 나가는 상황이었다.

처음에는 "MVP 단계니까 나중에 하자" 싶을 수 있지만, 서비스가 커질수록 이런 간단한 메타데이터의 부재가 비즈니스에 영향을 미친다. 특히 이커머스나 콘텐츠 기반 서비스라면 검색 결과의 설명 텍스트가 클릭률(CTR)을 크게 좌우한다. 팀과 함께 우선순위를 논의한 결과, 이번 스프린트에서 이 기초 작업을 마무리하기로 했다.

추가한 메타 태그들

이번에 layout.tsx 에 추가한 SEO 메타 태그는 다음과 같다:

태그 용도 영향
title 검색 결과·브라우저 탭에 표시되는 제목 검색 CTR, UX
description 검색 결과에 표시되는 설명 (120~160자) 검색 결과 클릭률
canonical 중복 콘텐츠 제거, 검색 순위 통합 SEO 순위
og:title, og:description 페이스북·링크드인 쉐어시 표시되는 정보 소셜 쉐어 미리보기
og:image 소셜 쉐어시 표시될 이미지 소셜 공유 어필도
twitter:card, twitter:image 트위터/X 카드 스타일·이미지 트위터 쉐어 미리보기

각 태그는 독립적이지만 함께 작동한다. 검색 결과에서 유입된 사용자가 다시 SNS에서 공유할 때, og 이미지와 설명이 세련되게 표시되면 클릭률이 훨씬 높아진다.

layout.tsx 에서 중앙 관리하는 이유

이 변경을 src/app/layout.tsx 에서 처리한 것이 설계의 핵심이다. Next.js 13+ 의 App Router 에서는 layout 파일이 모든 하위 페이지의 기본 레이아웃을 정의한다. 여기서 메타데이터를 세팅하면:

  • 글로벌 기본값: 모든 페이지가 자동으로 기본 메타데이터를 상속받음
  • 페이지별 override: 각 page.tsx 에서 필요시 해당 페이지 맞춤 메타데이터로 덮어쓰기 가능
  • 일관성 유지: 사이트 전체 SEO 전략을 한 곳에서 관리
  • 개발 속도: 새 페이지 추가시 기본 SEO가 자동으로 적용됨
// 예시: Next.js Metadata API 패턴
export const metadata = {
  title: '서비스명',
  description: '서비스 설명 (120~160자)',
  icons: { icon: '/favicon.ico' },
  openGraph: {
    type: 'website',
    url: 'https://example.com',
    title: '서비스명',
    description: '서비스 설명',
    images: [{ url: '/og-image.png', width: 1200, height: 630 }],
  },
  twitter: {
    card: 'summary_large_image',
    title: '서비스명',
    images: ['/twitter-image.png'],
  },
};

회고: SEO 작업의 함정과 교훈

지금까지 SEO 작업을 팀과 함께 진행하면서 배운 점들이 있다:

  • 메타데이터는 "선택"이 아니라 "필수": 초기에는 무시해도 되는 것처럼 보이지만, 시간이 지나면서 사용자 유입과 직결된다
  • 소셜 쉐어는 예상보다 중요: 특히 B2C 서비스라면 SNS 공유가 트래픽의 상당 부분을 차지한다. 전략적으로 og:image 를 신경 써야 한다
  • 검증이 빠지기 쉬움: 코드 작업 후 실제로 Google Search Console, Facebook Debugger, Twitter Card Validator 에서 미리보기를 확인하는 단계를 자주 놓친다
  • canonical 태그는 환경마다 다름: 개발/스테이징/프로덕션 환경에서 canonical URL이 정확히 설정되지 않으면 검색 순위가 분산된다. 환경별 base URL 관리가 필수다

이런 SEO 작업을 다시 할 때는 메타데이터 세팅 → 동적 메타데이터 생성 (예: 상품별 고유 이미지) → 구조화된 데이터(schema.org) 추가 순서로 진행할 생각이다.

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

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

이어보기

댓글 0

첫 댓글 달아줘.