biyori-sh's page

Github Pagesで作ったWebサイトがGoogle検索で見つかるようにする

Posted on May 10, 2021

どうやらGithub Pagesで作ったWebページはデフォルトでGoogle検索で引っかからないらしい。 実際サイト名などで検索しても引っかかってくれてないっぽい。 せっかく作ったWebページなのに興味ある人の目に触れにくい状態なのはもったいないので、以下やったことのメモを記す。

上記2つのWebページにある手順に基本的には従った。

ここに記されていることはあくまでやったことであり、目的を達成する上で十分だとは思われるが必要なのかどうかは不明。

（「蛇足: FaviconとApple-touch-icon」に投稿直後の追記あり。）

Google Analytics

Google Analyticsで登録する。 今回が利用が初めてだったため

  1. 適当に「アカウント名」を決め、「アカウントのデータ共有設定」の選択
  2. 「プロパティ名」に目的のサイト名を入力し、「タイムゾーン」・「通貨」の設定を日本に
  3. 「次へ」を押す前に、念の為「詳細プションのを表示」をクリックし、目的のサイトのURLを入力
  4. ビジネス情報にて「業種」・「ビジネスの規模」・「利用目的」を適宜選択
  5. 「作成」をクリック の手順で一応の設定は完了。

アナリティクスの画面にある「管理」から、「プロパティ名」に入力した名称のプロパティの「トラッキング情報/トラッキングコード」へ移動。 「グローバルサイトタグ（gtag.js）」を確認しておく。

Hugo側の設定（Archieの場合）

Archieではconfig.tomlにあるgoogleAnalyticsにトラッキングIDを設定することになっている。 しかしこれだけでは今のGoogle Search Consoleの設定との接続が良くない（らしい）。

とりあえずこれから編集するthemes/archie/layouts/の中身をconfig.tomlが存在する階層にあるlayout/にコピーする。 以下コピーして作った方のhtmlファイルを編集する。

layouts/partials/header.htmlの</head>直前くらいに

<!-- Analytics -->
{{ if not .Site.IsServer }}
{{ partial "google-analytics" . }}
{{ end }}

を追記しておく。 ヘッダー内であれば基本的に位置の問題は無いと思われる。 次にlayouts/partials/google-analytics.htmlを作り、上で確認した「グローバルサイトタグ（gtag.js）」を書き込む。 書き込んだものは

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-YourTracking-Id"></script>
<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());

 gtag('config', 'UA-YourTracking-Id');
</script>

である（例のためにトラッキングIDの部分をUA-YourTracking-Idに書き換えてある）。

この状態でhugoを実行するなどして事前にWebページの生成を行なう。 ホームページのソースを見て、上記のコードに対応する部分がヘッダーにあることを確認する。

またHugoではデフォルトでサイトマップsitemap.xmlが生成されていると思われるので、生成されないように設定しているのであれば外しておく。

This XML file does not appear to have any style information associated with it. The document tree is shown below.

と表示されると思うが問題ないっぽい。

Google Search Console

Google Search Console へようこその「URLプレフィックス」に目的のWebサイトのURLを入力する。 上述のGoogle AnalyticsとHugoの設定がうまく行っていればそのままサイトの所有権が認証される。 認証されなくても、別の認証方法が選択肢が表示されるので可能なものを選択する。

認証されたプロパティのサイドバーの「サイトマップ」へ移動する。 サイトマップへのURLを貼り付けて「送信」する。 とくに設定の変更を行なっていなければ(url)/sitemap.xmlでサイトマップが確認できると思われる。

効果があるかよくわからないが、一応念の為に左サイドバーの「URL検査」にホームページのURLを入力し、「URLがGoogle に登録されていません」が表示されることを確認し、その下にある「インデックス登録をリクエスト」をクリックしておく。

結果

上記の操作を行なったのが2021-05-05だったのだが、すぐには設定が反映されず3,4日後くらいにGoogle検索で引っかかるようになった。 また本日(05-10)にGoogle Search Consoleからのメールが届いた。 ちゃんと設定がうまく反映されていたようで一安心。

蛇足: FaviconとApple-touch-icon

Favicon

検索に引っかかるようになったのだからちょっとくらい見栄えを良くしたいと思い、Faviconも表示されるようにした。 ArchieはFaviconには対応している1ので、config.tomlの[params]以下に

favicon = "IMG/favicon.ico"

を追記しておけばdocs/IMG/favicon.icoを読み込んで表示してくれる（content/ではないことにちょっと注意）。 （1度目の投稿直後に追記）と思っていたときが自分にもありました…。 Archieに共通する問題かよくわかっていないが、この設定だとホームページのみしかFavicon（と後に述べるApple-touch-icon）が表示されない。 修正箇所についてはApple-touch-iconのところでコードを示す。 config.tomlの設定と対応した形でdocs/以下にさえ置いていればいいので、ディレクトリの構造はdocs/favicon.icoであろうとdocs/ICON/favicon.icoであろうと問題ない。

表示するためのFaviconは適当なソフトで作っておく。 ここではapple-touch-iconのために180pxのpngで作る。 作ったものを例えばFaviconジェネレーターのようなサイトの助けを借りてicoに変換する。 「favicon icon 変換」で検索すればいくつかのサイトが見つかるはずである。 ここで自分は16x16と32x32、64x64の3つを選択してfavicon.icoを作った。 これを上述のdocs/IMG/以下に配置してfaviconについては完了である。

Apple-touch-icon

Appleのソフト向けにApple-touch-iconも作ったほうが良いらしい、という書き込みをFaviconについて調べている時に見かけたがのでついでに設定した。 表示するためのものは上で作った180pxのpngがApple-toucn-icon用の画像なのでapple-touch-icon.pngに名前を変更しておいてdocs/IMG/以下に配置しておく。

ArchieはApple-touch-iconには対応していないので、layouts/partials/header.htmlの12行目くらいにあるであろう

{{- if isset .Site.Params "favicon" -}}
<link rel="icon" type="image/png" href={{ .Site.Params.favicon }} />
{{- end -}}

の下にを

{{- if isset .Site.Params "favicon" -}}
<link rel="icon" type="image/png" href="{{ .Site.BaseURL }}{{ .Site.Params.favicon }}" />
{{- end -}}

に修正し、

<!-- apple-touch-icon -->
{{- if isset .Site.Params "appletouchicon" -}}
<link rel="apple-touch-icon" type="image/png" href="{{ .Site.BaseURL }}{{ .Site.Params.appletouchicon }}" />
{{- end -}}

を書き込む。 （追記）上記のコードは元々の相対パス指定から絶対パス指定に変更されたものになっている。 この設定に対応させてconfig.tomlの[params]に

appleTouchIcon = "IMG/apple-touch-icon.png"

を追記する。 これでApple-touch-iconも表示される。

  1. Archieのフォーク元のテーマEzhilを見れば、[params]の中にfavisonが含まれていることが確認できる。 ↩︎