Googleの「Read more」スニペットでCTR爆上げ！開発者が今すぐ見直すべき3つの実装ポイント

Google検索結果に現れる「Read more」スニペットとは？

皆さん、WebサイトのSEO対策、日々お疲れ様です！Google検索結果に表示されるスニペット、実は進化を続けているってご存知でしたか？今回ご紹介するのは、最近Googleがベストプラクティスを公開した「Read more」リンク付きスニペットについてです。

この「Read more」スニペットは、検索結果に表示されるサイトの説明文（ディスクリプション）の末尾などに、特定のセクションへのディープリンクとして表示されるものです。ユーザーは検索結果から直接、コンテンツの関連する部分へジャンプできるようになります。これにより、ユーザー体験が向上するだけでなく、サイトへのクリック率（CTR）を大きく引き上げる可能性を秘めているんです。

Googleは、この「Read more」リンクが表示されやすくなるための3つのベストプラクティスを正式に発表しました。Web制作者や開発者として、これは見逃せない情報ですよね。具体的な実装のヒントと合わせて見ていきましょう！

何ができるのか？：ユーザーとGoogleに優しいサイトでCTRを向上

この「Read more」スニペットがあなたのサイトで表示されるようになれば、以下のようなメリットが期待できます。

• クリック率（CTR）の向上: ユーザーが検索意図に合致する情報へダイレクトにアクセスできるため、クリックされやすくなります。
• ユーザーエンゲージメントの向上: 目的の情報にすぐたどり着けることで、ユーザーはサイトに好感を持ち、滞在時間の増加や回遊につながる可能性があります。
• SEO効果の強化: CTRの向上は、間接的にGoogleからの評価を高め、検索ランキングにも良い影響を与える可能性があります。

つまり、ユーザーの利便性を追求したサイト設計が、そのままGoogleからの評価とサイト流入の増加に直結する、というわけです。まさに「ユーザーファースト」がSEOの基本であることを再認識させてくれますね。

どう使えるのか？：開発者が意識すべき3つの実装ポイント

Googleが提示したベストプラクティスは、Webサイトの構造やJavaScriptの挙動に関する、私たち開発者・Web制作者が直接手を入れるべき具体的な内容です。それぞれ詳しく見ていきましょう。

1. コンテンツは「すぐに人間が閲覧できる状態」に！

Googleが最も重視しているのは、ユーザーがページにアクセスした際に、コンテンツがすぐに視認できる状態であることです。これは、私たちがよく使うUI/UXのテクニックに注意が必要だ、ということを示唆しています。

• アコーディオンやタブ形式のセクション: コンテンツを整理するために便利ですが、初期状態で隠されている情報は「すぐに閲覧できる」とは見なされない可能性があります。重要な情報は初期状態で展開しておくか、アコーディオン内に表示されるタイトルを工夫して、ユーザーがクリックせずとも内容が推測できるように配慮しましょう。
• 遅延読み込み（Lazy Load）: 画像や動画、あるいは特定のセクションのコンテンツを遅延読み込みさせる場合、ユーザーがスクロールするまで表示されないコンテンツは、このベストプラクティスの意図に反する可能性があります。特に、スニペットの対象となりそうなメインコンテンツは、初期ロードで表示されるように設計することが重要です。

ユーザーがページを開いた瞬間に、最も知りたいであろう情報が目に入るようにすることが肝心です。

2. ページ読み込み時のスクロール位置をJavaScriptで制御しない

特定のアンカーリンクへの遷移や、ユーザーの過去の閲覧位置を記憶してスクロールさせる、といった実装はよくありますよね。しかし、Googleはページ読み込み時にJavaScriptを使ってユーザーのスクロール位置を強制的に変更するのを避けるよう求めています。

• 強制的なページトップへのスクロール: ページを読み込んだ際に、常に最上部へスクロールさせるようなJavaScriptは、ディープリンクで特定のセクションに飛んできたユーザーの意図を無視してしまいます。これにより、ユーザー体験を損ねるだけでなく、Googleがディープリンク先を正確に認識しにくくなる可能性があります。
• SPA（シングルページアプリケーション）でのルーティング: SPAで特定のパスにアクセスした際に、JavaScriptでスクロール位置を操作する場合は注意が必要です。ユーザーが特定のコンテンツへのディープリンクを辿ってきた場合、その位置へ正確にスクロールされるように実装し、不必要なスクロールリセットは避けるべきです。

ユーザーが意図した場所にスムーズにアクセスできるよう、JavaScriptによるスクロール制御は慎重に行いましょう。

3. URLのハッシュフラグメントを削除しない

History API（pushStateやreplaceState）やwindow.location.hashを使ってURLを操作する際に、URLの末尾にあるハッシュフラグメント（#section-idのような部分）を誤って削除してしまうと、ディープリンクが機能しなくなります。これは、特にSPAやページ内アンカーリンクを多用するサイトで発生しやすい問題です。

• SPAのルーティング設計: SPAでURLのハッシュをルーティングに利用している場合、ページ遷移時にハッシュが失われないように注意深く実装する必要があります。また、クリーンなURL（ハッシュなし）を使用する場合でも、内部的にアンカーリンクの機能を提供するためにハッシュを動的に管理する際は、Googleが認識できる形で維持することが重要です。
• ページ内リンクの実装: <a href=\"#section-id\">のようなページ内リンクをクリックした際に、JavaScriptでURLのハッシュを削除するような処理は避けてください。ハッシュフラグメントは、特定のセクションへの「しおり」として機能するため、これが失われるとGoogleもディープリンクとして認識できなくなります。

URLのハッシュフラグメントは、ディープリンクの重要な要素です。これを壊さないように、URL操作を行う際は細心の注意を払いましょう。

試すならどこから始める？：既存サイトの監査と新規開発への適用

これらのベストプラクティスをあなたのサイトに適用するには、まず以下のステップから始めてみましょう。

• 既存サイトの監査: 現在運用しているWebサイトが上記の3つのポイントに違反していないか、まずは手動で、あるいはツールを使って確認してみましょう。特に、JavaScriptで動的にコンテンツを生成・表示している部分や、SPAでルーティングを行っている部分に注目してください。
• 新規開発時の設計への組み込み: これから新しいWebサイトや機能を開発する際は、これらのベストプラクティスを設計段階から意識し、実装ルールとして組み込むことを強く推奨します。後から修正するよりも、初期段階で考慮する方がはるかに効率的です。
• Google Search Consoleでの効果測定: 変更を加えてから数週間後、Google Search Consoleでサイトの検索パフォーマンス、特にCTRの変化をモニタリングしてみましょう。ディープリンクが表示されるようになったかどうかも確認できます。

Googleの「Read more」スニペットは、ユーザーと検索エンジンの両方にとってメリットの大きい機能です。Web制作者・開発者として、これらのベストプラクティスを理解し、適切にサイトに適用することで、より多くのユーザーをサイトに呼び込み、エンゲージメントを高めることができるはずです。ぜひ、今日からあなたのサイトを見直してみてください！