はじめに

docs 配下を対象にした GitHub Pages を、検索エンジンにクロールしてもらうために調べたことを整理した。

ちなみにターゲットは以下のサイト。

TL;DR

  • docs に _config.yml を配置
  • docs に googleXXXX.html を配置
  • Vue CLI の場合は public に配置してビルド
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 詳細
    1. sitemap.xml の生成と配置
    2. Search Console への登録
    3. Vue CLI で作る場合
  4. まとめ
  5. 参考文献

詳細

docs 配下を対象にした GitHub Pages を、検索エンジンにクロールしてもらうため必要なことは下記。

  • sitemap.xml を生成して配置する
    • https://<username>.github.io/<repo>/sitemap.xml
  • Search Console から DL できる googleXXXX.html を配置する
    • https://<username>.github.io/<repo>/googleXXXX.html

sitemap.xml の生成と配置

docs/_config.yml を以下の内容で作成。

1
2
plugins:
  - jekyll-sitemap

プッシュ(してしばらく)すると、https://<username>.github.io/<repo>/sitemap.xml で確認できるようになる。

サンプル: https://17number.github.io/tweet-js-loader/sitemap.xml

Search Console への登録

Search Console にアクセスして、プロパティを追加。

URL プレフィックスに https://<username>.github.io/<repo>/ を入力して「続行」。

HTML ファイルをダウンロードして docs/googleXXXX.html に配置してプッシュ。しばらく待つと https://<username>.github.io/<repo>/googleXXXX.html で確認できるようになる。
※試してないけど、<meta> タグ埋め込みでも良いはず。

サンプル: https://17number.github.io/tweet-js-loader/googled3a803725589a768.html

GitHub Pages 上で確認できたら「確認」をクリック。
確認が完了すると、以下の画面になるはず。

あとは時間経過でデータが表示されるのを待てば良い。

Vue CLI で作る場合

Vue CLI でビルドして作成する場合には public/_config.yml, public/googleXXXX.html として配置すると、ビルド時に docs/ にコピーされる。

※docs をビルド結果の出力先にしている前提、詳しくは下記記事内を参照。

Vue CLI で作った Vue Router 利用プロジェクトを GitHub Pages で公開する方法

まとめ

  • docs に _config.yml を配置
  • docs に googleXXXX.html を配置
  • Vue CLI の場合は public に配置してビルド

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list