seo

SEO スキル — 静的サイトの最適化

静的 HTML サイト（GitHub Pages、Netlify、Vercel など）向けの軽量な SEO 監査・修正ツールです。ビルドツールは不要です。HTML を読み取り、不足している項目を報告して追加します。

セットアップ

初めて使う前に、適切な値を設定できるよう、サイトについて Claude に伝えてください。

• ドメイン（例：https://yourname.com）
• ページ（例：index、about、resume、projects/foo）
• ソーシャルプロフィール（LinkedIn、GitHub、Twitter など）
• 検索順位を上げたいキーワード（例：「jane doe software engineer」、「jane doe portfolio」）

Claude はこの情報をセッション中に保存します。一度伝えるだけで大丈夫です。

---

呼び出されたときの処理

サイトのソースディレクトリ内にある HTML ファイルをすべて読み込みます。以下の項目を確認し、合否の表を報告してから、不足している項目の修正を提案します。

---

1. ページごとの <head> の必須項目

すべての HTML ページで、<head> 内に以下が必要です。

<title>[Page Title] — [Your Name]</title>
<meta name="description" content="[unique, 150-160 chars, includes target keywords]">
<link rel="canonical" href="https://yourdomain.com/[path]/">


<meta property="og:title" content="[same as title or shorter]">
<meta property="og:description" content="[same as meta description]">
<meta property="og:image" content="https://yourdomain.com/[path-to-image]">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yourdomain.com/[path]/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="[Your Name]">


<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="[same as og:title]">
<meta name="twitter:description" content="[same as og:description]">
<meta name="twitter:image" content="https://yourdomain.com/[path-to-image]">

ガイドライン：

• タイトル：50～60文字。名前と他との違いがわかる要素を含めます。
• メタディスクリプション：150～160文字。ページごとに固有の内容にし、名前と関連キーワードを含めます。
• OG 画像：1200x630px を推奨します。ページごとにカスタム画像がない場合は、共通の画像を使います。プレースホルダーではなく、サイト内にある実際の画像を使います。
• 正規 URL：実際にデプロイされた URL と完全に一致させます（末尾のスラッシュの有無を統一します）。

2. 構造化データ（JSON-LD）

ホームページに Person と WebSite のスキーマを追加します。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "[Your Name]",
  "url": "https://yourdomain.com",
  "jobTitle": "[Your Title/Role]",
  "affiliation": {
    "@type": "Organization",
    "name": "[School or Company]"
  },
  "sameAs": [
    "[GitHub URL]",
    "[LinkedIn URL]"
  ],
  "knowsAbout": ["[skill1]", "[skill2]", "[skill3]"]
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "[Your Name] — [Portfolio Tagline]",
  "url": "https://yourdomain.com"
}
</script>

プロジェクトページには CreativeWork を使います。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "CreativeWork",
  "name": "[Project Name]",
  "author": { "@type": "Person", "name": "[Your Name]" },
  "description": "[Brief project description]",
  "url": "https://yourdomain.com/[project]/"
}
</script>

ルール： JSON-LD のみを使用します（Microdata/RDFa は使用しません）。FAQPage は使用しません（政府・医療分野に限定されています）。HowTo は使用しません（非推奨です）。スキーマのフィールドにプレースホルダーテキストを入れないでください。

3. robots.txt

サイトのルートに作成します。

User-agent: *
Allow: /

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

4. sitemap.xml

サイトのルートに作成します。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://yourdomain.com/</loc>
    <lastmod>[YYYY-MM-DD]</lastmod>
    <priority>1.0</priority>
  </url>
  
</urlset>

lastmod には実際の最終編集日を設定します。ページを変更したらサイトマップを更新します。

5. 画像 SEO

• すべての <img> タグに内容を説明する alt テキストを設定します（「image1」や「screenshot」は使いません）。
• 可能な場合は WebP を使い、画像サイズを 200KB 未満に抑えます。
• ファーストビューより下にある画像には loading="lazy" を追加します。
• OG 画像にはプレースホルダーではなく、実際のファイルを指定します。

6. コンテンツとキーワードのシグナル

• H1 タグ： 1 ページに 1 つとし、名前またはプロジェクト名とキーワードを含めます。
• 見出しの階層： h1 > h2 > h3 の順にし、レベルを飛ばしません。
• 本文中の名前： すべてのページに、自分の名前を自然な形で含めます。
• 内部リンク： ページ同士をリンクします（ホームページからプロジェクトへ、about からプロジェクトへなど）。
• 外部リンク： about またはホームページからソーシャルプロフィールにリンクします。

7. 技術的な確認

• HTTPS： すべての内部リンクとリソースで https:// が使われていることを確認します。
• 末尾のスラッシュの統一： パターンを 1 つ選び、すべてのリンク、正規 URL、サイトマップで統一します。
• リンク切れなし： すべての href と src 属性の参照先が有効であることを確認します。
• モバイル対応： すべてのページに viewport メタタグがあることを確認します。
• ページ速度： 重要度の低いスクリプトは defer で読み込みます。静的サイトでは、JavaScript を最小限にするのが基本です。

8. デプロイ後の確認

デプロイ後：

1. /robots.txt と /sitemap.xml に直接アクセスし、閲覧できることを確認します
2. Discord/Slack/Twitter でリンクを共有し、プレビューカードを確認して OG タグをテストします
3. Google Search Console にサイトマップを送信します
4. 数日後に site:yourdomain.com で検索し、インデックス登録を確認します
5. 目標とする検索語句を検索し、順位の推移を追跡します

9. Google Search Console のセットアップ

1. Google Search Console にアクセスし、ドメインのプロパティを追加します
2. DNS TXT レコードまたは HTML ファイルの方法で所有権を確認します
3. サイトマップ URL を送信します
4. カバレッジレポートでインデックス登録の問題を監視します

---

クイック監査の出力

監査を実行するときは、すべての HTML ファイルを読み込み、次の内容を出力します。

確認項目	状態	備考
メタディスクリプション	...	...
OG タグ	...	...
JSON-LD スキーマ	...	...
robots.txt	...	...
sitemap.xml	...	...
画像の alt テキスト	...	...
H1 タグ	...	...
内部リンク	...	...
正規 URL	...	...

次に、不足している項目の修正を提案します。