SEO Optimizer

検索エンジン最適化（SEO）における包括的なガイダンス。コンテンツ、技術的な実装、戦略的計画を横断的にカバーし、オーガニック検索の可視性とランキング向上を実現します。

このスキルを使用する場面

以下の場合にこのスキルを使用してください：

• ウェブサイトコンテンツを検索エンジン向けに最適化する
• キーワード調査と分析を実施する
• 技術的SEO改善を実装する
• SEO対応のメタタグと説明文を作成する
• ウェブサイトのSEO問題を監査する
• Core Web Vitalsとページ速度を向上させる
• スキーママークアップ（構造化データ）を実装する
• オーガニックトラフィックのためのコンテンツ戦略を計画する

SEOの基礎

1. キーワード調査と戦略

主要キーワードの選定：

• 検索インテント（情報検索、ナビゲーション、取引、商業）に焦点を当てる
• 検索ボリュームと競争度のバランスを取る
• キーワード難易度とランク付けの可能性を考慮する
• ロングテールキーワードでクイックウィンを狙う

キーワード調査プロセス：

1. ビジネス目標からシードキーワードを特定する
2. ツールを使用してキーワードリストを拡張する（Google Keyword Planner、Ahrefs、SEMrush）
3. 検索ボリュームと難易度を分析する
4. キーワードをトピッククラスターでグループ化する
5. キーワードをコンテンツタイプとページにマッピングする
6. 潜在的なROIに基づいて優先順位を付ける

コンテンツ最適化フォーミュラ：

• 主要キーワード：1～2%の密度（自然な配置）
• 含める箇所：タイトルタグ、H1、最初の段落、URL、メタディスクリプション
• セマンティック変動と関連用語を使用する
• 自然な読みやすさを維持する（キーワードスタッフィングは避ける）

2. オンページSEO

タイトルタグの最適化：

<!-- 良い例：説明的、キーワードを含む、60文字以下 -->
<title>Ultimate Guide to React Hooks - Learn useEffect & useState</title>

<!-- 悪い例：長すぎる、キーワードスタッフィング、汎用的 -->
<title>React Hooks Guide React Hooks Tutorial React Hooks Examples Learn React</title>

ベストプラクティス：

• 60文字以下に保つ（SERPsに表示される）
• 主要キーワードを冒頭に配置する
• スペースが許せばブランド名を含める
• 魅力的でクリックしやすいものにする
• すべてのページで一意にする

メタディスクリプション：

<!-- 良い例：魅力的、キーワードを含む、行動喚起、150～160文字 -->
<meta name="description" content="Master React Hooks with our comprehensive guide. Learn useState, useEffect, and custom hooks with practical examples. Start building better React apps today.">

<!-- 悪い例：短すぎる、価値提案がない -->
<meta name="description" content="React Hooks guide and tutorial">

ヘッダー構造：

<!-- 適切な階層 -->
<h1>Main Page Title (Primary Keyword)</h1>
  <h2>Section Heading (Related Keywords)</h2>
    <h3>Subsection</h3>
    <h3>Subsection</h3>
  <h2>Another Section</h2>
    <h3>Subsection</h3>

URLの構造：

✅ 良いURL：
- /blog/react-hooks-guide
- /products/running-shoes
- /learn/javascript-async-await

❌ 悪いURL：
- /blog?p=12345
- /products/cat-1/subcat-2/item-999
- /page.php?id=abc&ref=xyz

画像の最適化：

<!-- 最適化された画像 -->
<img
  src="/images/react-hooks-diagram-800w.webp"
  alt="React Hooks lifecycle diagram showing useState and useEffect"
  width="800"
  height="600"
  loading="lazy"
/>

ベストプラクティス：

• 説明的でキーワード豊富なalt属性を使用する
• 画像を圧縮する（WebP形式が推奨）
• レイアウトシフトを防ぐため寸法を指定する
• ビューポート下部の画像に遅延読み込みを使用する
• 関連する場合はキャプションを含める

