HTMLを正しく書いてもSEO対策にはならないお話
宣伝📚
まずは結論です。
はじめに
Twitterや技術ブログ、スクールの教材などでこのフレーズをよく見かけます。
SEO対策のために、正しいHTML（タグ）でコーディングしましょう
色々言いたいことがありますが、とりあえずこの考え方は間違っています。
100%間違っているわけではないですが、このように発言している人はSEOの本質を理解していない可能性が高いです。
この記事では、以下について詳しく解説していこうと思います。
- そもそもSEO対策とは
- 何故正しいHTMLでコーディングをしてもSEO対策にならないのか
- それでも正しいHTMLでコーディングをする理由
また、この記事では聞き慣れない用語がたくさん出てくるかもしれません。分からない用語があったら調べながらこの記事を読むと、より適切に理解できると思います。
そもそもSEO対策とは
SEO対策（検索エンジン最適化）をもう少し具体的に考えてみましょう。SEOは以下3つに細分化できます。
- クローラーに正しい情報を伝える
- 検索結果の上位に表示されるようにする
- 検索結果でクリックされるようにする
この3つの対策をする = SEO対策になると私は考えます（この考え方は会社やプロジェクトで異なる可能性があります）。
上記をそもそも認識していなかったり正しく理解していない方が多いから、
SEO対策のために、正しいHTMLでコーディングしましょう
このような発言が生まれるのでは…と思っています。
クローラーに正しい情報を伝える
クローラとは
ページのコンテンツ内容とURLを取得して、それを「インデックス」と呼ばれるデータベースに登録する巡回型ソフトウェアのこと。
クロールとは
クローラが情報を取得すること。ページ内のリンクを辿ったり、サイトマップを読み込むなど情報を取得する方法は複数あります。
インデックスとは
クロールした情報を格納するデータベースのこと。インデックスに登録されないと、そもそも検索結果に表示されない。
検索エンジンとは
ユーザーが入力した検索キーワードをもとに、インデックスに登録された情報から適切なページを検索結果に表示させること。
クローラにページの情報を正しく伝えないと、検索エンジンにも正しい情報が伝わりません。そもそもクロールやインデックスに登録されないと、検索結果に表示すらされません。
なので、クローラに正しい情報を伝えるために「正しいHTMLでコーディングをする」というのはあながち間違ってはいません。
しかし、それは過去の話です。
昨今のクローラーは日々性能が向上しているので、HTMLが汚くても正しく情報を取得してくれます。divを大量に使ってもh1を複数使っても順位が下がることはありません。
そもそもクローラに正しく情報を伝えても、その情報の質が低かったら検索エンジンが低評価をするので、検索結果の順位も低くなります。
私個人のぼやき
「正しいHTMLを書けば検索結果の上位に表示される」ような仕様だと、ユーザーに適切な検索結果が表示されません。 これを天下のGoogleさんは許すわけがないです。なのでやはり、SEOの本質は「ユーザーにとって有益なコンテンツを作成する」に尽きると思います。←次の項で深堀りします
検索結果の上位に表示されるようにする
前述の通り、正しいHTMLでコーディングをしてもクローラーに正しく情報が伝わりやすくなるだけで、検索結果の上位に表示されるわけではありません。
では、どうすれば上位に表示されるのか。答えはとてもシンプルです。
検索キーワード（=ユーザーが求める情報）にマッチする有益なコンテンツほど、検索エンジンが高評価をして検索結果の上位に表示されるようになります。
例えば、「最新のおすすめ観光スポット10選」のような記事の場合、古い情報だと低評価に繋がります。 ユーザーは最新の情報を求めているので最新の情報を載せることで高評価に繋がります。
検索結果でクリックされるようにする
検索結果には見出しや説明文が表示されています。
これらはタイトルタグやメタディスクリプションに設定した値が反映されます。ユーザーに伝わりやすい文章を設定することでクリック率は向上します。
また、ユーザー体験が向上するリッチリザルトという機能もあります。検索結果にパンくずやFAQが表示されるあれです。
このように、検索結果に表示される内容を工夫することでクリック率が向上して、最終的にはサイトへの流入が増えます。
・
・
・
以上でSEO対策に関する解説は終わりです。これまでの内容を簡単にまとめてみます。
- SEOの具体的な施策は以下の通り
- クローラーに正しい情報を伝える
- 検索結果の上位に表示されるようにする
- 検索結果でクリックされるようにする
- クローラーに正しく情報を伝えるためにはHTMLを正しく書くことはあながちまちがってはいないが、クローラーの性能は日々向上しているからHTMLが汚くてもクローラーには正しく伝わる
- 検索結果の上位に表示させるには、ユーザーが求める良質なコンテンツを作る必要がある
- 検索結果でクリックされるような施策を行うのも大事
次に、何故正しいHTMLを書くべきなのかを解説していきます。
正しいHTMLでコーディングをする理由
以下3つの観点から、適切なコードを書く必要があります。
- Webアクセシビリティのため
- ユーザビリティのため
- 検索結果に表示される内容を充実させるため
（執筆時には上記の内容しか思いつきませんでしたが、他にも理由はあるかもしれません）
Webアクセシビリティのため
Webアクセシビリティとは以下の通りです。
Webサイトやアプリケーション等で提供する情報、サービスや機能を、一人でも多くのユーザーが利用できるようにするために不可欠な品質基準の1つ。
あるいは、
より多くのデバイス、利用環境をサポートすることによって、一人でも多くのユーザーに、より多くの場面や状況で、Webサイトやアプリケーション等で提供する情報、サービスや機能を利用してもらえるようにすること。
簡単にまとめると、「様々な特性のユーザーや環境でも正常にサイトを利用できるようにする」ということです。
例えば、視覚障害を持った方は音声読み上げ機能を使います。これはHTMLを上から順番に読み上げていくので、HTMLの順番がめちゃくちゃだと正しい文脈で情報が伝わらなくなってしまいます。
なので、適切なコードを書くことは良いWebアクセシビリティに繋がります。
ユーザビリティのため
ユーザビリティとは以下の通りです。
学習しやすさ
システムは、ユーザーがそれを使って作業をすぐ始められるよう、簡単に学習できるようにしなければならない。
効率性
システムは、一度ユーザーがそれについて学習すれば、後は高い生産性を上げられるよう、効率的な使用を可能にすべきである。
記憶しやすさ
ユーザーがしばらくつかわなくても、また使うときにすぐ使えるよう覚えやすくしなければならない。
エラー発生率
システムはエラー発生率を低くし、ユーザーがシステム試用中にエラーを起こしにくく、もしエラーが発生しても簡単に回復できるようにしなければならない。また、致命的なエラーが起こってはいけない。
主観的満足度
システムは、ユーザーが個人的に満足できるよう、また好きになるよう、楽しく利用できるようにしなければならない。
『ユーザビリティエンジニアリング原論』（邦訳は1999年、原著は1994年）より
簡単にまとめると、分かりやすい・使いやすいサイトを作るということです。以下は良いユーザビリティの例です。
- モーダルをキーボードで操作できる（escボタンで閉じるなど）
- フォームの項目が入力中であることを明示する
- サイトの表示速度が早い
- ボタンをクリックした時のレスポンスが早い
良いユーザビリティにはコアウェブバイタルも含まれると思います。
個人的には「アクセシビリティ」より「ユーザビリティ」を重要視するケースのほうが多いと思います（プロジェクトの工数や経営判断などの都合上）。
検索結果に表示される内容を充実させるため
タイトルタグやメタディスクリプションを正しく設定することで、検索結果の情報が充実します。
また、リッチリザルトを表示させるには構造化データの設定が必要です。
Google の検索結果にリッチリザルト形式で表示させるには、ページに「構造化データ」を設定します。構造化データを追加する方法には以下の2種類の方法があります。
・HTML に構造化データのマークアップを追加する
・データハイライターで構造化データを追加する
検索結果の内容を充実させるためにも、適切なコードを書く必要があります。
適切なコードを書く具体例
この項では、どのようにコードを書けばいいのかを具体的に解説していきます。
画像に適切なalt、width、heightを付ける
画像に適切なaltを付けることで、画像が表示されない場合でもユーザーに情報が伝わります。
また、altの付け方はほとんどの人が正しく理解していません（偏見）。 以下の記事がとても分かりやすいので是非読んでみてください。
widthとheightを付けることで、コアウェブバイタルのレイアウトシフト対策になります。 さらに、遅延読み込みのloading="lazy"も利用できるようになります。
モーダルを実装する時はアクセシビリティに対応したライブラリを使う
アクセシビリティ対応したモーダルとは以下を指します。
・モーダルが開いている間は後ろのコンテンツを操作することはできない。
・モーダルが開いている間はモーダル内のコンテンツのみにフォーカスがあたるするようにする。
・モーダルが開いたら、フォーカスをモーダル内の最初のフォーカス可能な要素に移動する。
・escキーでモーダルを閉じる。
ちなみに、上記の要件は全てMicromodal.jsが対応しています。
その他の例（ざっくり解説）
- 適切なHTMLタグを使う
- コンテンツモデルを理解する
- WAI-ARIAを取り入れる（以下参考記事）
- フォームの項目が入力中であることを明示する
- 擬似クラスの:focusや::focus-visibleを使う
- コアウェブバイタルの対策を行う
- 作成したページをインデックスさせるために、パンくずリストやサイトマップを作成する
- サイトマップはXML形式で作成し、Search Consoleで送信する
最後のサイトマップなんかはコードの話ではないですが、SEO周りやよく使われるサービスの知識を付けておくと何かと重宝されます。 以下の知識は最低限欲しいかな…と個人的には思っています。
- Googleアナリティクスとga4
- GAとも呼ばれています
- Search Console
- サチコとも呼ばれています
- Googleタグマネージャ
- GTMやタグマネとも呼ばれています
- 広告配信、成果タグ（コンバージョンタグ）などの仕組み
Googleのガイドラインに則る
これが最後の解説です。
Googleのガイドラインに則ってコンテンツを作成したり、コーディングを行うのが結局は一番重要です。「ユーザーにとって有益なコンテンツを作成する」のもガイドラインのひとつです。
例えば、コアウェブバイタルもガイドラインに該当します。
コアウェブバイタルによってSEO評価が変わる
コアウェブバイタルの評価が低いと検索順位が直接的に下がるわけではないですが、複数のページのSEO評価が近い場合、コアウェブバイタルで優劣を付けられます。
ページ エクスペリエンスの構成要素はすべて重要ですが、ランキングでは、ページ エクスペリエンスの一部の要素が平均以下であっても、総合的に優れた情報を含むページが優先されます。優れたページ エクスペリエンスが関連性の高い優れたコンテンツに勝ることはありません。しかし、同様のコンテンツを含むページが複数ある場合は、ページ エクスペリエンスが検索ランキングで非常に重要になります。
引用：より快適なウェブの実現に向けたページ エクスペリエンスの評価
また、Googleは以下のように提唱しています。
Google では、ウェブのエクスペリエンスの改善に伴ってユーザー エンゲージメントが向上すると信じています。上記の新しいシグナルを検索に組み込むことで、あらゆる人々にとってウェブをより良いものにできると考えています。
引用：より快適なウェブの実現に向けたページ エクスペリエンスの評価
このことから、ユーザーエクスペリエンス（アクセシビリティやユーザビリティなど）がSEOの評価に影響を与える可能性は十分にあります。なので、適切なコードを書くのはやはり重要なことだと思います。
ガイドラインに則ってコンテンツを作成する
例えば、商品レビューのコンテンツは「嘘のレビューを掲載していると評価を下げる」と唱えています。
この取り組みの例としては、商品レビューのランキングを改善する取り組みが挙げられます。この取り組みでは、商品説明を書き換えただけの商品レビュー、実際にはレビューでない商品レビュー、または実際に体験したものではない商品レビューなど、低品質のレビューに対処します。Google は 2021 年に商品レビューの評価方法を 2 つ大幅に更新しました。これにより、低品質のレビューが大幅に削減され、コンテンツと専門性に優れた商品レビューがより上位にランキングされるようになりました。
引用：2021 年の Google の検索スパム対策
この考え方も結局は「ユーザーに有益な情報かどうか」が判断基準なので、有益な情報なら評価が上がる、不適切な情報なら評価が下がるということです。
Googleのガイドラインに則ってコンテンツを作成するというよりは、「ユーザー目線でコンテンツを作成すれば自然とガイドラインに則っている」ようになると思います。
参考記事
Google検索セントラルブログには、Google検索のコアアルゴリズムの最新情報やSEOのベストプロアクティスなどが紹介されています。
まとめ
「HTMLを正しく書いてもSEO対策にはならない」は理解頂けたでしょうか？
・適切なコードを書く
・ユーザーに有益なコンテンツを作成する
これらを行うことではじめてSEO対策と呼べるようになります。
HTMLやSEOをはじめ、Webに関する技術は日々進化しているので、公式サイトやSNS、ブログなどで定期的に知識をアップデートするのはとても重要です。また、大量の情報の中から正しい情報を見極める力も同時に身につけていきましょう。
Discussion