seo-optimizer

SEO オプティマイザー

概要

このスキルは、HTML/CSS ウェブサイト向けの包括的な SEO 最適化機能を提供します。ウェブサイトの SEO に関する問題を分析し、ベストプラクティスを実装して、メタタグ、見出し構造、画像の最適化、スキーママークアップ、モバイル最適化、テクニカル SEO を含む、重要な SEO のあらゆる側面を網羅した最適化レポートを生成します。

このスキルを使用するタイミング

ユーザーから次のようなリクエストがあった場合に、このスキルを使用します。

• 「ウェブサイトの SEO に関する問題を分析してください」
• 「このページを SEO 向けに最適化してください」
• 「SEO 監査レポートを生成してください」
• 「ウェブサイトの SEO の問題を修正してください」
• 「ページに適切なメタタグを追加してください」
• 「スキーママークアップを実装してください」
• 「サイトマップを生成してください」
• 「サイトの検索エンジンでの順位を改善してください」
• HTML/CSS ウェブサイトの検索エンジン最適化に関連するあらゆるタスク

ワークフロー

1. 初期 SEO 分析

まず、SEO アナライザースクリプトを使用して包括的な分析を実施します。

python scripts/seo_analyzer.py <directory_or_file>

このスクリプトは HTML ファイルを分析し、次の項目を網羅した詳細なレポートを生成します。

• タイトルタグ（長さ、設定の有無、一意性）
• メタディスクリプション（長さ、設定の有無）
• 見出し構造（H1～H6 の階層）
• 画像の alt 属性
• Open Graph タグ
• Twitter Card タグ
• Schema.org マークアップ
• HTML lang 属性
• viewport および charset メタタグ
• 正規 URL
• コンテンツの長さ

出力オプション：

• デフォルト：問題、警告、適切な設定を含む、人が読みやすいテキストレポート
• --json：プログラムで処理できる、機械可読な JSON 形式

使用例：

# Analyze single file
python scripts/seo_analyzer.py index.html

# Analyze entire directory
python scripts/seo_analyzer.py ./public

# Get JSON output
python scripts/seo_analyzer.py ./public --json

2. 分析結果の確認

アナライザーは、検出結果を次の 3 段階に分類します。

重大な問題（🔴） — すぐに修正します。

• タイトルタグがない
• メタディスクリプションがない
• H1 見出しがない
• alt 属性のない画像がある
• HTML lang 属性がない

警告（⚠️） — SEO を最適化するため、早めに修正します。

• タイトルやディスクリプションの長さが最適でない
• H1 タグが複数ある
• Open Graph タグまたは Twitter Card タグがない
• viewport メタタグがない
• スキーママークアップがない
• 見出しの階層に問題がある

適切な設定（✅） — すでに最適化されています。

• 要素が適切にフォーマットされている
• 長さが適切である
• 必須タグが設定されている

3. 問題の優先順位付けと修正

優先度の高い順に問題に対処します。

優先度 1：重大な問題

タイトルタグがない、または適切でない場合：

<title>Primary Keyword - Secondary Keyword | Brand Name</title>

• 50～60 文字にします
• 対象キーワードを先頭に含めます
• ページごとに異なる内容にします

メタディスクリプションがない場合：

<meta name="description" content="Clear, concise description that includes target keywords and encourages clicks. 150-160 characters.">

H1 がない、または H1 が複数ある場合：

• 各ページの H1 を必ず 1 つだけにします
• H1 でページの主要なトピックを説明します
• タイトルタグと同じ内容にするか、関連性を持たせます

alt テキストのない画像：

<img src="image.jpg" alt="Descriptive text explaining image content">

HTML lang 属性がない場合：

<html lang="en">

優先度 2：重要な最適化

viewport メタタグ（モバイル SEO に不可欠）：

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

文字コードの宣言：

<meta charset="UTF-8">

Open Graph タグ（ソーシャルメディアでの共有用）：

<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your page description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page-url">
<meta property="og:type" content="website">

Twitter Card タグ：

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Your page description">
<meta name="twitter:image" content="https://example.com/image.jpg">

正規 URL：

<link rel="canonical" href="https://example.com/preferred-url">

優先度 3：高度な最適化

スキーママークアップ — 詳細な実装方法については、references/schema_markup_guide.md を参照してください。一般的な種類は次のとおりです。

• Organization（ホームページ）
• Article/BlogPosting（ブログ投稿）
• LocalBusiness（地域のビジネス）
• Breadcrumb（ナビゲーション）
• FAQ（FAQ ページ）
• Product（e コマース）

