こんにちは。アイレットデザイン事業部のマークアップエンジニアの黒木と申します。アイレットデザイン事業部では「INSIDE UI/UX」と題して、所属デザイナーとエンジニアがデザイン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に対する知見を幅広く発信していく予定です。お付き合いのほどよろしくお願いいたします。

世の中にはSEOに関する運用面からのノウハウがたくさんありますが、Googleが公式に出しているSEOに関するドキュメントを見つけましたので、今回はこのドキュメントを確認しながら知識を再確認するため自分なりに要点をまとめてさせていただきます。 また、その中でも自分の仕事に直結するHTMLに関する部分を中心に記述していきます。

用語

  • インデックス
    → Googleが認識したページを格納する場所。
  • クロール
    → 新しいページや更新されたページを検出すること。またこの自動ソフトウェアを「クローラ」という。
  • SEO
    → 検索エンジン最適化の略。検索エンジンがページを検出しやすくするためにサイトを改善すること。

Google検索の流れ

Googleでサイトを見つけるまでの流れとしては大きく分けて3つの段階があります。
「Google の検索エンジンの仕組み、検索結果と掲載順位について」に詳しく説明が書かれていますが、ここでは大枠を説明します。

  1. クロール：クローラーを使用してウェブ上で見つけたページからテキスト、画像、動画をダウンロードする。
  2. インデックス登録：見つけたページ上のテキスト、画像、動画ファイルを解析し、その情報を Google インデックス（大規模なデータベース）に保存する。
  3. 検索結果の表示：ユーザーが Googleで検索した際に、Googleがユーザーの検索語句に関連する情報を返す。

Googleがコンテンツを理解しやすくするには

Googleがクロールする時は、ユーザーが見ているのと同じ状態でページを参照できる必要があります。最適なインデックス登録を実現するため、サイトで使われているJavaScriptファイル、CSSファイル、画像ファイルへのアクセスをGoogleに許可する必要があります。

HTMLの構造編

各ページに固有の正確なタイトルをつける

< title >要素をHTMLの< head >要素内に配置して、サイトの各ページに固有のタイトルテキストを作成してください。

【注意すること】
– ページのコンテンツについて正確に記述する
読みやすく、ページの主題が効果的に伝わるような記述をしてください。
– ページごとに< title >要素を作成する
サイトの各ページに固有の< title >要素を配置してください。こうすることで各ページの違いをGoogleが容易に認識できるようになります。
– 簡潔でわかりやすい< title >要素を使用する
< title >要素のテキストが長すぎる、または関連性が低いと思われる場合は、テキストが一部しか表示されなかったり、検索結果に自動的に生成されるタイトルリンクが表示される可能性があります。

メタタグのdescriptionを使用する

descriptionはGoogleや他の検索エンジンにページ内容の要約を伝えます。description内のテキストは検索結果のスニペットとして表示されます。テキストは1、2個のセンテンスまたは短いパラグラフを記述します。メタタグのdescriptionは、< title >要素と同様にHTMLの< head >要素内に配置してください。

【注意すること】
– ページの内容を正確に要約する
スニペットとして表示されるため、ユーザーに情報を提供し興味を引いてもらえるような説明を記述する必要があります。descriptionのテキストに文字数の上限下限はありませんが、スニペットで表示される際に全文が表示される程度の長さにすることをお勧めします。また、そのページがユーザーにとって有益で関連性が高いかを判断できるような情報をテキストに含めることもお勧めします。
– ページごとに固有のdescriptionを使用する
ページごとに異なるdescriptionを使用することは、ユーザーにとってもGoogleにとっても有益です。

見出しタグを使用して重要なテキストを強調する

わかりやすい見出しを使用して重要なトピックを示すと、コンテンツの階層構造が作成され、ユーザーがドキュメント内を移動しやすくなります。

【注意すること】
– ページの概要を書く場合を想像する
ページ上のコンテンツの主要なポイントと下位のポイントは何かを検討し、それに応じてどこに見出しを使用するか決定します。
– ページ全体で控えめに見出しを使用する
見出しタグは意味のある場所で使用してください。ページの見出しが多すぎるとユーザーがコンテンツを読みにくくなり、1つのトピックがどこで始まって終わっているのかが判断しにくくなります。

画像を最適化する

一般的にサポートされているファイル形式（JPEG、GIF、PNG、BMP、WebP）を使用してください。ファイル名の拡張子をファイル形式に一致させるようにしてください。

