Communitygithub.com

랜딩 페이지 SEO 기획자

코드 작성 전에 랜딩 페이지를 위한 완전한 SEO 계획을 생성합니다. 사이트 아키텍처, 페이지별 메타 태그, 스키마 마크업 유형, XML 사이트맵 설정, robots.txt 및 AI 검색 최적화 힌트를 다룹니다. landing-page-copy 이후, 빌드 전에 호출하세요.

랜딩 페이지 SEO 기획자란 무엇인가요?

이 스킬은 랜딩 페이지를 구축하기 전에 포괄적인 구조화된 SEO 계획을 수립하는 AI 비서입니다. 프랑스어 시장(기본값)을 대상으로 하며, 회사 이름, 업종, 페이지 목록, 그리고 landing-page-copy에서 생성된 콘텐츠 브리프를 입력으로 받습니다. 6단계 프로세스를 통해 SEO 전략을 완성합니다: 1) 업종에 최적화된 사이트 아키텍처 검증 (예: B2B SaaS는 /contact 페이지 필요), 2) 각 페이지의 메타 태그 생성 (제목, 설명, OG 태그, 키워드), 3) 페이지 유형별 JSON-LD 스키마 마크업 계획 (Organization, Offer, Article, FAQPage 등), 4) XML 사이트맵 우선순위 및 변경 빈도 설정, 5) Core Web Vitals 최적화 힌트 (next/image, next/font, 서버 컴포넌트 사용), 6) AI 검색(AI Overviews, Perplexity, ChatGPT)에서 인용될 수 있도록 시멘틱 HTML 구조와 FAQ 콘텐츠 힌트 제공. 최종 출력은 Next.js App Router 환경(app/layout.tsx, app/sitemap.ts, app/robots.ts)에 바로 주입 가능한 SEO_PLAN 마크다운 문서입니다. 이 스킬은 Claude Code, Cursor, Codex 등의 AI 에이전트와 함께 사용하도록 설계되었으며, 코드 생성 단계로 전달하기 전에 SEO 전략을 사전에 정의하여 검색 엔진 최적화와 AI 검색 가시성을 극대화합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Demian-T/plugin-landing-page-creation/tree/HEAD/skills/landing-page-seo

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

랜딩 페이지 SEO 기획자은(는) 무엇을 하나요?

구조화된 SEO 계획을 모든 페이지에 대해 생성합니다. 코드는 작성하지 않고 — app/layout.tsx, app/sitemap.ts, app/robots.ts 및 페이지별 메타데이터에 주입할 준비가 된 SEO 설정만 제공합니다.

입력

  • {company_name} — 브랜드 이름
  • {industry} — 업종
  • {pages} — 포함할 페이지 목록 (기본값: /, /tarifs, /a-propos, /blog, /cas-clients)
  • {content_brief} — landing-page-copy의 히어로 헤드라인, 기능 카피 등

1단계 — 사이트 아키텍처 검증

기본 페이지 세트가 이 업종에 최적인지 평가합니다. 다음 사항을 질문하세요:

  1. 이 업종에 /contact 또는 /demo 독립 페이지가 필요한가? (B2B SaaS → 예)
  2. 높은 의도의 키워드 페이지가 누락되었는가? (예: /comparatif, /alternatives-[competitor], /[use-case])
  3. 이 업종에 /blog보다 /ressources 또는 /guides가 적절한가?
  4. 가격 페이지에 자체 /tarifs가 필요한가, 아니면 #pricing 앵커로 충분한가?

최종 페이지 목록을 URL, 제목, 목적과 함께 출력합니다. 기본값:

URL페이지 제목목적
/홈페이지전환 — 히어로 + 증거 + 기능
/tarifs요금제요금제 비교, 업그레이드 의도
/a-propos소개신뢰 구축, 브랜드 스토리
/blog블로그SEO 유기적 트래픽
/cas-clients고객 사례신뢰 + 결정 단계

업종에 강력히 정당화되는 경우 최대 2개의 추가 페이지를 추가합니다.


2단계 — 페이지별 메타 태그

각 페이지에 대해 다음을 생성합니다:

page:         [url]
title:        [50-60자. 기본 키워드는 앞쪽에. 브랜드명은 " | " 뒤에]
description:  [140-160자. 행동 동사. 혜택. 부드러운 CTA. 기본 키워드 포함.]
og_title:     [제목과 동일하거나 약간 더 매력적으로]
og_description: [설명과 동일하거나 대화체 변형]
keywords:     [이 페이지의 3-5개 기본 키워드]

제목 태그 규칙:

  • 홈페이지: {기본 키워드} | {회사명} 또는 {회사명} — {핵심 가치 제안}
  • 기능/가격: {기능/가격} {회사} — {혜택}
  • 블로그: {기사 제목} | {회사 블로그}
  • 50-60자: SERP 잘림 방지

메타 설명 규칙:

  • 페이지마다 고유 — 복사 금지
  • 기본 키워드를 자연스럽게 포함
  • 부드러운 CTA: "Découvrez", "Commencez gratuitement", "Comparez les plans"
  • 최대 140-160자

3단계 — 스키마 마크업 계획