実装例：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Article Title",
  "author": {
    "@type": "Person",
    "name": "Author Name"
  },
  "datePublished": "2024-01-15",
  "image": "https://example.com/image.jpg"
}
</script>

4. サイトマップの生成または更新

問題の修正後、XML サイトマップを生成します。

python scripts/generate_sitemap.py <directory> <base_url> [output_file]

例：

# Generate sitemap for website
python scripts/generate_sitemap.py ./public https://example.com

# Specify output location
python scripts/generate_sitemap.py ./public https://example.com ./public/sitemap.xml

このスクリプトは次の処理を行います。

• すべての HTML ファイルを自動的に検出します
• 適切な URL を生成します
• lastmod 日付を含めます
• priority と changefreq の値を推定します
• 適切にフォーマットされた XML サイトマップを作成します

生成後：

1. sitemap.xml をウェブサイトのルートにアップロードします
2. robots.txt にサイトマップへの参照を追加します
3. Google Search Console と Bing Webmaster Tools に送信します

5. robots.txt の更新

assets/robots.txt のテンプレートを使用し、必要に応じて調整します。

User-agent: *
Allow: /

# Block sensitive directories
Disallow: /admin/
Disallow: /private/

# Reference your sitemap
Sitemap: https://yourdomain.com/sitemap.xml

robots.txt をウェブサイトのルートディレクトリに配置します。

6. 検証とテスト

修正を実装した後：

ローカルテスト：

1. SEO アナライザーを再度実行し、修正を検証します
2. すべての重大な問題が解決されていることを確認します
3. 新たな問題が発生していないことを確認します

オンラインテスト：

1. 変更を本番環境にデプロイします
2. Google リッチリザルト テストでテストします：https://search.google.com/test/rich-results
3. スキーママークアップを検証します：https://validator.schema.org/
4. モバイルフレンドリーかどうかを確認します：https://search.google.com/test/mobile-friendly
5. Google Search Console で監視します

7. 継続的な最適化

定期的なメンテナンス：

• 新しいページを追加したらサイトマップを更新します
• メタディスクリプションを最新かつ魅力的な内容に保ちます
• 新しい画像に alt テキストが設定されていることを確認します
• 新しいコンテンツタイプにスキーママークアップを追加します
• Search Console で問題を監視します
• コンテンツを定期的に更新します

一般的な最適化パターン

パターン 1：新しいウェブサイトのセットアップ

新規の HTML/CSS ウェブサイトの場合：

1. 初回分析を実行します：python scripts/seo_analyzer.py ./public
2. すべてのページに必須のメタタグ（タイトル、説明、viewport）を追加します
3. 適切な見出し構造（各ページに H1 を 1 つ）を確保します
4. すべての画像に alt テキストを追加します
5. ホームページに組織スキーマを実装します
6. サイトマップを生成します：python scripts/generate_sitemap.py ./public https://yourdomain.com
7. テンプレートから robots.txt を作成します
8. デプロイし、サイトマップを検索エンジンに送信します

パターン 2：既存ウェブサイトの監査

最適化が必要な既存ウェブサイトの場合：

1. 包括的な分析を実行します：python scripts/seo_analyzer.py ./public
2. 問題を特定し、優先順位を付けます（重大な問題を最優先）
3. すべてのページで重大な問題を修正します
4. 不足している Open Graph タグと Twitter Card タグを追加します
5. 適切なページにスキーママークアップを実装します
6. 更新内容を反映してサイトマップを再生成します
7. アナライザーで修正を検証します
8. デプロイして監視します

パターン 3：単一ページの最適化

特定のページを最適化する場合：

1. 特定のファイルを分析します：python scripts/seo_analyzer.py page.html
2. 特定された問題を修正します
3. ターゲットキーワードに合わせてタイトルとメタディスクリプションを最適化します
4. 適切な見出し階層を確保します
5. ページの種類に適したスキーママークアップを追加します
6. アナライザーで検証します
7. 新しいページの場合はサイトマップを更新します

パターン 4：ブログ記事の最適化

ブログ記事や記事コンテンツの場合：

1. ターゲットキーワードを含む固有のタイトル（50～60 文字）を設定します
2. 魅力的なメタディスクリプション（150～160 文字）を作成します
3. 記事タイトルには H1 を 1 つだけ使用します
4. セクションには適切な H2/H3 階層を実装します
5. すべての画像に alt テキストを追加します
6. Article または BlogPosting スキーマを実装します（references/schema_markup_guide.md を参照）
7. ソーシャル共有用に Open Graph タグと Twitter Card タグを追加します
8. 著者情報を含めます
9. ナビゲーション用にパンくずリストスキーマを追加します

