/ #tech #hugo 

Google Search ConsoleをHugoブログ+Netlifyの環境に設定する方法

ブログを調べてたらGoogle Search Console って見たけどそれ何?
HugoとNetlifyで作ったブログに設定できるの?
SEO対策でクローラーにインデックスとかどうやったらいいの?

今回はGoogle Search Consoleについて、
こんな疑問を持っている方向けに設定方法を紹介します。

自分も Google Search Console というのを知らなかったのですが、
今回HugoブログとNetlifyの環境に簡単に設定することができたので
その方法を書こうと思います。

記事の概要はGoogle Search Console の説明と、Netlifyでの設定の仕方
GoogleのクローラーにURLをインデックスさせる方法です。

目次

  1. Google Search Console とは
  2. 設定する目的 はインデックス
  3. Google Search Console への初期登録
  4. Netlifyに認証用metaタグを設定する方法
  5. Google Search Console でクローラーにインデックスさせる
  6. インデックスされたかする方法

1. Google Search Console とは

seachview

Google Search Console とは自身のウェブサイトに、どのようなキーワードで検索されて訪れているのか。

検索結果で何番目くらいに表示されているのか。

このような自分のサイトに来るまでの検索情報を解析してくれるツールです。

解析結果を参考にSEO対策やサイト改善をする為の指標を得れます。

2. 設定する目的

一番の目的はサイトをGoogleにインデックス登録することです。

Google に検索されるには必ずしもインデックス登録をする必要はないのですが、
SEOで上位に検索して欲しい場合には、
インデックス登録することがお勧めです。

3. Google Search Console への初期登録

  1. 開始をクリック
  2. サイトURLを入力し[プロパティを追加]ボタンを押します
  3. 所有権の確認の画面に遷移します。
  4. その他の確認方法欄のHTMLタグを選択します
  5. 下のmetaタグをコピーします

meta

このmetaタグをを使いこのURLが自分のサイトだよと認証させます。

4. Netlifyに認証用metaタグを設定する方法

コピーしたmetaタグをnetlifyのスニペットインジェクション機能を使ってmetaタグを埋め込みます。

埋め込む設定箇所への操作

  1. Setting → Build & deploy → Post orocessing → Snippet injection → Add snippet
  2. Insert before を選択します。
  3. Script name に分かりやすい名前を入力 (例:GoogleSearchConsole)
  4. HTMLにコピーしたmetaタグをペーストします

Saveを押して保存完了です。

これをデプロイするためにはのDeploysタブのTrigger deploy → Deploy siteをクリックします 。

deploy

これで自分のサイトに認証用のmetaタグがデプロイされました。

metaタグを確認するにはChromeで自分のサイト表示させます。

右クリックで[ページのソースを表示]を選択して、
ヘッドの中に meta タグが挿入されているか確認しましょう。

5. Google Search Console でクローラーにインデックスさせる

インデックスされると、Googleで検索した時に表示されやすくなります。

そしてGoogleにインデックスされるにはクローラーというロボットに見てもらう必要があります。

いままでは[fetch as google]を使っていましたが、
2019年3月以降はご利用いただけなくなります。

代わりに新しい URL 検査ツールを使用してくださいと、
Google さんが言っているので、
これから新しく登録される方は[URL 検査ツール]を使用するといいと思います。

oldfetchasgoogle

やり方

  1. [URL 検査]タブを押します。
  2. 自分のサイトのトップアドレスを入力します
  3. インデックス登録をリクエスト
  4. 検査画面が表示されて1,2分でインデックス登録されます

console

hugoブログでデプロイした場合はサイトマップが無いと思います。

なので「サイトマップが送信していません」と出ると思います。

サイトマップが必要かどうかについては、
以下の状態でなければ必要ではありません。

  • サイトのサイズが非常に大きい
  • どこからもリンクされていないページが大量にある
  • サイトが新しく外部からのリンクが少ない。
  • リッチメディアコンテンツを使用している

自分のブログの場合はサイトマップがなかったので特に登録はしませんでした。

モバイルユーザビリティは[公開 URL をテスト]ボタンを押すといいでしょう。

Hugoで作っていればページはモバイルフレンドリーですと表示されるはずです。

6.インデックスされたかする方法

Google 検索で以下のように検索します

site:自分のURL

例:site:https://cloudlance-motio.work/

index

このように表示されれば、インデックスされている状態になります 。

Google にインデックスされたならば徐々に自然流入が見込めるので、
アクセスが増えてくるのを楽しみに待ちましょう。

まとめ

以上、Google Search ConsoleをHugoブログ+Netlifyの環境に設定する方法でした。

Hugoブログは基本マークダウンファイルを編集するので、こういったmetaタグを入れるとかの、良く分からないをするのにちょっと調べたりしなきゃいけませんよねー。

ただ、こういったケースも想定して、スニペットを挿入できる機能がNetlifyに用意されている事が感動しましたねー。さすがNetlifyと思いました。

認証用metaタグの挿入のほかにも、Google Adsenseのスクリプトもこの機能で埋め込めるんじゃないかなーと思います。

自分はレイアウトファイルに直接埋め込んでpushしてしまったので、もう必要ないのですが、今度ほかにもスクリプトや、metaタグを埋め込みたい場合はNetlifyのスニペット挿入機能を使おうと思います。

今回の記事の書いた理由は、Netlifyの設定や機能の豊富な所に感動したので、記事にしようとおもった次第でございます。

Google Search Consoleも便利なのでぜひ解析に役立てて頂ければと思います。

このブログではフリーランス情報やプログラミング情報の発信を続けていこうと思うのでぜひ応援お願いします。また、Twitterでも日々の為になる技術情報やフリーランスについての有益な情報をつぶやくので、いいなと思ったかたはTwitter 札幌のフリーランス@クラウドランス望月フォローをお願い致します。

フォローする