apppro.kr SEO/메타태그 최적화 Implementation Plan

For Claude: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

Goal: apppro.kr Lighthouse SEO 90점 달성 + Google Search Console 색인 최적화 (O3 브랜드 지표 해소)

Architecture: 코드 변경 최소화 — 메타데이터/JSON-LD 보강 위주. 기존 구조(Next.js App Router) 유지.

Tech Stack: Next.js 15 App Router, TypeScript, Drizzle ORM, Vercel

관련 태스크: 36d2bd38 (SNS/블로그/이메일 콘텐츠 시퀀스)

현황 스냅샷 (2026-02-25 기준)

Task 1: Sitemap 보강

Files:

• Modify: projects/apppro-kr/current-site/src/app/sitemap.ts

현재 누락 항목: /quote, /subscribe 페이지

Step 1: sitemap.ts에 누락 URL 추가

// staticPages 배열에 추가
{
  url: "https://apppro.kr/quote",
  lastModified: new Date(),
  changeFrequency: "monthly" as const,
  priority: 0.8,
},
{
  url: "https://apppro.kr/subscribe",
  lastModified: new Date(),
  changeFrequency: "monthly" as const,
  priority: 0.6,
},

Step 2: 빌드 확인

cd projects/apppro-kr/current-site && npm run build 2>&1 | tail -10

Expected: ✓ Compiled successfully

Step 3: 커밋

git add projects/apppro-kr/current-site/src/app/sitemap.ts
git commit -m "feat(apppro-seo): add /quote and /subscribe to sitemap"

Task 2: OG Image 개선 (글로벌 fallback)

Files:

• Modify: projects/apppro-kr/current-site/src/app/layout.tsx

문제: apppro-logo.png는 정사각형 로고로 1200×630 OG 비율에 맞지 않음. 해결: /og-default.png (1200×630) 신규 이미지 사용 — 없으면 기존 로고 유지(낮은 우선순위).

Step 1: 기존 OG 이미지 크기 확인

file projects/apppro-kr/current-site/public/apppro-logo.png 2>/dev/null || echo "not found"
identify projects/apppro-kr/current-site/public/apppro-logo.png 2>/dev/null | head -1

Step 2: OG 이미지가 1200×630이 아닌 경우

• 기존 로고 이미지 크기에 맞게 width/height 수정 (실제 크기로)
• 또는 /public/og-default.png 1200×630 이미지 추가 후 경로 변경

// layout.tsx:36-43 수정 예시 (실제 크기 적용)
images: [
  {
    url: "https://apppro.kr/apppro-logo.png",
    width: 실제_너비,   // 실측값
    height: 실제_높이,  // 실측값
    alt: "앱프로 - AI 기반 앱/MVP 개발 전문 스튜디오",
  },
],

Step 3: 커밋

git add projects/apppro-kr/current-site/src/app/layout.tsx
git commit -m "fix(apppro-seo): fix OG image dimensions"

Task 3: 서비스 페이지 메타태그 확인 및 보강

Files:

• Read: projects/apppro-kr/current-site/src/app/services/page.tsx
• Read: projects/apppro-kr/current-site/src/app/services/ai-automation/page.tsx
• Read: projects/apppro-kr/current-site/src/app/about/page.tsx
• Read: projects/apppro-kr/current-site/src/app/contact/page.tsx

Step 1: 각 페이지 metadata 확인

grep -n "export const metadata\|openGraph\|images" \
  projects/apppro-kr/current-site/src/app/services/page.tsx \
  projects/apppro-kr/current-site/src/app/about/page.tsx \
  projects/apppro-kr/current-site/src/app/contact/page.tsx

Step 2: OG images 누락된 페이지에 추가

누락된 페이지마다:

export const metadata: Metadata = {
  title: "페이지 제목 - 앱프로",
  description: "페이지 설명 120-160자",
  openGraph: {
    title: "페이지 제목",
    description: "페이지 설명",
    url: "https://apppro.kr/해당-경로",
    images: [{ url: "https://apppro.kr/apppro-logo.png", width: 실측값, height: 실측값, alt: "설명" }],
  },
};

Step 3: 커밋 (변경사항 있을 경우)

git add projects/apppro-kr/current-site/src/app/services/ projects/apppro-kr/current-site/src/app/about/ projects/apppro-kr/current-site/src/app/contact/
git commit -m "feat(apppro-seo): add OG metadata to service/about/contact pages"

Task 4: Contact 페이지 JSON-LD 추가

Files:

• Modify: projects/apppro-kr/current-site/src/app/contact/page.tsx

Step 1: contact/page.tsx에 ContactPoint JSON-LD 추가

const contactJsonLd = {
  "@context": "https://schema.org",
  "@type": "ContactPage",
  "name": "앱프로 문의",
  "url": "https://apppro.kr/contact",
  "contactOption": {
    "@type": "ContactPoint",
    "contactType": "customer support",
    "email": "contact@apppro.kr",
    "availableLanguage": "Korean"
  }
};

JSX에 삽입:

<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify(contactJsonLd) }}
/>

Step 2: 빌드 확인

cd projects/apppro-kr/current-site && npm run build 2>&1 | tail -5

Step 3: 커밋

git add projects/apppro-kr/current-site/src/app/contact/page.tsx
git commit -m "feat(apppro-seo): add ContactPage JSON-LD to contact page"

Task 5: 빌드 최종 확인 + git push

Step 1: 전체 빌드

cd projects/apppro-kr/current-site && npm run build 2>&1 | tail -15

Expected: ✓ Compiled successfully

Step 2: push (Vercel 자동 배포 트리거)

cd /Users/nbs22/(Claude)/(claude).projects/business-builder
git push

Expected: GitHub push 완료 → Vercel 자동 빌드 시작

Step 3: Vercel 배포 확인 후 Lighthouse 점수 측정

배포 완료 후:

# Lighthouse CLI (설치된 경우)
npx lighthouse https://www.apppro.kr --only-categories=seo --output=json 2>&1 | grep '"score"' | head -3

또는 브라우저 DevTools → Lighthouse → SEO 탭 확인 Expected: SEO 점수 90점 이상

Step 4: sitemap 검증

curl -s "https://www.apppro.kr/sitemap.xml" | grep -c "<url>"
# Expected: 10+ URL (static + blog posts)

완료 체크리스트

• sitemap.ts에 /quote, /subscribe 추가됨
• OG image dimensions 정확히 설정됨
• 서비스/about/contact 페이지 OG metadata 완비
• contact 페이지 ContactPage JSON-LD 추가됨
• 빌드 PASS (에러 없음)
• git push 완료
• Lighthouse SEO 90점 이상 확인
• sitemap.xml 정상 노출 확인

롤백 플랜

빌드 실패 시:

git revert HEAD
git push

우선순위 요약 (MVP):

1. Task 1 (sitemap) — 가장 빠른 색인 개선
2. Task 3 (서비스 페이지 OG) — Rich Preview 품질
3. Task 4 (Contact JSON-LD) — Rich Results 완성도
4. Task 2 (OG image) — 실제 이미지 있을 때만
5. Task 5 (최종 확인) — 항상 마지막