【Stylebot】Google「強調スニペット」を非表示にするCSS
強調スニペットとは、僕たちユーザーが「○○とは」、「〇〇について」といった単語を入力した時に、回答を強調して表示する機能です。そのサイトにある文章の一部が、自動的にGoogleによって抜粋されています。以下の2点が特徴です。
- 答えになるであろう場所が太字で表示
- 下に「強調スニペットについて、フィードバック」と文章が書かれている
例えば、「一眼レフカメラとは?」と検索すると、「写真を撮影する機械です。」といったように、すぐに答えを教えてくれます。
本来は、素早く答えを知れる便利な仕組みですが、人によっては邪魔と思うかもしれません。また、AI(Google)が抜粋しているので、本当にその情報が正しいかは保証できません。
「いっそのこと非表示にしてみるといいんじゃない!?」と思い、排除してみます。CSSで自身の環境上、非表示にしているだけなので、誰にも迷惑をかけませんし、いつでもオンオフを切り替えられます。
2022年7月8日に、全てのGoogleの不要項目を削除するまとめ記事を公開しました。
これまでは、1つずつ記事をチェックする必要がありましたが、上記記事を参考にすることで、「強調スニペット」、「関連する質問(旧:他の人はこちらも質問)」、「トップニュース」、「レシピ」、「マップ」、「動画」、「関連性の高い検索(他のキーワード)」、「フッターにある現在地」を、一気に全削除できます。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。
「Chromeに追加」でインストールできます。
![Stylebot - Chrome ウェブストア](https://www.naporitansushi.com/wp-content/uploads/2021/11/promotion-hide_03.png)
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
強調スニペットを排除する手順
「Google」で適当な単語を検索します。試しに、「IT」で検索してみます。強調スニペットが一番上に表示されました。
![Google「IT」の検索結果 強調スニペット](https://www.naporitansushi.com/wp-content/uploads/2022/04/emphasis-snippet-hide_01.png)
その状態で、インストールしたStylebotアイコン→「Stylebotを開く」をクリックします。
![「Stylebot」のスクリーンショット1](https://www.naporitansushi.com/wp-content/uploads/2022/07/google-tools-always-show-css_01.png)
書き込むコードは、以下になっています。
/*「強調スニペット」非表示*/
block-component:has(.g-blk),div#Odp5De {
display: none !important;
}
書き込めたら、右上の「×」をクリックします。
瞬時に反映されて、「強調スニペット」項目がごっそり消えます。どの単語で検索した時でも消えます。
![Google検索結果から、「強調スニペット」を非表示にした画像](https://www.naporitansushi.com/wp-content/uploads/2022/04/emphasis-snippet-hide_06.png)
ライトテーマ使用時も反映されます。
![ライトテーマ利用時のGoogle検索結果から、「強調スニペット」を非表示にした画像](https://www.naporitansushi.com/wp-content/uploads/2022/04/emphasis-snippet-hide_08.png)
強調スニペットは、①画像なしの文章のみ、②画像付きの横長サイズの2種類あります。上記CSSを使えば、画像付きの横長強調スニペットも非表示になります。試しに、「webマーケティング」で検索した画像を貼っておきます。
![強調スニペットを非表示にした前と後の比較画像 「webマーケティング」検索結果](https://www.naporitansushi.com/wp-content/uploads/2022/04/emphasis-snippet-hide_05.png)
「強調スニペット」で検索した時も表示されていましたが、CSS適用後は、非表示になっています。
![強調スニペットを非表示にした前と後の比較画像 「強調スニペット」検索結果](https://www.naporitansushi.com/wp-content/uploads/2022/04/emphasis-snippet-hide_07.png)
切り替えたい時は、Googleの検索結果上で、拡張機能アイコンをクリック→「www.google.com
」をオフにします。これで、元通り表示されます。
![「Stylebot」のスクリーンショット3](https://www.naporitansushi.com/wp-content/uploads/2022/04/search-results-adhide_07.png)
感想
以上、Googleの検索結果に表示される文章を強調して表示する「強調スニペット」項目を非表示にするCSSについてでした。
僕は、便利だと思うので非表示にしていません。(なんじゃいそりゃ)