3. コンテンツの品質

E-E-A-T原則（経験、専門知識、権威性、信頼性）：

• 著者の専門知識を資格で示す
• 権威あるソースを引用する
• コンテンツを正確で最新に保つ
• 実経験と独自の見解を示す
• 著者プロフィールとバイラインを含める

SEO向けのコンテンツ構造：

# Main Title (H1) - Primary Keyword

Brief introduction with primary keyword in first 100 words.

## What is [Topic]? (H2) - Answer core question

Comprehensive explanation with examples.

## Why [Topic] Matters (H2) - Value proposition

Benefits and use cases.

## How to [Action] (H2) - Practical guide

Step-by-step instructions with visuals.

## Best Practices (H2) - Advanced tips

Expert recommendations.

## Common Mistakes to Avoid (H2)

Troubleshooting and pitfalls.

## Conclusion

Summary and call-to-action.

コンテンツ長のガイドライン：

• ブログ記事：1,500～2,500語（包括的なトピック）
• 商品ページ：最小300～500語
• カテゴリーページ：500～1,000語
• ホームページ：500語以上

4. 技術的SEO

スキーママークアップ（構造化データ）：

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Complete Guide to React Hooks",
  "image": "https://example.com/images/react-hooks.jpg",
  "datePublished": "2024-01-15",
  "dateModified": "2024-02-01",
  "author": {
    "@type": "Person",
    "name": "Jane Developer"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Tech Academy",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  }
}

一般的なスキーマタイプ：

• Article（ブログ記事）
• Product（eコマース）
• FAQ（質問回答ページ）
• HowTo（チュートリアルとガイド）
• Organization（会社情報）
• LocalBusiness（ロケーションベースのビジネス）
• BreadcrumbList（ナビゲーションパス）
• Review/AggregateRating（評価とレビュー）

Robots.txt設定：

User-agent: *
Disallow: /admin/
Disallow: /private/
Disallow: /api/
Allow: /api/public/

Sitemap: https://example.com/sitemap.xml

XMLサイトマップの構造：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2024-01-15</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://example.com/blog/react-hooks-guide</loc>
    <lastmod>2024-01-10</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

正規タグ：

<!-- 重複コンテンツの問題を防ぐ -->
<link rel="canonical" href="https://example.com/original-page">

<!-- URLパラメータを処理する -->
<link rel="canonical" href="https://example.com/products/shoes">
<!-- 例え /products/shoes?color=red&size=10 でアクセスされても -->

5. Core Web Vitals

Largest Contentful Paint (LCP) - 目標：< 2.5秒

• 画像と動画を最適化する
• 静的アセットにCDNを使用する
• レンダリングをブロックするリソースを最小化する
• 遅延読み込みを実装する

First Input Delay (FID) - 目標：< 100ms

• JavaScript実行時間を最小化する
• 長いタスクを分割する
• 重い計算にはWeb Workersを使用する
• 非重要なJavaScriptを遅延読み込みする

Cumulative Layout Shift (CLS) - 目標：< 0.1

• 画像と動画にサイズ属性を設定する
• 既存のコンテンツの上にコンテンツを挿入しない
• レイアウトトリガーのプロパティではなくtransformアニメーションを使用する
• 広告と埋め込みのためにスペースを予約する

ページ速度最適化：

<!-- 重要なリソースを先読み -->
<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>

<!-- 非重要なCSSを遅延読み込み -->
<link rel="preload" href="/styles/non-critical.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

<!-- JavaScriptの非同期/遅延実行 -->
<script src="/js/analytics.js" async></script>
<script src="/js/main.js" defer></script>

6. モバイルSEO

モバイルファースト最適化：

• レスポンシブデザイン（モバイルフレンドリーテスト合格）
• タッチフレンドリーなボタン（最小48×48px）
• 読みやすいフォントサイズ（最小16px）
• 適切なビューポート設定
• 高速なモバイルページ速度

ビューポート設定：

