check-og-metadata

name	check_og_metadata
description	Next.js 프로젝트의 Open Graph (OG) 메타태그 및 SEO 메타데이터 적용 상태를 분석하고 독립적 구현이 필요한 페이지를 추천합니다.

Open Graph (OG) 및 SEO 메타데이터 분석

이 스킬은 Next.js 애플리케이션이 소셜 미디어 공유 및 SEO를 위한 메타데이터를 적절히 구현했는지 점검합니다. 단순한 존재 여부 확인을 넘어, 공유 가치가 높은 페이지를 식별하고 구체적인 메타데이터 전략을 제안하는 것이 목표입니다.

사용법

프로젝트의 메타데이터 상태를 진단하고 싶을 때 실행하세요.

지침

1. 전역 메타데이터 (Global Metadata) 점검

src/app/layout.tsx (Root Layout) 파일을 검사하여 기본 설정이 되어 있는지 확인합니다.

1. 필수 항목 확인:

   • metadataBase: 절대 경로 URL 생성을 위해 필수입니다 (Warning 방지).
   • title.template: 하위 페이지에서 타이틀을 쉽게 조합하기 위해 설정되어 있는지 확인합니다.
   • openGraph: 기본 title, description, images, type이 설정되어 있는지 확인합니다.

   grep -E "metadataBase|openGraph|twitter" src/app/layout.tsx
   

2. 동적 페이지 (Dynamic Routes) 메타데이터 점검

[id] 또는 [slug]와 같은 동적 라우트 페이지를 찾고, generateMetadata 함수가 구현되어 있는지 확인합니다.

1. 동적 라우트 식별:

   find src/app -name "page.tsx" | grep "\["
   

2. generateMetadata 구현 확인:
   • 식별된 파일에 generateMetadata가 export 되어 있는지 확인합니다 (grep "export async function generateMetadata").
   • view_file로 코드를 열어, DB나 API에서 데이터를 가져와 title과 openGraph를 동적으로 생성하는지 확인합니다.

3. 고유 메타데이터 추천 (High-Value Pages Recommendation)

독립적인 메타데이터가 구현되어야 할 중요한 페이지를 식별하고 추천합니다.

1. 공유 가치 식별:

   • 다음과 같은 페이지는 반드시 독립된 OG 태그가 필요합니다:
     • 상세 페이지: 상품 상세, 글 상세, 강의 상세 등 (/products/[id], /notes/[id]) -> 해당 콘텐츠의 제목과 요약 필요.
     • 마케팅 페이지: 랜딩, 가격 정책, 이벤트 페이지 -> 클릭을 유도하는 매력적인 카피 필요.
     • 진입 페이지: 로그인, 회원가입 -> 서비스의 신뢰도를 주는 설명 필요.

2. 구현 추천 리포트 작성:

   • generateMetadata가 누락된 동적 페이지나, metadata 객체가 없는 주요 정적 페이지를 나열합니다.
   • 각 페이지에 적합한 title, description, openGraph 예시 코드를 제안합니다.

결과 보고 형식

분석 후 다음 리포트를 작성하세요:

• ✅ 전역 설정: metadataBase 등 필수 값 설정 여부.
• 🔍 분석 결과:
  • 동적 라우트: generateMetadata 구현 현황.
  • 주요 페이지: 개별 메타데이터 적용 현황.
• 💡 추천 사항:
  • 독립적 메타데이터가 필요한 페이지 목록.
  • 각 페이지별 추천 메타데이터 코드 (예: generateMetadata 구현 예시).