広告なし!?Googleカスタム検索の設置方法デザインなど

2016年3月8日

Googleカスタム検索やアドセンスのカスタマイズ方法の覚書程度にまとめておきます。

Contents

1 Googleカスタム検索の設置方法デザインなど
2 アドセンスでレスポンシブ広告ユニット

Googleカスタム検索の設置方法デザインなど

現在、PCのサイドバーに検索フォームを設置しています。

WordPressの検索フォームもありますが、サーバー負荷と考えるとGoogleにお任せした方がいいかもしません。逆にWordPressの検索がいいのは非公開の記事も検索できることです。管理の都合でたまに役立ちますが、基本カスタム検索の方が優れているような気がします。

仕様は以下のとおり。

アドセンスもだす。
新しいページを開かずサイト内に検索結果をだす
アイキャッチも表示する
色をあわせる
ロゴなども表示できます。

Googleカスタム検索の検索結果をだすようにカスタマイズ

個人的には以前に作ったことがあったため、以下で変更を加えました。

まず、Wordpressに検索結果の固定記事を作る必要があります。固定記事にそれっぽいアイキャッチ画像も設定してください。

アドセンスにログイン > 検索向け広告 > 作った広告を選ぶ(作っていなかったら作る必要があります) > 検索結果 > 自社のウェブサイト > 検索結果を表示する URL:に固定記事のアドレスを入れる

色の変更は以下のとおりです

アドセンスにログイン > 検索向け広告 > 作った広告を選ぶ(作っていなかったら作る必要があります) > スタイル > スタイルを設定します > [ カスタマイズ ]のタブ

ロゴや色の設定を決められます。

最後にコードを取得しします。2つコードが表示されるため、サイドバーのウィジェットに検索ボックスのコードを入れ、固定記事に検索結果のコードをいれるとできあがります。

アドセンス経由じゃないと広告なし?

最初にカスタム検索を作成し、後からアドセンスにも関連づける方法もあります。

関連付けない場合も、広告は表示されます。

まず、こちらのアドレスにアクセス。

Googleカスタム検索でポップアップ回避

初期設定の[オーバーレイ]はいわゆるポップアップ表示のようです。[オーバーレイ]を[2ページ]に変更します。

検索エンジンの編集 > デザイン > 2ページ > 保存

Googleカスタム検索は終了?

そんなキーワードがでたので一瞬びっくりしたのですが、そんなことはありません。Google Site Searchという企業向け有料サービスがなくなりましたが、カスタム検索は普通に設置できるようです。有料サービスはGoogleのロゴなしで表示できることとサポートがつくぐらいだったけど、今はカスタム検索でもロゴも表示できますし別に設定するの簡単だし意味がなくなっただけでしょう。

Googleカスタムの代替えは広告なしのlunr.js

全文検索を導入する際に、Googleカスタムは簡単ですが、インデックス時間の問題もあります。

Javascriptなら、lunr.jsあたりが候補にあがってきますかね。有料ならelasticsearch、algoliaあたりでしょうか。

ebookbrain

【全文検索は?】firebase(firestore)の検索機能/elasticsearchやalgoliaもちょい調査した firebaseの検索に関する覚書です。 elasticsearchやalgoliaについてもちょっと調べてみました。 firestoreの検索(vuexの場合) vuexの場合。クエリー検索する場合は検索条件...

アドセンスでレスポンシブ広告ユニット

Adsenseでレスポンシブ広告ユニットを導入しました。わりと簡単ですし、一度、理解すると5分で導入できるため利用した方がいいなと思いました。

data-ad-format=”auto”が追加されているレスポンシブ広告ユニット

レスポンシブ広告ユニットは、通常のアドセンスのコードと比較すると、 data-ad-format=”auto”が追加されていますね。

Googleさんがもともと用意しているdata-ad-formatに使える値は、次のものです。

auto : 自動
rectangle : 長方形
horizontal : 横長
vertical : 縦長

しかし、今回はこちらの値を使うのではなく、より柔軟に対応できるstyleの指定より指定したサイズを表示します。

レスポンシブ広告ユニットのレクタングル大とレクタングル中の切り替え手順

PCやタブレットではレクタングル大(336px*280px)を表示してスマホではレクタングル中(300px*250px)を表示します。

0、まずはアドセンスの管理画面でレスポンシブ広告ユニットを作りましょう。こん時点ではサイズを気にする必要はありません。このコードをそのまま貼り付けても使えますが、値がautoになっているため横長のバナーが表示されてしまい思ったとおりのサイズになりません。

そのコードをメモ帳かなんかに貼り付けたら次にすすみましょう。

１、styleを追加。下記のpost_ad1はアドセンス広告を作成した際の任意の名前に書き換えてください。 min-widthは少しゆとりをもって、min-width:350pxでサイズが切り替わるようにしました。

<style>
.post_ad1 { width: 300px; height: 250px; }
@media (min-width:350px) { .post_ad1 { width: 336px; height: 280px; } }
</style>

下記のようにコードをアドセンスのコードの上に書きましょう。

</style>
<script アドセンスのコード

２、クラス名にpost_ad1(広告作成時の任意の名前)を追加

<ins class="adsbygoogle post_ad1"

３、元からあるdata-ad-format=”auto”の削除すればOKですね。

レスポンシブ広告ユニットの使い方(公式Google Adsenseカスタマイズマニュアル)

詳しくはアドセンスのヘルプに書いてあります。
https://support.google.com/adsense/answer/6307124?hl=ja&ref_topic=1307438#exact
https://support.google.com/adsense/answer/3543893?hl=ja&ref_topic=1307438
「非レスポンシブ型のサイトでも機能する」と書かれていたため、Wordpressのテンプレート・テーマに問わず導入を進めた方が管理しやすいですね。わかってしまえば5分のカスタマイズですし、PCとタブレット、スマホ・モバイルなどが一元管理できるため便利だと思います。
他にも方法はあるようですが、この手のものは公式のものに沿っておいた方が問題が発生しにくいため、この方法がよいのではないでしょうか。

レスポンシブ広告ユニットでレクタングルの中央合わせ

ちょっとだけ追記。他にもやり方はあるようですけど、中央あわせはこれでいけるようです。text-align: centerはおそらく効かないです。margin-left: auto; margin-right: auto;を追加しています。

<style>
.post_ad1 { width: 300px; height: 250px; margin-left: auto; margin-right: auto;}
@media (min-width:350px) { .post_ad1 { width: 336px; height: 280px; margin-left: auto; margin-right: auto;} }
</style>