GitHub PagesのSEO対策をしてみた

VSCode拡張機能のランディングページをGitHub Pagesで公開した。せっかくなので、Google検索で見つけてもらいやすくするため、本格的なSEO対策を実施してみました

今回SEO対策を行ったのはこちらのページ: https://kpab.github.io/vscode-game-sound-page/

この記事では、Jekyll組み込みプラグイン、構造化データ、robots.txt、Google Search Console登録まで、GitHub Pagesで実施できるSEO対策を備忘録として残しておきます

実施したSEO対策#

最小限の3ファイル編集で、Google推奨のSEO対策を実現しました。

_config.yml - Jekyllプラグイン設定
index.html - canonical URL + 構造化データ
robots.txt - クローラー指示
Google Search Console登録 + サイトマップ送信

1. _config.yml の作成#

まず、JekyllプラグインでSEO対策を自動化します。GitHub Pagesは以下のプラグインが標準で使えます。

1
# GitHub Pages SEO Configuration
2
title: VSCode Game Sound - Turn Coding into an RPG Adventure!  # サイトのタイトル（自分のプロジェクト名に変更）
3
description: Transform your coding into an epic gaming experience with RPG-style sound effects for every keystroke! Make programming fun again.  # サイトの説明文
4
url: https://kpab.github.io  # GitHubのベースURL（自分のユーザー名に変更）
5
baseurl: /vscode-game-sound-page  # リポジトリ名（自分のリポジトリ名に変更）
6

7
# Author information
8
author:
9
  name: kpab  # 作者名（自分の名前に変更）
10
  url: https://github.com/kpab  # 作者のURL（自分のGitHub URLに変更）
11

12
# SEO settings
13
lang: en_US
14
twitter:
15
  card: summary_large_image
16
  username: kpab  # Twitterユーザー名（自分のユーザー名に変更、なければ削除可）
17

18
# Social profiles
19
social:
20
  links:
21
    - https://github.com/kpab  # GitHubプロフィール（自分のURLに変更）
22
    - https://marketplace.visualstudio.com/items?itemName=kpab.vscode-game-sound  # その他のリンク（自分のプロジェクト関連URLに変更）
23

24
# Plugins for SEO
25
plugins:
26
  - jekyll-sitemap  # サイトマップ自動生成
27
  - jekyll-seo-tag  # SEOタグ自動生成
28

29
# Exclude files from processing
30
exclude:
31
  - README.md
32
  - .gitignore
33
  - .git

効果#

jekyll-sitemap: sitemap.xmlを自動生成
jekyll-seo-tag: OGPタグ、Twitterカードなどのメタタグを自動最適化

2. index.html への追加#

Canonical URL#

ページが重複扱いされないよう、正規URLを設定します

1
<!-- Canonical URL -->
2
<!-- href: 自分のページのURLに変更 -->
3
<link rel="canonical" href="https://kpab.github.io/vscode-game-sound-page/">

構造化データ (JSON-LD)#

Googleリッチリザルト対応。検索結果に評価・価格・機能リストを表示させます

1
<!-- Structured Data (JSON-LD) -->
2
<script type="application/ld+json">
3
{
4
  "@context": "https://schema.org",
5
  "@type": "SoftwareApplication",
6
  "name": "VSCode Game Sound",  // アプリケーション名（自分のプロジェクト名に変更）
7
  "applicationCategory": "DeveloperApplication",
8
  "operatingSystem": "Windows, macOS, Linux",  // 対応OS
9
  "offers": {
10
    "@type": "Offer",
11
    "price": "0",  // 価格（無料の場合は0）
12
    "priceCurrency": "USD"
13
  },
14
  "aggregateRating": {
15
    "@type": "AggregateRating",
16
    "ratingValue": "5",  // 評価値（1-5）
17
    "ratingCount": "1"  // レビュー数
18
  },
19
  "description": "Transform your coding into an epic gaming experience with RPG-style sound effects for every keystroke! Make programming fun again.",  // アプリの説明文
20
  "image": "https://kpab.github.io/vscode-game-sound-page/images/icon.png",  // アイコン画像のURL
21
  "url": "https://kpab.github.io/vscode-game-sound-page/",  // ページのURL
22
  "author": {
23
    "@type": "Person",
24
    "name": "kpab",  // 作者名
25
    "url": "https://github.com/kpab"  // 作者のURL
26
  },
27
  "softwareVersion": "1.0.0",  // バージョン番号
28
  "datePublished": "2024-01-01",  // 公開日
29
  "downloadUrl": "https://marketplace.visualstudio.com/items?itemName=kpab.vscode-game-sound",  // ダウンロードURL
30
  "featureList": [  // 機能リスト（自分のプロジェクトの機能に変更）
31
    "RPG Sound Effects",
32
    "Special Key Sounds",
33
    "Anti-Key-Repeat",
34
    "Fully Customizable"
35
  ]
36
}
37
</script>

構造化データのテスト: Google リッチリザルトテストでエラーチェック可能です。

3. robots.txt の作成#

クローラーにサイトマップの場所を教えて、全ページのクロールを許可します

1
# robots.txt for VSCode Game Sound Page
2
User-agent: *
3
Allow: /
4

5
# Sitemap location
6
Sitemap: https://kpab.github.io/vscode-game-sound-page/sitemap.xml
7
# ↑ 自分のページのサイトマップURLに変更（https://[ユーザー名].github.io/[リポジトリ名]/sitemap.xml）

4. Google Search Console 登録#

登録手順#

https://search.google.com/search-console にアクセス
「プロパティを追加」からURLプレフィックスを選択
サイトURL https://kpab.github.io/vscode-game-sound-page/ を入力
所有権確認（HTMLタグまたはHTMLファイル）
サイトマップ送信: sitemap.xml

サイトマップ確認#

ブラウザで以下のURLにアクセスして、サイトマップが生成されているか確認します。

1
https://kpab.github.io/vscode-game-sound-page/sitemap.xml

ファイル構成#

1
vscode-game-sound-page/
2
├── _config.yml          # 新規作成
3
├── robots.txt           # 新規作成
4
├── index.html           # 修正（canonical、JSON-LD追加）
5
├── css/
6
├── images/
7
├── js/
8
└── README.md

まとめ#

今回は3つのファイルを編集してSEO対策を行いました

_config.yml - Jekyllプラグイン（sitemap、seo-tag）
index.html - canonical URL + 構造化データ
robots.txt - クローラー指示

Jekyll組み込みプラグインを活用することで、手動メタタグ管理を不要にしつつ、Google推奨のSEO対策を実現できます。