각 페이지에 대해 구현할 JSON-LD 스키마를 지정합니다:

홈페이지 (/)

Organization {
  name, url, logo, description,
  sameAs: [소셜 프로필 URL — LinkedIn, Twitter/X, GitHub (해당 시)],
  contactPoint: { contactType: "customer service", availableLanguage: "French" }
}
WebSite {
  name, url,
  potentialAction: SearchAction (사이트 검색 기능이 있는 경우)
}

가격 페이지 (/tarifs)

// 각 요금제:
Offer {
  name, price, priceCurrency, description,
  seller: { "@type": "Organization", name }
}
FAQPage (가격 FAQ 섹션이 있는 경우) {
  mainEntity: [{ "@type": "Question", name, acceptedAnswer }]
}

블로그 게시물 페이지

Article {
  headline, datePublished, dateModified,
  author: { "@type": "Organization", name },
  publisher: { "@type": "Organization", name, logo },
  image, description
}
BreadcrumbList {
  itemListElement: [Home → Blog → Article]
}

고객 사례 페이지

Article (type: "TechArticle" 또는 일반)
BreadcrumbList {
  itemListElement: [Home → Cas clients → Case name]
}

소개 페이지 (/a-propos)

AboutPage {
  name, description, url,
  mainEntity: Organization (홈페이지와 동일)
}

SoftwareApplication 스키마 — 업종이 SaaS/기술인 경우 홈페이지에 추가:

SoftwareApplication {
  name, applicationCategory: "BusinessApplication",
  operatingSystem: "Web",
  offers: { price, priceCurrency }
}

4단계 — XML 사이트맵 설정

// sitemap.ts 항목
pages: [
  { url: "/",            changeFreq: "weekly",  priority: 1.0 },
  { url: "/tarifs",      changeFreq: "weekly",  priority: 0.9 },
  { url: "/a-propos",    changeFreq: "monthly", priority: 0.6 },
  { url: "/blog",        changeFreq: "daily",   priority: 0.8 },
  { url: "/cas-clients", changeFreq: "monthly", priority: 0.7 },
  // 블로그 게시물:   changeFreq: "monthly",  priority: 0.6
  // 고객 사례:     changeFreq: "monthly",   priority: 0.7
]

전환 의도에 따라 우선순위 조정:

  • 높은 전환 의도 페이지 (/, /tarifs): 0.9-1.0
  • 신뢰 / 중간 퍼널 (/cas-clients): 0.7-0.8
  • 상단 퍼널 / 콘텐츠 (/blog, /a-propos): 0.5-0.7

5단계 — Core Web Vitals 힌트

계획된 구성 요소를 기반으로 다음 빌드 타임 최적화를 플래그합니다:

이미지:

  • 히어로 이미지에 next/image와 priority={true} 사용
  • unoptimized: true (정적 내보내기) 및 사전 최적화된 에셋을 통한 WebP 형식
  • CLS 방지를 위해 명시적인 width 및 height 설정

폰트:

  • display: 'swap'과 함께 next/font/google 사용
  • <head>에 preconnect를 fonts.googleapis.com에 추가

CSS:

  • CSS 변수 사용 — 테마 전환 시 클래스 이름 재계산 방지
  • CSS에서 @import 사용 피하기 (대신 next/font 사용)

JavaScript:

  • 'use client'는 대화형 구성 요소에만 사용 (DarkModeToggle, ContactForm, Pricing toggle)
  • 정적 섹션 (Hero 텍스트, Features, Footer) = 서버 구성 요소 = JS 번들 비용 없음

6단계 — AI SEO (인용 가능성) 힌트

AI 개요, Perplexity, ChatGPT가 이 사이트를 인용할 수 있도록:

코드 생성 단계를 위한 구조 힌트:

  • FAQ 섹션은 <dl> 또는 시맨틱 Q/A HTML (단순 div/p 아님)을 사용해야 함
  • 히어로의 통계는 <data value="X">로 감싸야 함
  • 블로그 기사는 <article>과 <time datetime="...">, 명확한 <h1>이 필요함
  • 고객 사례는 명시적인 "Challenge / Solution / Result" H2 구조가 필요함
  • 소개 페이지는 회사 연락처 정보에 <address>가 필요함

콘텐츠 힌트:

  • “What is {company_name}?”와 “How does {company_name} work?”에 직접 답하는 FAQ 답변 1-2개 포함 (AI가 직접 인용)
  • 블로그 기사는 첫 번째 문단에 TL;DR 요약을 포함해야 함
  • 통계는 출처/맥락을 포함해야 함 (내부 데이터라도: "고객 데이터 기반")

출력 형식

계획을 SEO_PLAN으로 출력합니다:

## SEO_PLAN

### page_list
[추가 사항이 포함된 최종 페이지 목록]

### meta_tags
[페이지별 제목, 설명, og_title, og_description, keywords]

### schema_plan
[페이지별 스키마 유형 + 주요 필드]

### sitemap_config
[페이지별 우선순위 + changeFreq]

### build_hints
[CWV + AI SEO 힌트: 코드 생성 단계로 전달]

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

관련 스킬