Agent Skills by ALSEL
Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

seo-optimizer

HTMLやCSSで構築されたWebサイトのSEO分析・改善を行う際に使用するスキルです。SEO監査、メタタグの最適化、スキーママークアップの実装、サイトマップ生成など、検索エンジン最適化に関するタスク全般をカバーします。ユーザーからSEOレポートの作成やベストプラクティスの適用を求められた際にも活用できます。

description の原文を見る

This skill should be used when analyzing HTML/CSS websites for SEO optimization, fixing SEO issues, generating SEO reports, or implementing SEO best practices. Use when the user requests SEO audits, optimization, meta tag improvements, schema markup implementation, sitemap generation, or general search engine optimization tasks.

SKILL.md 本文

SEO Optimizer

概要

このスキルは、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 形式

使用例:

# 単一ファイルを分析
python scripts/seo_analyzer.py index.html

# ディレクトリ全体を分析
python scripts/seo_analyzer.py ./public

# JSON 出力を取得
python scripts/seo_analyzer.py ./public --json

2. 分析結果をレビュー

アナライザーは結果を 3 つのレベルに分類します:

重大な問題 (🔴) - すぐに修正してください:

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

警告 (⚠️) - 最適な SEO のためにすぐに修正してください:

  • 最適でないタイトル/説明の長さ
  • 複数の H1 タグ
  • Open Graph または Twitter Card タグの欠落
  • Viewport メタタグの欠落
  • スキーママークアップの欠落
  • 見出し階層の問題

良い実践 (✅) - すでに最適化されています:

  • 適切にフォーマットされた要素
  • 正しい長さ
  • 必要なタグが存在

3. 問題を優先順位付けして修正

優先順位の順に問題に対処してください:

優先度 1: 重大な問題

タイトルタグの欠落または不良:

<!-- ユニークで説明的なタイトルを <head> に追加 -->
<title>主要キーワード - サブキーワード | ブランド名</title>
  • 50～60 文字を保つ
  • 対象キーワードを最初に含める
  • 各ページでユニークにする

メタディスクリプションの欠落:

<!-- 説得力のある説明を <head> に追加 -->
<meta name="description" content="対象キーワードを含み、クリックを促す明確で簡潔な説明。150～160 文字。">

H1 の欠落または複数の H1:

  • 各ページに正確に 1 つの H1 を確保
  • H1 はメインのトピックを説明する
  • タイトルタグと一致するか関連していること

Alt テキストのない画像:

<!-- すべての画像に説明的な alt テキストを追加 -->
<img src="image.jpg" alt="画像コンテンツを説明する説明的なテキスト">

HTML lang 属性の欠落:

<!-- 開いている <html> タグに追加 -->
<html lang="ja">

優先度 2: 重要な最適化

Viewport メタタグ (モバイル SEO に不可欠):

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

Charset 宣言:

<meta charset="UTF-8">

Open Graph タグ (ソーシャルメディア共有用):

<meta property="og:title" content="ページタイトル">
<meta property="og:description" content="ページの説明">
<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="ページタイトル">
<meta name="twitter:description" content="ページの説明">
<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-commerce)

実装例:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "記事タイトル",
  "author": {
    "@type": "Person",
    "name": "著者名"
  },
  "datePublished": "2024-01-15",
  "image": "https://example.com/image.jpg"
}
</script>

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

問題を修正した後、XML サイトマップを生成してください:

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

例:

# ウェブサイト用サイトマップを生成
python scripts/generate_sitemap.py ./public https://example.com

# 出力場所を指定
python scripts/generate_sitemap.py ./public https://example.com ./public/sitemap.xml

スクリプトは:

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

生成後:

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

5. robots.txt を更新

assets/robots.txt のテンプレートを使用してカスタマイズします:

User-agent: *
Allow: /

# 機密ディレクトリをブロック
Disallow: /admin/
Disallow: /private/

# サイトマップを参照
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. 全ページに必須メタタグを追加 (title、description、viewport)
  3. 適切な見出し構造を確保 (ページあたり 1 つの H1)
  4. すべての画像に alt テキストを追加
  5. ホームページに Organization スキーマを実装
  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 を使用
  4. セクションに適切な H2/H3 階層を実装
  5. すべての画像に alt テキストを追加
  6. Article または BlogPosting スキーマを実装 (references/schema_markup_guide.md を参照)
  7. ソーシャル共有のために Open Graph と Twitter Card タグを追加
  8. 著者情報を含める
  9. ナビゲーション用に breadcrumb スキーマを追加

参照資料

