SEOを「身近なもの」にたとえたら？ 初心者のテクニカルSEO理解に役立つ18の比喩（後編）

レンダリングとページ体験

基本的なことがわかったところで、私はウェブサイトの読み込みと表示の仕方に目を向けるようになった。これらの概念は、適切なたとえを見つけるまで理解するのが難しかった。

比喩12レスポンシブデザインは、小さく折りたためる水筒のようなもの

小さく折りたためる水筒がスペースに合わせて形を変えられるように、レスポンシブウェブサイトは異なる画面サイズに適応できる。漏れや破損もなく伸縮する。

デスクトップデバイスを使っている場合は、ブラウザのウィンドウサイズを変更して、この動作を実際に確認してみよう。「Google Chrome」では、［F12］キーを押すと「Chrome DevTools」が表示される。これを使ってモバイルデバイスをエミュレートできる。

モバイルコンテンツが画面に入りきらなかったり、途中で切り落とされたりするように、レスポンシブでないサイトはコンテナからあふれ出てしまう可能性がある。その結果、使いやすさとアクセシビリティが損なわれてしまう。

比喩13レンダリングはサンドイッチを作るようなもの

テクニカルSEO担当者は、次の違いを理解する必要がある：

• 「生のコード」と「レンダリングされた状態」
• 「サーバーサイドレンダリング」と「クライアントサイドレンダリング」

「生のコード」は、サーバーから送信されるHTMLとCSSだ（ブラウザの「ソースを表示」で確認できる）。「レンダリングされた状態」は、ブラウザがページが完全に読み込んでユーザーやボットに表示しているときの内部的な状態だ（実際には「DOM」と呼ばれるが、その状態をHTMLとして表現することも可能）。

HTMLやCSSがパンやハムの素材で、それが調理されて組み合わさったサンドイッチが「レンダリングされた状態」だと思えばいい。

ただし、「サンドイッチ」がどこで作られるかは、検索エンジンのボットにとって重要な違いだ：

• サーバーサイドレンダリングは、サンドイッチを注文したときに、キッチンで作られ、完全に出来上がった状態で渡されるようなものだ。出てきたときには、すぐに食べられるようになっている。

• クライアントサイドレンダリングは、注文したサンドイッチが作られるのをカウンターで見るようなものだ。ブラウザがページを1つずつ組み立てていく。

ほとんどのユーザーにとって、サンドイッチが作られる過程はどうでもいい。すぐに出来上がって、おいしそうであれば、それでいいのだ。しかしSEO担当者にとって、この違いは重要だ。クライアントサイドレンダリングはJavaScriptを使い、ボットから見ると遅延やビジビリティの問題が生じることが多い（JavaScriptを家にたとえた比喩3の説明を参照してほしい）。

次の2つの図を見てほしい。

これは、あるECサイトの商品一覧ページ（PLP）なのだが、このサイトは「クライアントサイドレンダリング」で作られている。

• 左のウィンドウは、JavaScriptを無効にして表示したものだ。クライアントサイドレンダリングはJavaScriptがないと動作しないので、サーバーから渡された「ページ全体の構造」と「各商品の情報を入れるプレースホルダー」そか表示されていない。

• 右のウィンドウは、JavaScriptを有効化して同じページを表示したものだ。クライアントサイドレンダリングで正しくサンドイッチができあがっている。

こうした違いを理解しておくことで、「検索エンジンには自分のページをどのように見えているのか」をイメージできるようになる。

ウェブサイトのテンプレートページ

多くのウェブページは同じように見えるが、内容は異なる。私がテンプレートについて学んだとき、理解する助けになったたとえは、やはり「サンドイッチ」だった。

比喩14テンプレートはサンドイッチのようなもの

ほとんどのウェブサイトは、テンプレートを使って一貫性を確保している。テンプレートを使ったページには、次のようなものが含まれる：

• カテゴリページ
• 商品一覧ページ（PLP）
• 商品詳細ページ（PDP）
• 記事／ブログ投稿
• 店舗所在地／店舗ページ（該当する場合）

ウェブサイトを監査する際、テンプレートはどのように役立つか？ テンプレートは固定されたレイアウトに従い、データベースからコンテンツを抽出する。テンプレートは“パン”で、コンテンツは“具材”だ。

