【Stylebot】Google「強調スニペット」を非表示にするCSS

Stylebot&Stylus

Stylebotのアイコン

この記事では、Googleで検索した時に、一番上に表示される「強調スニペット」を非表示にするCSSについて書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。

【Stylebot】Google「強調スニペット」を非表示にするCSS

本記事で紹介するCSSを使えば、Googleの検索結果の一番上に表示される「強調スニペット」を消すことができます。

Googleで調べものをした時、単語によりますが、一番上に「強調スニペット」という項目が表示される場合があります。

強調スニペットとは、僕たちユーザーが「○○とは」、「〇〇について」といった単語を入力した時に、回答を強調して表示する機能です。そのサイトにある文章の一部が、自動的にGoogleによって抜粋されています。①答えになるであろう場所が太字で表示、②下に「強調スニペットについて、フィードバック」と文章が書かれていることが特徴です。

例えば、「一眼レフカメラとは?」と検索すると、「写真を撮影する機械です。」といったように、すぐに答えを教えてくれます。

本来は、素早く答えが知れる便利な仕組みですが、人によっては邪魔と思うかもしれません。また、AI(Google)が抜粋しているので、本当にその情報が正しいかは保証できません。

最近だと、iPhoneの横幅表記を間違えて紹介しているサイトが、強調スニペットで表示されるというのをTwitter経由で知りました。

「13 Pro Max 幅」で検索すると、強調スニペットで「iPhone 13 Pro Maxのサイズは、~~幅は71.5mm~~です。」と表示されますが、Apple公式サイトを見てみると、「78.1mm」となっています。

Google検索の強調スニペットは、間違った情報を抜粋することもある

「71.5mm」は、「iPhone 13 Pro」の幅だそうです。つまり、強調スニペットで表示されるサイトが間違えた情報を記載しているだけなんですが、Google側が認識できずに、そのまま一番上に表示させちゃっているという状況です。

このことから、必ずしも強調スニペットが正しい情報を表示しているとは限りません。

「なら、いっそのこと非表示にしてみるといいんじゃない!?」と思い、ウェブサイトにCSSを適用できる拡張機能Stylebotを使って、ピンポイントで排除してみます。CSSで自身の環境上非表示にしているだけなので、誰にも迷惑をかけませんし、いつでもオンオフ切り替えできます。

本記事で紹介するStylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

前提

この記事は、既にStylebotをインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能です。

まだインストールしていない方は、以下の記事を参考にしてみてください。

Firefoxをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeFirefox版もあります。

Firefoxをご利用の方は、以下のFirefoxアドオンストアからインストールできます。

「Firefoxへ追加」をクリックします。

Vivaldiブラウザを利用していて、サイドバーのウェブパネルにもCSSを適用したい場合は、「Stylus」がおすすめです。こちらは、ウェブパネル内にもCSSを適用できます。

CSS

Googleで適当な単語を検索します。

試しに、「IT」で検索してみます。見事に強調スニペットが一番上に表示されました。

Google「IT」の検索結果 強調スニペット

その状態で、インストールしたStylebotアイコン→Stylebotを開くをクリックします。

拡張機能ボタン Stylebotを開く

Firefoxで、Stylusを使っている方は、右上の拡張機能アイコン→「次のスタイルを書く」の「www.google.com」をクリックします。新しいタブでスタイルシートが表示されるので、書き込んでいきます。書き込めたら、忘れずに「保存」をクリックします。

書き込むコードは、以下になっています。Stylebot、Stylusどちらも一緒です。

/*強調スニペット非表示*/
block-component .g.mnr-c.JnwWd.g-blk,
.M8OgIe {
  display: none;
}

下記画像のようになればOKです。書き込めたら、右上の「×」をクリックします。

Stylebot 「強調スニペットを非表示にするCSS」を書き込んだ画面

瞬時に反映されて、「強調スニペット」項目がごっそり消えます。どの単語で検索した時でも消えます。

Google検索結果から、強調スニペットが非表示になる

ライトテーマ使用時も反映されます。

ライトモード時でも、本記事で紹介したCSSが使える
トップニュースは表示される

強調スニペットと同じく上位に表示される「トップニュース」は、これまで通り表示されます。

トップニュース項目はこれまで通り表示される

こちらも非表示にしたい場合は、下記記事を参考にしてみてください。

強調スニペットは、①画像なしの文章のみ、②画像付きの横長サイズの2種類あります。上記CSSを使えば、画像付きの横長強調スニペットも非表示になります。試しに、「webマーケティング」で検索した画像を貼っておきます。

強調スニペットを非表示にした前と後の比較画像 「webマーケティング」検索結果

強調スニペット」で検索した時も表示されていましたが、CSS適用後は、非表示になっています。

強調スニペットを非表示にした前と後の比較画像 「強調スニペット」検索結果

切り替えたい時は、Googleの検索結果上で、拡張機能アイコンをクリック→「www.google.com」をオフにします。これで、元通り表示されます。

Stylebot 「www.google.com」のオンオフ

感想

以上、Googleの検索結果に表示される文章を強調して表示する「強調スニペット」項目を非表示にするCSSについてでした。

僕は、便利だと思うので非表示にしていません。(なんじゃいそりゃ)

Posted by ナポリタン寿司