詳細ガイド

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. ユーザーファースト: 検索エンジンよりもユーザーを優先的に最適化してください。優れたユーザー体験は better SEO につながります。

  2. ユニークなコンテンツ: すべてのページは、ユニークなタイトル、説明、H1 を持つべきです。重複コンテンツは SEO に悪影響を及ぼします。

  3. モバイルファースト: Google はモバイルファースト インデックスを使用しています。常に viewport メタタグを含め、モバイル レスポンシブを確保してください。

  4. アクセシビリティ = SEO: アクセスしやすいウェブサイト (alt テキスト、セマンティック HTML、適切な見出し) はランクが高くなります。

  5. 質より量: 充実した価値のあるコンテンツは、薄いコンテンツよりランクが高くなります。包括的なページを目指してください。

  6. 技術的基礎: 高度な最適化の前に、重大な技術的問題 (タグの欠落、破られた構造) を修正してください。

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

  8. 定期的な更新: SEO は継続的です。コンテンツを新しく保ち、アナリティクスを監視し、アルゴリズムの変更に適応してください。

  9. 自然言語: 自然言語を使用して人間のために執筆してください。キーワードスタッフィングを避けてください。

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

最大の効果のためのヒント

  • 重大な問題から始める: タイトルタグとメタディスクリプションの欠落から最初に修正してください - これらが最大のインパクトを与えます
  • 一貫性を保つ: ホームページだけでなく、すべてのページに最適化を適用してください
  • セマンティック HTML を使用: 適切な HTML5 セマンティックタグ (<header>、<nav>、<main>、<article>、<aside>、<footer>) を使用してください
  • 画像を最適化: 画像を圧縮し、説明的なファイル名を使用し、常に alt テキストを含めてください
  • 内部リンク: 説明的なアンカーテキストで関連ページにリンクしてください
  • ページスピードの問題: 高速に読み込むページはランクが高くなります
  • モバイルでテスト: ほとんどの検索はモバイルです - 優れたモバイル体験を確保してください
  • Search Console を監視: Google Search Console を使用してパフォーマンスを追跡し、問題を特定してください
  • 定期的に更新: 新しいコンテンツはアクティブで価値のあるウェブサイトのシグナルです

クイックリファレンスコマンド

# 単一ファイルを分析
python scripts/seo_analyzer.py index.html

# ウェブサイト全体を分析
python scripts/seo_analyzer.py ./public

# サイトマップを生成
python scripts/generate_sitemap.py ./public https://example.com

# JSON 分析出力を取得
python scripts/seo_analyzer.py ./public --json

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者
ailabs-393
リポジトリ
ailabs-393/ai-labs-claude-skills
ライセンス
MIT
最終更新
不明
GitHubで原本を見る →フィードバックを送る

Source: https://github.com/ailabs-393/ai-labs-claude-skills / ライセンス: MIT

関連スキル

汎用ソフトウェア開発⭐ リポ 39,967

doubt-driven-development

重要な判断はすべて、本番環境への展開前に新しい視点から対抗的レビューを実施します。速度より正確性が重要な場合、不慣れなコードを扱う場合、本番環境・セキュリティに関わるロジック・取り消し不可の操作など影響度が高い場合、または後でバグを修正するよりも今検証する方が効率的な場合に活用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 1,175

apprun-skills

TypeScriptを使用したAppRunアプリケーションのMVU設計に関する総合的なガイダンスが得られます。コンポーネントパターン、イベントハンドリング、状態管理（非同期ジェネレータを含む）、パラメータと保護機能を備えたルーティング・ナビゲーション、vistestを使用したテストに対応しています。AppRunコンポーネントの設計・レビュー、ルートの配線、状態フローの管理、AppRunテストの作成時に活用してください。

by yysun
OpenAIソフトウェア開発⭐ リポ 797

desloppify

コードベースのヘルスチェックと技術負債の追跡ツールです。コード品質、技術負債、デッドコード、大規模ファイル、ゴッドクラス、重複関数、コードスメル、命名規則の問題、インポートサイクル、結合度の問題についてユーザーが質問した場合に使用してください。また、ヘルススコアの確認、次の改善項目の提案、クリーンアップ計画の作成をリクエストされた際にも対応します。29言語に対応しています。

by Git-on-my-level
汎用ソフトウェア開発⭐ リポ 39,967

debugging-and-error-recovery

テストが失敗したり、ビルドが壊れたり、動作が期待と異なったり、予期しないエラーが発生したりした場合に、体系的な根本原因デバッグをガイドします。推測ではなく、根本原因を見つけて修正するための体系的なアプローチが必要な場合に使用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 39,967

test-driven-development

テスト駆動開発により実装を進めます。ロジックの実装、バグの修正、動作の変更など、あらゆる場面で活用できます。コードが正常に動作することを証明する必要がある場合、バグ報告を受けた場合、既存機能を修正する予定がある場合に使用してください。

by addyosmani
汎用ソフトウェア開発⭐ リポ 39,967

incremental-implementation

変更を段階的に実施します。複数のファイルに影響する機能や変更を実装する場合に使用してください。大量のコードを一度に書こうとしている場合や、タスクが一度では完結できないほど大きい場合に活用します。

by addyosmani
本サイトは GitHub 上で公開されているオープンソースの SKILL.md ファイルをクロール・インデックス化したものです。 各スキルの著作権は原作者に帰属します。掲載に問題がある場合は info@alsel.co.jp または /takedown フォームよりご連絡ください。
原作者: ailabs-393 · ailabs-393/ai-labs-claude-skills · ライセンス: MIT