テンプレートを使うと、大規模なサイトでも構築や管理がしやすくなる。構造が決まれば、内容の異なる新しいページにも自動的に同じフォーマットが適用される。

テンプレートを使っているあるページに問題がある場合は、他のページにも問題がある可能性が高い。パン1斤のうち1枚にカビが生えたときのように、通常それはそのページだけの問題ではない。そのため、テンプレートの問題はサイトのセクション全体に影響を与える可能性がある。

比喩15ページのサンプル抽出はビュッフェで味見するようなもの

大規模なサイトを監査する際、すべてのページを確認する必要はない。サンドイッチ（テンプレート）が一貫していれば、数ページをサンプル抽出するだけで全体を把握できる。ビュッフェですべてのサンドイッチを食べなくても、中に何が入っているかはわかるのと同じだ。

サイト移行と品質保証

ウェブサイトの移行は、計画なしに進めれば、テクニカルSEOの中でも特にストレスの多い作業ともなる。私の場合は、これを「サッカークラブがホームスタジアムを変更するようなもの」と考えることで、何が重要なのかを理解する助けになった。

比喩16ウェブサイトの移行はスタジアムを移転するようなもの

英サッカークラブのエヴァートンFCがグディソンパークから新スタジアムに移転したとき、次のようなあらゆる準備を整える必要があった：

• 新しい座席
• シーズンチケットの振り替え
• きちんと機能する設備など

誰もサポーターに知らせなかったり、施設内の表示を更新しなかったりしていれば、大混乱になっていただろう。

ウェブサイトの移行も同じだ。古いURLをリダイレクトしなければ、ユーザーや検索ボットは新しいページにたどり着けない。シーズンチケット保有者は君にとって最も重要なURLのようなものであり、旧スタジアムと同じような場所の座席を求めている。

比喩17テスト環境はプレシーズンの親善試合のようなもの

エヴァートンFCは、安全を確保してすべてが想定通りにいくことを確認するために、新スタジアムでプレシーズンの親善試合を開催するなど、テストイベントを実施した。

ウェブサイトにも同じことが必要だ。ステージング環境はテストマッチにあたり、エラーの修正や変更のテストをして、検索エンジンやユーザーが本番サイトを目にする前に、すべてがスムーズに動作することを確認する必要がある。

URL正規化と重複コンテンツ

複数のURLで同じコンテンツや似たようなコンテンツが表示される場合は、どれがオリジナルまたは優先するべきコンテンツかを、どのように判断すればいいだろうか？

URL正規化タグがなければ、検索ボットにも判断できないため、私は正規化を『モナ・リザ』にたとえることにしている。

比喩18URL正規化タグは『モナ・リザ』のようなもの

レオナルド・ダ・ヴィンチは、『モナ・リザ』を複数描いたとされる。どれがオリジナルかは美術史家の間で議論があるが、最も有名なのはルーヴル美術館所蔵の作品だ。これがオリジナルかどうかに関係なく、有名だからこそ「正規版」になった。

URL正規化タグは次のように機能する。君のウェブサイトが頻繁に別のバージョン（非正規URL）にリンクしている場合、これらのリンクは正規化タグより優先されてしまう可能性があり、混乱した検索エンジンが非正規URLをオリジナルと見なしてしまうことになる。

ただし、検索エンジンは常にタグに従うわけではない。サイト内リンクのほとんどが別のバージョンを参照している場合は、そちらを主要バージョンと見なす可能性がある。これは、誰もがルーヴル美術館にある作品ではなく複製画にリンクするようなものだ。

グーグルに正しいバージョンをインデックス化してほしいなら、次のものすべてにおいてオリジナルを統一する必要がある：

• URL正規化タグ
• サイト内リンク
• シグナル

結論：テクニカルSEOを説明するには、身近なものにたとえよう

テクニカルSEOは、最初は圧倒されるかもしれないが、現実世界の例と結びつけることで理解しやすくなる。これらのたとえは、最初の段階で私の役に立ったので、みんなのSEO学習でも理解が明確になることを願っている。

探求心を失わず、好奇心を持ち続け、時が経てばもっと簡単に理解できるようになると信じよう。