Google検索とSEOを理解して上位にヒットするサイトを作る

## 概要
webサイトをデプロイしたら Google 検索でもヒットするようになると思ってしまいがちです。しかし必ずしもそうとは限りません。ヒットするようになる場合もあれば、ならない場合もあります。この記事ではその理由と共にwebサイトをGoogle検索に引っ掛け上位に表示させる方法をお伝えします。

## デプロイの意味するところ
デプロイとは完成したwebサイトをインターネット上に公開することをいいます。これにより世界中からサイトにアクセスできるようになります。


ここでwebサイトは公開用のサーバーにのり、URL(アドレス)を持つことになります。よくインターネット上での住所だと言われていますが、ここにアクセスすることで我々はサイトを閲覧することができます。しかしGoogle検索によって辿り着けるかというとこれはまた別の話になります。

## 「インターネット＝ Google検索」ではない
インターネット上に公開されている無数のwebサイトの中から自分の知りたい情報を探し出すのは至難の技な訳ですが、これを容易にしてくれるのが検索エンジンです。[Google](https://www.google.com/), [Bing](https://www.bing.com/), [Yahoo](https://search.yahoo.co.jp/) ...などいろいろありますが、現在ではあまりにもGoogle検索が有名になってしまったため、

**インターネット＝ Google検索**

みたいな錯覚に陥ってしまいがちです。もちろんこの錯覚は間違っていて、正しくは **インターネット上に公開されているサイトをGoogle検索が追いかけている** という構図になります。

## デプロイしたのにGoogle検索でヒットしないのはなぜか
世界中で次々と新しいサイトが生まれインターネット上に公開され続けていることはなんとなく想像できると思いますが、Googleは独自のアルゴリズムによりこれらを追いかけています。絶えず変化するweb上のコンテンツ, また新たに生まれるコンテンツを常に走査(クロール)し、最適な検索インデックスを構築しているわけです。

インターネット上でGoogleのクローラに検知されたサイトは、Googleの検索インデックスに仲間入りします。ここで晴れてサイトがGoogle検索でヒットするようになります。つまり**デプロイしたのにGoogle検索でヒットしない**というのは以下のような状態を意味しています。

```mermaid
flowchart
    subgraph インターネット
        　検索されないサイト
        subgraph Google検索インデックス
            検索されるサイト
        end
    end
```

## Google Search Consoleとは
クローラに検知されるとGoogleの検索インデックスに仲間入りできることがわかりました。しかし検知されるまで待っていられないという方もいるでしょう。また場合によっては検知されないこともあります。そんな時には[Google Search Console](https://search.google.com/search-console/about)にサイトのURLを登録することで、直接Googleのインデックスに投げかけることができます。

Google Search Consoleでは登録したサイトの検索順位やトラフィックを確認することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/ca1a6ea9-615e-fd4b-9737-e9d4e6706a27.png)
色々便利なので筆者はデプロイと同時にGoogle Search Consoleへの登録も行うようにしています。

## Google検索インデックスに登録されるまで
ここからは実際に筆者がデプロイしたサイトが検索インデックスに登録されるまでの様子を紹介します。

以前の記事で紹介したGPA計算サイトです。詳しくは[立命館大学の GPA 計算サイトを作った話](https://qiita.com/hirokiwa/items/4faba0ffed55d0d62a7c)を読んでください。

https://rits-gpa.vercel.app/

### デプロイ直後
デプロイが完了したらまずデプロイ先のURLで検索をしました。検索演算子`site:`を使用することで、検索対象を特定のURLやドメインに制限することができます。

以下のように`site:https://rits-gpa.vercel.app/` と検索したところ、`site:https://rits-gpa.vercel.app/ に一致する情報は見つかりませんでした。`と表示されました。サイトが検索インデックスに登録されていないことが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/45aac386-f818-8762-da1f-5f48f12337d7.png)

### Google Search Console に登録
サイトのURLをGoogle Search Consoleに登録しました。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/e1e79ad8-9b63-2ba7-359d-ba85ac2a6059.png" width=550px>
もう一度`site:https://rits-gpa.vercel.app/` と検索してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/c5cb7ef5-28da-3461-0fbb-5f8eeac2c0b1.png)

今度はヒットしました。検索インデックスに登録されていることが確認できます。

## SEO(検索エンジン最適化)
Google検索からのアクセスを獲得するためには、検索結果のより上位に表示される必要があります。そのためにサイトの構成や記述を調整するなど、検索エンジンに対して最適化を行うことをSEOといいます。SEOの改善にはさまざまな方法がありますが、今回は最も手軽にできる項目を試しました。検索後のタイトルリンクに着目します。

>ユーザーがコンテンツを検索するときに使われる可能性のある単語を選んで、これらの単語をページ上の目立つ場所（ページのタイトル、メインの見出しなど）や、わかりやすい場所（代替テキスト、リンクテキストなど）に配置する。

[Google 検索の基本事項（旧ウェブマスター向けガイドライン）| Google 検索セントラル  |  ドキュメント  |  Google Developers](https://developers.google.com/search/docs/essentials?hl=ja)


ここでGPA計算サイトがどのような単語で検索されたいかを考え、3つのキーワードを挙げました。

* 立命館
* GPA
* 計算

これらのキーワードを`<title>`や`<h1>`などの目立つ場所に配置することで、タイトルリンクに影響を与えます。

当初はこれらのキーワードはタイトルリンクに反映されていませんでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/e4cadb68-89ae-06c7-90ab-238098489fb4.png)


`GPA Calculator for Ritsumeikan`というのがもともと考えていたタイトルなのですが、先頭に`【立命館大学GPA計算ツール】`を付け足して3つのキーワードをタイトルにねじ込みました。
```html
<title>【立命館大学GPA計算ツール】GPA Calculator for Ritsumeikan</title>
```

`<h1>`にも同様に3つのキーワードを入れておきます。ページ上部に余計な説明文が入っているのはこのためです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/19b93c90-e0ab-4b28-2f96-af27a3eb013d.png" width=550px>

ただし見出しダグの使い方としては間違っているので推奨はしません。Googleのクローラはこの見出しタグの情報を元にウェブサイトの構造を把握しており、間違った記述はSEOに悪影響を及ぼすことがあります。

## 実際に検索してみる
先ほどの3つのキーワードで実際に検索をしてみます。

["立命館 gpa 計算"で検索](https://www.google.com/search?q=%E7%AB%8B%E5%91%BD%E9%A4%A8+gpa+%E8%A8%88%E7%AE%97)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/3304e7a4-62c2-23df-c824-2178a7c21035.png)

立命館大学公式に次いで2番目に表示されました。`title`に設定した文字列がタイトルリンクに反映されていることがわかります。

こちらは変動が激しいのですが、調子がよければ `立命館 gpa`だけでヒットします。
["立命館 gpa"で検索](https://www.google.com/search?q=%E7%AB%8B%E5%91%BD%E9%A4%A8+gpa)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2293026/e702d33c-8ff9-ebf4-84ff-5634c02b1640.png)


## まとめ
Googleの検索アルゴリズムにうまくのることができればクリック数を増やすことができるかもしれません。ぜひSEOを意識した記述を心がけてみてはいかがでしょうか。またwebサイトをデプロイする際は同時にGoogle Search Consoleに登録することをおすすめします。

## 参考

https://www.google.com/intl/ja/search/howsearchworks/how-search-works/

https://developers.google.com/search/docs?hl=ja