【Stylebot】Googleの検索結果から「広告記事」を排除するCSS
この記事では、Googleの検索結果の上位に表示される「広告記事」を非表示にするCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」を使います。
本記事で紹介するCSSを使えば、Googleの検索結果の上位に表示される「広告」と書かれたプロモーション記事を抹消できます。
Googleで調べものをした時、単語にもよりますが、大体上位は広告（プロモーション）記事が表示されます。サイト運営者がGoogleにお金を払うことで、特別にトップページに表示してもらっているというアレです。
別に広告の記事でもいいんですが、僕みたいな「何か情報を知りたい人」にとっては、不便なんですよね。
大体、広告されている記事の中身は、薄っぺらく、最終的には自社のツール・コンテンツ販売につなげてきます。本当に有益な情報が埋もれてしまい、無駄な時間を過ごしてしまいます。広告記事でも有益な情報だったら歓迎ですが、中身ペラッペラなのはちょっと嫌です。
そこで、ウェブサイトにCSSを適用できる拡張機能「Stylebot（スタイルボット）」を使って、広告記事をピンポイントで排除してみます。CSSで自身の環境上、非表示にしているだけなので、誰にも迷惑をかけませんし、いつでもオンオフ切り替えできます。
本記事で紹介する「Stylebot」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
本記事は、広告ブロッカー（uBlock Originなど）を導入していない方向けです。広告ブロッカーを導入している場合は、普通にブロックしてくれると思います。
「ブロックしてくれない！」って方は、単純にGoogleの検索結果を除外設定にしている可能性があります。
「uBlock Origin（ユーブロック・オリジン）」の場合は、Googleの検索結果上で拡張機能をクリック→青色の電源アイコンになっているか確認します。灰色の場合は、オンにしましょう。
僕の場合、とある理由で、「www.google.com」上は広告ブロッカーをオフにしたいけど、検索結果の広告記事は削除したい…といったニッチな欲が出てきたため、本記事を書いています。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。Chromeウェブストアからインストールできます。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」でインストールできます。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/Googleの「広告記事」を非表示にする手順
「Google」で、適当な単語を検索します。試しに、広告記事が上位に表示されやすい「ブログ アフィリエイト」で検索してみます。「アフィリエイト」系は、特にひどいです。広告ブロッカーをすり抜けてくる記事もあるかもしれません。
Googleの場合、全員が全員同じ検索結果にならないと思いますが、大体同じような広告記事が上位に表示されると思います。僕の場合は、上から4番目は広告、5番目からようやく通常の記事という検索結果でした。
検索結果を表示できたら、インストールしたStylebotアイコン→「Stylebotを開く」をクリックします。
書き込むコードは、以下になっています。
/*「広告」記事非表示*/
div[aria-label="広告"] {
display: none !important;
}下記画像のようになればOKです。書き込めたら、右上の「×」をクリックします。
瞬時に反映されて、広告記事が全部消えます。別の単語で検索した時も同様に広告記事が消えます。
ライトテーマ利用時でも反映されます。
切り替えたい時は、Googleの検索結果上で、拡張機能アイコンをクリック→「www.google.com」をオフにします。これで、元通り表示されます。
感想
以上、「Google」の検索結果に表示される広告記事を非表示にするCSSについてでした。
「広告ブロッカーは導入したくない」or「導入しているけど、とある理由で、Google上ではオンにしたくない…」といった方、ぜひ試してみてください。
僕の場合、広告ブロッカーをオンにしていたら、Googleアドセンス（ブログの広告収入）の管理画面が、正常に表示されないんですよね。
かといって、ドメイン単位で除外設定にすると、アドセンスと検索結果は同じ「www.google.com」なので、検索結果で広告記事が表示されてしまいます。恐らく、ページ単位で指定すればいいんでしょうが、CSSの勉強も兼ねて、本記事の方法で挑戦してみました。