【Stylebot】Googleの検索結果から「広告記事」を排除するCSS

2022年4月19日Stylebot&Stylus

Stylebotのアイコン

この記事では、Googleの検索結果の上位に表示される「広告記事」を非表示にするCSSについて書きます。

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

【Stylebot】Googleの検索結果から「広告記事」を排除するCSS

本記事で紹介するCSSを使えば、Googleの検索結果の上位に表示される「広告」と書かれたプロモーション記事を抹消できます。

Googleで調べものをした時、単語にもよりますが、大体上位は広告(プロモーション)記事が表示されます。サイト運営者がGoogleにお金を払うことで、特別にトップページに表示してもらっているというアレです。

別に広告の記事でもいいんですが、僕みたいな「何か情報を知りたい人」にとっては、かなり不便なんですよね。

大体、広告されている記事の中身は、薄っぺらく、最終的には自社のツール・コンテンツ販売につなげてきます。本当に有益な情報が埋もれてしまい、無駄な時間を過ごしてしまいます。広告記事でも有益な情報だったら、許せるんですが、中身ペラッペラなのは許せません。

Googleの検索結果の上位は、広告記事であふれている

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

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

ポイント

本記事は、広告ブロッカー(uBlock Originなど)を導入していない方向けです。広告ブロッカーを導入している場合は、普通にブロックしてくれると思います。

「ブロックしてくれない!」って方は、単純にGoogleの検索結果を除外設定にしている可能性があります。

uBlock Originの場合は、Googleの検索結果上で拡張機能をクリック→青色の電源アイコンになっているか確認します。灰色の場合は、オンにしましょう。

uBlock Origin 「www.google.com」で有効になっているかの確認画面

僕の場合、とある理由で、「www.google.com」上は広告ブロッカーをオフにしたいけど、検索結果の広告記事は削除したい…といったニッチな欲が出てきたため、本記事を書いています。

インストール方法

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

Chromeウェブストアからインストールできます。

Firefox・Edgeをご利用の場合

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

「Chromeに追加」でインストールできます。

Stylebot - Chrome ウェブストア

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

CSS

Googleで適当な単語を検索します。試しに、広告記事が上位に表示されやすい「ブログ アフィリエイト」で検索してみます。「アフィリエイト」系は、特にひどいです。広告ブロッカーをすり抜けてくる記事もあるかもしれません。

Googleの場合、全員が全員同じ検索結果にならないと思いますが、大体同じような広告記事が上位に表示されると思います。僕の場合は、上から4番目は広告、5番目からようやく通常の記事という検索結果でした。

Googleで「ブログ アフィリエイト」と検索してみた画像

検索結果を表示できたら、インストールしたStylebotアイコン→「Stylebotを開く」をクリックします。

Stylebot Stylebotを開く

書き込むコードは、以下になっています。

/*「広告」記事非表示*/
div[aria-label="広告"] {
  display: none !important;
}

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

Stylebot 「Google検索の広告記事非表示」CSSを書き込んだ画面

瞬時に反映されて、広告記事が全部消えます。別の単語で検索した時も同様に広告記事が消えます。

Google検索結果から、広告記事(プロモーション)が消える

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

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

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

感想

以上、Googleの検索結果に表示される広告記事を非表示にするCSSについてでした。

「広告ブロッカーは導入したくない」or「導入しているけど、とある理由で、Google上ではオンにしたくない…」といった方、ぜひ試してみてください。

僕の場合、広告ブロッカーをオンにしていたら、Googleアドセンス(ブログの広告収入)の管理画面が、正常に表示されないんですよね。

かといって、ドメイン単位で除外設定にすると、アドセンスと検索結果は同じ「www.google.com」なので、検索結果で広告記事が表示されてしまいます。恐らく、ページ単位で指定すればいいんでしょうが、CSSの勉強も兼ねて、本記事の方法で挑戦してみました。

Posted by ナポリタン寿司