参考資料

詳細ガイド

references/seo_checklist.md： SEO のあらゆる側面を網羅した包括的なチェックリスト：

• タイトルタグとメタディスクリプションのガイドライン
• 見出し構造のベストプラクティス
• 画像最適化の手法
• URL 構造の推奨事項
• 内部リンク戦略
• ページ速度の最適化
• モバイル最適化の要件
• セマンティック HTML の使用方法
• テクニカル SEO の完全なチェックリスト

SEO の各要素に関する詳細な仕様を確認する際に参照してください。

references/schema_markup_guide.md： schema.org の構造化データを実装するための完全ガイド：

• JSON-LD の実装（推奨形式）
• よく使われる 10 種類以上のスキーマタイプと例
• Organization、LocalBusiness、Article、BlogPosting、FAQ、Product など
• 各タイプに必要なプロパティ
• ベストプラクティスとよくある間違い
• 検証ツールと参考資料

あらゆるコンテンツタイプにスキーママークアップを実装する際に参照してください。

スクリプト

scripts/seo_analyzer.py： SEO 分析を自動化する Python スクリプトです。HTML ファイルによくある問題がないか分析し、詳細なレポートを生成します。テキスト形式または JSON 形式で出力できます。繰り返し分析しても結果が一貫し、信頼性があります。

scripts/generate_sitemap.py： XML サイトマップを生成する Python スクリプトです。ディレクトリを自動でクロールし、優先度と更新頻度を推定して、検索エンジンへの送信にすぐ使える適切な形式のサイトマップを生成します。

アセット

assets/robots.txt： 一般的な設定とコメントを含む robots.txt ファイルのテンプレートです。用途に合わせてカスタマイズし、ウェブサイトのルートディレクトリに配置してください。

主な原則

1. ユーザーを第一に：まずユーザー向けに最適化し、検索エンジン向けの最適化はその次に行います。優れたユーザー体験は、より良い SEO につながります。

2. 独自のコンテンツ：各ページには、それぞれ固有のタイトル、説明、H1 を設定してください。重複コンテンツは SEO に悪影響を与えます。

3. モバイルファースト：Google はモバイルファーストインデックスを使用しています。必ず viewport メタタグを含め、モバイル対応を徹底してください。

4. アクセシビリティ＝SEO：アクセシビリティに優れたウェブサイト（代替テキスト、セマンティック HTML、適切な見出しを備えたサイト）は、検索順位が上がります。

5. 量より質：内容が充実し、価値のあるコンテンツは、内容の薄いコンテンツより検索順位が上がります。包括的なページを目指してください。

6. 技術的な基盤：高度な最適化に取り組む前に、重要な技術的問題（タグの欠落、構造の破損）を解決してください。

7. 構造化データ：スキーママークアップは検索エンジンによるコンテンツの理解に役立ち、リッチリザルトにつながることがあります。

8. 定期的な更新：SEO は継続的な取り組みです。コンテンツを新鮮に保ち、分析データを監視し、アルゴリズムの変更に対応してください。

9. 自然な言葉遣い：自然な言葉で、人に向けて文章を書いてください。キーワードの詰め込みは避けてください。

10. 検証：本番環境にデプロイする前に、必ずテストツールで変更内容を検証してください。

効果を最大化するヒント

• 重要な問題から着手する：まずタイトルタグとメタディスクリプションの欠落を修正してください。これらは最も大きな効果があります。
• 一貫性を保つ：ホームページだけでなく、すべてのページに最適化を適用してください。
• セマンティック HTML を使う：適切な HTML5 セマンティックタグ（<header>、<nav>、<main>、<article>、<aside>、<footer>）を使ってください。
• 画像を最適化する：画像を圧縮し、内容が分かるファイル名を付け、必ず代替テキストを含めてください。
• 内部リンク：関連ページには、内容が分かるアンカーテキストでリンクしてください。
• ページ速度は重要です：読み込みの速いページは、検索順位が上がります。
• モバイルでテストする：検索の大半はモバイルから行われます。優れたモバイル体験を提供できるようにしてください。
• Search Console を監視する：Google Search Console を使って、パフォーマンスを追跡し、問題を特定してください。
• 定期的に更新する：新鮮なコンテンツは、ウェブサイトが活発で価値のあるものであることを示します。

コマンド早見表

# Analyze single file
python scripts/seo_analyzer.py index.html

# Analyze entire website
python scripts/seo_analyzer.py ./public

# Generate sitemap
python scripts/generate_sitemap.py ./public https://example.com

# Get JSON analysis output
python scripts/seo_analyzer.py ./public --json