<meta name="viewport" content="width=device-width, initial-scale=1">

7. 内部リンク戦略

ベストプラクティス：

• 説明的なアンカーテキストを使用する（「ここをクリック」は避ける）
• 関連する文脈的なページにリンクする
• 論理的な階層と流れを維持する
• 1,000語あたり3～5個の内部リンクを含める
• 新しいコンテンツへのリンクで古いコンテンツを更新する

例：

Learn more about [advanced React patterns](/guides/react-patterns)
or check out our [useState hook tutorial](/tutorials/usestate-guide).

SEOコンテンツチェックリスト

公開前：

• タイトルタグに主要キーワード（60文字以下）
• メタディスクリプション（150～160文字、魅力的）
• 主要キーワード入りのH1タグ
• 最適化されて読みやすいURLスラッグ
• 説明的なalt属性付きの圧縮された画像
• 関連コンテンツへの内部リンク3～5個
• 権威あるソースへの外部リンク
• トピック深度に適したコンテンツ長
• スキーママークアップの実装
• モバイルフレンドリーとレスポンシブ
• ページ速度最適化（読み込み時間 < 3秒）
• リンク切れなし
• 正規タグが正しく設定されている
• ソーシャル共有メタタグ（Open Graph、Twitter Card）

高度なSEO戦略

トピッククラスターとピラーページ

構造：

Pillar Page: "Complete Guide to React"
  ├── Cluster: "React Hooks Tutorial"
  ├── Cluster: "React Context API Guide"
  ├── Cluster: "React Performance Optimization"
  └── Cluster: "React Testing Best Practices"

実装：

• 包括的なピラーコンテンツを作成する（3,000語以上）
• ピラーをサポートする8～12個のクラスター記事を開発する
• すべてのクラスターをピラーページにリンクして戻す
• ピラーページをすべてのクラスターにリンクする
• 一貫したキーワードテーマを使用する

フィーチャースニペット最適化

質問ベースのコンテンツ：

## What is React?

React is a JavaScript library for building user interfaces,
developed by Facebook. It allows developers to create reusable
UI components and efficiently update the DOM through a virtual
DOM implementation.

リストベースのコンテンツ：

## Top 5 React Best Practices

1. Use functional components with hooks
2. Implement proper state management
3. Optimize performance with React.memo
4. Follow component composition patterns
5. Write comprehensive tests

テーブルベースのコンテンツ：

Framework	Performance	Learning Curve	Ecosystem
React	Excellent	Moderate	Extensive
Vue	Excellent	Easy	Growing
Angular	Good	Steep	Mature

ローカルSEO（実店舗のあるビジネス向け）

Googleビジネスプロフィールの最適化：

• すべてのビジネス情報を完成させる
• 定期的な投稿と更新
• レビューに対応する
• 高品質な写真を追加する
• ビジネス営業時間を確認する

ローカルスキーママークアップ：

{
  "@type": "LocalBusiness",
  "name": "Tech Solutions Inc",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Main St",
    "addressLocality": "San Francisco",
    "addressRegion": "CA",
    "postalCode": "94102"
  },
  "telephone": "+1-415-555-0123"
}

監視とアナリティクス

追跡すべき主要メトリクス：

• オーガニックトラフィックの傾向
• キーワードランキング
• クリックスルーレート（CTR）
• バウンスレートと滞在時間
• Core Web Vitalsスコア
• バックリンクプロフィールの成長
• オーガニックトラフィックからのコンバージョン率

ツール：

• Google Search Console（パフォーマンス、インデックスの問題）
• Google Analytics 4（トラフィック、動作、コンバージョン）
• PageSpeed Insights（Core Web Vitals）
• Ahrefs/SEMrush（キーワード、バックリンク、競合）
• Screaming Frog（技術監査）

SEOを最適化する際は、ユーザー体験と価値提供を優先してください。検索エンジンはユーザーに本当に役立つコンテンツと、権威性と信頼性のある情報を提供するコンテンツをますます高く評価しています。