こんにちは！この記事はLIFULL Advent Calendar2022の18日目の記事です。
はじめに
Webアプリケーションを扱う人たちにとって、検索エンジン最適化ことSEO（Search Engine Optimization）は切っても切り離せないものです。日本においてはGoogleの検索エンジンをYahoo!Japanも採用していることもあり、Google検索の実質シェアは全検索市場の90%超となり、ビジネス的に検索エンジンはとても大切な集客チャネルの１つです。
検索エンジン最適化のドキュメントとしては、Google検索セントラルという公式ドキュメントがありこちらを参照すれば網羅的にチップスを得ることができます。ですが、本記事では、フロントエンドエンジニアとしての経験＋大規模サイトのSEOへ専門的に集中していた経験などから、フロントエンドを扱うWebエンジニアなら絶対に抑えておいてほしいポイントを『Googleがランキングするまでの流れ』つまりページ公開～検索結果への期待通りの表示までの流れに沿って１つ１つの役割とともに技術的チップスを記述しています。
スペースの都合もあり、あくまで技術的かつ基礎にフォーカスした部分にとどめておりますので、より深く意味を知りたい方は記事中からリンクを張っていますので参照していただくなり、更に専門的に書かれた記事を参照されることをお勧めします。
ちなみにお忙しい方は、次の３行だけでも覚えましょう！
- ユーザーにもGoogleにも『ページの存在を知ってもらう』ようにする！
- ユーザーにもGoogleにも『ページを正しく理解してもらう』ようにする！
- ユーザーにもGoogleにも『ページを好きになってもらう』ようにする！
検索エンジンの仕組み
基本的には、次の３ステップで成り立っています。
- クロール
- インデックス登録
- 検索結果表示（ランキング）
１つ１つを詳しくみていくと・・
クロール
ウェブクローラー（Googlebot）というソフトウェアが、インターネットを自動巡回し、テキスト・画像・動画などをGoogleへダウンロードし蓄積します。
すべてはここから始まるため、ウェブクローラーが自サイトで訪問してほしいページに必ず来てもらえる状態をつくりる必要があります。
ステップ①：有効なページの公開
技術的に最初に意識することは、有効なページを公開すること。つまりに以下を意識する必要があります。
- Googlebotがアクセス可能
- ページが機能していること（ステータスコード200）
- サポートされているファイル形式（ほぼすべての形式をサポート）で公開
- スパムコンテンツではないこと
ステップ②：Googleに発見してもらう
無事に有効なページを公開できても、Googlebotは神ではないのでそのままではページの存在を知ることができません。Googlebotがページを発見できるようにするためには、私たちから知らせてあげる仕組みの構築が必要となります。
手段としては大きく２つあります。
手段１：
すでにGoogleにインデックス登録されているページから、リンクでクロールできるようにする
具体的には、href 属性が指定された <a> タグでページを指定する必要があります。
また、Googleは<a>タグによるページ間の関連性をシグナルと認識しています。
注意するべきは、Javascriptのonclickなどで制御した遷移ではリンク扱いにならない可能性があります。
手段２：
sitemap.xmlでページを通知する方法となります。
小規模なサイトであれば、手段１のリンクでの通知で十二分ですが、大規模サイトや複雑なサイトではGooglebotがページを発見する手助けになります。
補足：ステップアップしたい方向け
- Googleはページ間の関連性をシグナルと理解していますと書きましたが、さらに<a>タグのrel属性を利用するとより正確な関連性をGoogleに伝えてることで高度な制御ができます。
- 会員ページなどクローリングしてほしくないページ場合は、robots.txt の disallow ルールを使用したり、Google がページをインデックス登録しないようにするにはクロールを許可し、noindex robots ルールを使用することで高度な制御もできます。
- 大規模なサイトでは、より重要なページを効率よくクローリングしてもらう事を意識する必要があります。これはGoogleといえども処理量に限界があることに起因しています。
これが『ページの存在を知ってもらう』です。
技術的観点以外ではSNS活用なども有効です。
インデックス登録
無事にGooglebotがページを有効なものと認めてくれたら、
次のステップはインデックスへ登録をしてもらうこととなります。
コンテンツを正しく理解してもらう
Googleではさまざまなファイル形式の解析やインデックス登録が可能です。しかしやはり得手不得手はあり、ページ作成者側として大切なのは『ページを正しく理解してもらう』為の工夫になります。そのためにはやはりHTML/テキストが今でも最も確実な手段です。
今日ではJavascriptを利用したリッチコンテンツは当たり前に利用されており、私たちの体験を大いに向上させてくれています。ただしSEOにおける技術的な側面をみるとGoogleがJavascriptで生成されたコンテンツをインデックス処理する際には少し複雑な処理が必要となってきます。これは小規模サイトであれば無視できるかもしれませんが大規模サイトではインデックスパフォーマンスを意識した設計が必要となることもあります。
また、Googleも公式に推奨していますが、Webは多くの方に開かれておりは検索エンジンだけではなく、さまざまなユーザーも配慮してページを作成できるとよいでしょう。例えばスクリーン リーダーやJavaScript 対応のブラウザを使用していないブラウザのユーザーのニーズを考慮してくとよいと思います。SDGsでも言われている「誰一人取り残さない」にも則していきますね。基本的なところでは見出しタグ<h1>などではラベリングや階層構造を正しく意識する、画像にはalt=””で画像を簡潔に説明できる代替テキストを入れるなど、といったWebアクセシビリティにも通じることを意識していくことが大切になります。
冒頭でも述べましたが、HTML/テキストだけでも正しく情報が伝わる設計ができていれば、個人的には検索エンジンにもユーザーにも技術的実装方法としてもシンプルかつ確実といえる手段の１つだと思います。
メタタグの設定
ページの情報を正しく伝えるためにはメタタグも重要です。
本記事内でトピックス的に書き出すほどの内容はないのですが、具体的設定方法はこちらを参照してもらえたらと思います。
インデックス状況の確認
Search consoleで確認をすることができます。技術的な部分でもない為ここでは説明を省略させていただきます。
検索結果表示（ランキング）
無事にインデックス登録されても油断禁物です。
ランキングの仕組みとしては、インデックスしGoogleが理解できた情報とユーザーが検索したキーワードから、自サイト以外のページ群と比較され関連度が高いと思われる順に検索結果に表示されます。
上位表示されるためには、もちろんニーズに一致したコンテンツは必要なのですが、技術的にできることを絞るとユーザーエクスペリエンスを高めることが大切になってきます。
ここで取り上げるユーザーエクスペリエンスは、ページコンテンツそのものの価値以外に関する体験に対してのシグナルを指しており、具体的にはページの読み込みパフォーマンス、インタラクティブ性、視覚的安定性に関する実際のユーザー エクスペリエンスを測定する指標のセットが含まれており自サイトがどのように評価されているかはSearch Consoleというツール上のユーザーエクスペリエンスで確認ができます。
（正確には、モバイルフレンドリー、HTTPS、煩わしいインタースティシャルに関するガイドラインといったものも適用）
つまり、利用ユーザーが快適にページ内コンテンツを閲覧できる、つまり『ページを好きになってもらう』ことが望ましく、それらを指標化されたもの確認しながら改善などを意識していく必要があります。こちらはLighthouse、PageSpeedInshigtなどを利用することで簡単にページ単位での課題を確認できます。詳しくはこちらを確認してください。
まとめ
長文をダラダラと書いてしまったのですが、上述した手段は技術革新で移り変わってくものです。ただ本質的なところは変化しづらいので、冒頭にも書きましたが次の３行だけ覚えてもらったらこの記事の目的を果たせたと思っています！
- ユーザーにもGoogleにも『ページの存在を知ってもらう』ようにする！
- ユーザーにもGoogleにも『ページを正しく理解してもらう』ようにする！
- ユーザーにもGoogleにも『ページを好きになってもらう』ようにする！