SWELLの広告タグはGoogleからペナルティーを食らう可能性がある?!

※当サイトにはプロモーションが含まれています。

ワードプレス（WordPress）テーマのSWELL（スウェル）には、アフィリエイトなどがしやすいように「広告タグ」という便利な機能があります。

ただ、この広告タグ機能ですが、以前から少し気になっている点がありました。

それは、ホバー（hover）できる範囲が必要以上に広いということです（※上が広告ボックスの枠なし、下が枠あり）。

SWELL｜広告タグの範囲

上記の画像ではわかりやすいように、ホバー（hover）時に、色が付くようにしました。

にゃのらいと

この状態の何が問題なのかにゃ？

この問題点は、ユーザーが意図しない“誤クリック”を誘発する可能性があることです。

この点について、もう少し詳しく説明していきます。

SWELLの広告タグの「バナー型」がダメな点

SWELLの広告タグには、テキスト型・バナー型・アフィリエイト型・Amazon型・ランキング型の４種類の広告タイプがあります。

この中で、ホバー（hover）できる範囲が必要以上に広くなってしまうのが、バナー型です。

たとえば、アフィリエイトバナーでよく使用される“300×250px”の画像をバナー型の広告タグで設置すると、実際の<a>タグのホバー範囲は次のようになります。

SWELL｜広告タグの範囲

にゃのらいと

452pxが余分にリンクの範囲が広いにゃ。

これが問題なのは、ユーザーが予想しない挙動をさせるデザイン（Deceptive design）は、Google の評価者向けガイドラインで「最低品質（Lowest）」に分類されると明記されている点です。

つまり、この広告タグ機能を使って全ページに“誤クリックを誘発するようなバナー”を設置してしまうと、Googleからペナルティを受ける可能性があるということです。

にゃテック

ペナルティーを受ければ、検索圏外に飛ばされる可能性があるにゃ。

SWELLの広告タグ、バナー型を使うと画像幅が広くなる原因は、以下の記述が原因だと思われます。

.p-adBox__img img {
display: block;
margin: 0 auto;
}

display: block;を指定しているため、画像がブロック要素として扱われ、そのブロック全体が画像の領域となってしまいます。

そのため、以下のCSSを「追加CSS」に記述します。

.p-adBox__img img {
display: inline-block;
}

このコードを追加すると、画像がインラインブロック要素として扱われるため、<a>タグのホバー範囲も画像のサイズに合わせて調整されます。

ただし注意点として、この変更がSWELLの既存スタイルにどの程度影響するかは、まだ十分に検証できていないため、その点はご容赦ください。

にゃテック

また、既存の設定で調整できる方法があったらスミマセン。

現在のワードプレステーマにCSSを追加したい場合、左メニューにある、

外観 > カスタマイズ

を選択します。

「追加CSS」を選択します。

追加したいCSSを記述します（コピペして貼り付けます）。

「公開」ボタンを押して保存すれば完了です。

なお、追加CSSに記載する際に、ブラウザ上で全角から半角に変換すると、エンコーディング（文字コード）の関係で、不具合が発生することがあります。

その為、編集する時は、メモ帳などに貼り付けたものを編集をしてからペーストするようにしましょう。

なお、ブラウザにキャッシュが残っていると、前のデザイン（CSS）が表示されたり、デザインが崩れて表示される事があります。

その際は、強制リロード（ハードリフレッシュ）をしてみてください。

各ブラウザごとの、強制リロードの方法は次の通りです。