【注意すること】
– HTML要素の< img >または< picture >を使用する
セマンティックHTMLマークアップを使用するとクローラが容易に画像を検出して処理できるようになります。インデックスに登録したい画像の表示にCSSを使用するのは控えてください。
– alt属性を使用する
画像にわかりやすいファイル名をつけた上で、alt属性で説明を記述してください。何らかの理由で画像を表示できない場合にaltテキストが表示されます。そのため、簡潔でわかりやすいテキストを使用するようにしてください。
また、ユーザーがスクリーンリーダー等を使ってサイトを閲覧する際にaltテキストが画像についての情報を提供します。
加えて、画像をリンクとして使用する際に画像のaltテキストが、テキストリンクのアンカーテキストと同様に扱われます。

サイト構成編

検索エンジンにとって重要となるナビゲーション

ウェブサイトのナビゲーションは訪問者がコンテンツを素早く見つけるために重要です。それだけではなく、ウェブサイトの所有者が重要と考えるコンテンツを検索エンジンが理解する際に役立ちます。Googleの検索結果はページレベルで提供されますが、Googleはサイト全体でそのページがどのような役割を果たしているのかも把握しようとします。

ユーザーにとってシンプルなナビゲーションページを作成する

ナビゲーションページはウェブサイトの構造を表示するサイト上の簡単なページです。訪問者はサイト上のページを見つけられない場合にこのページにアクセスすることがあります。検索エンジンもこのページにアクセスし、サイト上のページのクロール範囲を広げます。

【注意すること】
– わかりやすい階層を作成する
一般的なコンテンツからそのサイトで求めている具体的なコンテンツへ、ユーザーが簡単に辿り着けるようにしてください。サイト上のすべてのページにリンクから到達できるようにし、サイト内の検索機能をできるだけ使わずに済むようにしましょう。関連ページへのリンクを適宜追加すると、ユーザーがコンテンツを見つけやすくなります。
– ナビゲーションにテキストを使用する
サイト上のナビゲーション部分をテキストリンクで制作すると、検索エンジンが容易にサイトをクロールして把握できるようになります。
– 有益な404ページを表示する
ユーザーをサイト上の有効なページに導く親切なカスタム404ページを用意することで、ユーザーにとっての利便性を大幅に改善できます。

パンくずリストを使用する

パンくずリストとは、ページの上部か下部にある内部的なリンクの行です。訪問者はこれを使用して、前のセクションやルートページに素早く戻ることができます。パンくずリストを表示する場合は、パンくずリストの構造化データのマークアップを使用することもおすすめします。

コンテンツの情報を伝えるわかりやすいURL

ドキュメントにわかりやすいカテゴリやファイル名を使用すると、サイトを効果的に整理できるだけでなく、コンテンツにリンクしようとするユーザーにとってわかりやすいURLを作成することができます。暗号のようなURLは、訪問者を困惑させることがあります。

URLは検索結果に表示される

通常、ドキュメントのURLは、Google検索結果に何らかの形式で表示されます。
GoogleはたとえURLがどれほど複雑でも適切にクロールできますが、URLをできるだけ簡潔にするために手間をかけることをお勧めします。

【注意すること】
– URLで単語を使用する
サイトのコンテンツや構造に関連する単語を含むURLはわかりやすいため、訪問者にとってより親切になります。
– シンプルなディレクトリ構造を作成する
コンテンツが適切に整理され、訪問者がサイト上のどこにいるのかわかりやすいディレクトリ構造を作成してください。ディレクトリ構造を利用して、そのURLで見つかるコンテンツの種類を表すようにします。

まとめ

今回はHTMLを制作する上で必要なことを中心にまとめました。たくさんの注意点がありましたが、HTMLの基本的な部分を押さえていればGoogleの求めるものになることが再確認できました。

ドキュメントの中でも印象的だったのは「Googleがクロールする時は、ユーザーが見ているのと同じ状態でページを参照できる必要があります。」という部分です。ユーザーのために見やすいサイトを作成して、その上でGoogleが理解しやすいようにHTMLの構造は注意する必要があるといったようにユーザーとGoogleを完全に別物だと考えていました。そのため、ユーザーとクローラーが同じように見れるサイトを作ることでGoogleのクロールやインデックス登録がより適切に行われるという考え方が自分にとって新鮮で、とても腑に落ちました。今後は私もこの考え方でサイトを作成していこうと思いました。

また、サイトを作る際お客様が求めることとしては、やはり検索上位にサイトが表示されることだと思います。今まで携わらせていただいたお仕事でもここに書いていることは実践してきましたが、今回再確認させていただいたので今後携わらせていただくお仕事でも意識して取り組んでいこうと改めて思います。

参考文献