Communitygithub.com

ランディングページ SEO プランナー

コード作成前に、ランディングページの包括的な SEO 計画を生成します。サイト構造、ページごとのメタタグ、スキーママークアップタイプ、XMLサイトマップ設定、robots.txt、AI検索最適化ヒントをカバーします。landing-page-copy の後、ビルドの前に呼び出します。

ランディングページ SEO プランナー とは？

このスキルは、AIエージェント（例：Claude Code、Cursor）がランディングページのコピー作成後、コード生成前に実行する構造化SEO計画を提供します。主な目的は、SEOのベストプラクティスをコード生成段階にシームレスに統合することです。入力として、会社名、業界、ページリスト、およびlanding-page-copyからのコンテンツ概要を受け取り、6つのステップで詳細な計画を出力します。各ステップでは、サイトアーキテクチャの検証（業界に最適なページ構成の評価）、ページごとのメタタグ生成（タイトル、メタディスクリプション、OGタグ）、JSON-LDスキーママークアップ計画（Organization、WebSite、Offer、FAQPage、Article、BreadcrumbListなど）、XMLサイトマップ設定（優先度と変更頻度）、Core Web Vitalsの最適化ヒント（画像、フォント、CSS、JavaScript）、そしてAI検索エンジン（AI Overviews、Perplexity、ChatGPT）からの引用可能性を高めるための構造化ヒントを含みます。最終的な出力は、コード生成フェーズに直接渡すことができる、一貫性のあるSEO_PLANマークダウンブロックです。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Demian-T/plugin-landing-page-creation/tree/HEAD/skills/landing-page-seo
オリジナルを見る→すべてのスキルを見る

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

ランディングページ 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個]

タイトルタグのルール:

  • ホームページ: {主要キーワード} | {会社名} または {会社名} — {中核となる価値提案}
  • 機能/価格ページ: {機能/価格} {会社} — {メリット}
  • ブログ: {記事タイトル} | {会社ブログ}
  • SERPでの切り捨てを避けるため50-60文字

メタディスクリプションのルール:

  • ページごとにユニーク — コピーペースト不可
  • 主要キーワードを自然に含める
  • ソフトCTA: 「見つける」、「無料で始める」、「プランを比較する」
  • 最大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 を指定

フォント:

  • next/font/google を display: 'swap' で使用
  • <head> 内の fonts.googleapis.com に preconnect を追加

CSS:

  • CSS変数を使用 — テーマ切り替え時のクラス名再計算を回避
  • CSS内の @import を避ける（代わりに next/font を使用）

JavaScript:

  • 'use client' はインタラクティブなコンポーネント（DarkModeToggle、ContactForm、Pricing toggle）のみに使用
  • 静的なセクション（ヒーローテキスト、機能、フッター）はサーバーコンポーネント = JSバンドルコストなし

ステップ 6 — AI SEO（引用可能性/被引用可能性）ヒント

AI Overviews、Perplexity、ChatGPT がこのサイトを引用するためのヒント:

コード生成フェーズの構造ヒント:

  • FAQセクションは <dl> またはセマンティックなQ/A HTML（単なるdiv/pではない）を使用
  • ヒーローの統計情報は <data value="X"> でラップ
  • ブログ記事は <article> と <time datetime="..."> および明確な <h1> が必要
  • 導入事例は明示的な「課題 / 解決策 / 結果」のH2構造が必要
  • Aboutページは会社の連絡先情報に <address> が必要

コンテンツヒント:

  • 「{会社名}とは？」「{会社名}の仕組みは？」に直接答える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.

Demian-T/plugin-landing-page-creation

Generates a complete conversion-optimized content brief for a landing page. Applies copywriting methodology, CRO principles, and marketing psychology to produce all page copy before any code is written. Call this before building a landing page. Inputs: company_name, industry, tagline_hint (optional), target_audience (optional), cta_goal (optional).

Demian-T/plugin-landing-page-creation

Build a complete custom Next.js landing page from scratch. Triggered by /landing-page. Usage: /landing-page CompanyName | industry [| tagline] [| target] [| CTA]. Orchestrates landing-page-copy then landing-page-seo + ui-ux-pro-max in parallel, then build.

関連スキル

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community