こんにちは、ゆんつです。
WordPressにはさまざまなウィジェットがありプロフィールやカテゴリーを簡単に表示してくれます。
そんなウィジェットの中で「検索」というウィジェットがあります。
このウィジェットは名前の通りキーワードからブログの記事を検索して、該当するキーワードに一致する記事を一覧表示してくれるウィジェットです。
ただ、この検索ウィジェット。
あまり融通が利きません。
例を挙げて説明します。
山口県には「チキンチキンごぼう」という名物料理があります。
僕のブログにはその「チキンチキンごぼう」に関する記事があるのですが、記事での表記通りの「チキンチキンごぼう」で検索すると記事が引っかかります。
ところがこの検索キーワードを「チキンチキンゴボウ」や「ちきんちきんゴボウ」といったように、言葉の意味は同じでも表記の仕方を少しでも変更すると途端に検索引っかからなくなります。
このようにWordPressの検索ウィジェットはキーワードの表記が一致したものしか引っかからないので検索のヒット率が悪いです。
多少表記が変わったり言葉足らずでも検索ヒットするようにするにはどうするか？
その場合、WordPressの検索ウィジェットに変えてGoogleの「カスタム検索」をサイトに導入することでサイト内の検索のヒット率をあげることができます。
今日はWordPressのサイトにGoogleのカスタム検索を導入する方法について書きたいと思います。
ちなみに僕が使用しているWordPressのテーマは「Cocoon」ですので、そのことを頭に置いて読んでいただけると幸いです。
Googleカスタム検索の導入方法
前提としてGoogleアカウントが必要となるので、持っていない場合はアカウントを取得してから作業をします。
まずはhttps://cse.google.co.jp/cse/allにアクセスします。
アクセスすると「Programmable Search」という画面になるので「追加」ボタンをクリック。
するとカスタマイズ検索の導入に必要な情報を入力するフォームが現れます。
入力する項目と内容は以下の通りです。
| 検索するサイト | カスタム検索を利用するブログのURL |
| 言語 | 日本語 |
| 検索エンジンの名前 | 自分の好きな名前 |
各項目への入力が完了したら、作成ボタンをクリックします。
検索エンジンの作成が完了しました。
コードを取得ボタンをクリックします。
「コードを取得」画面になりブログにカスタム検索を導入するのに必要なコードが描かれているのでコピーしておきます。
WordPressの管理画面にアクセスし、ウィジェットでカスタムHTMLを選択し検索ボックスを表示したい場所（サイドバーなど）に設置します。
カスタムHTMLの中身には
- タイトル → 自分の好きなタイトルをつける
- 内容 → 「コードを取得」画面でコピーしたコードを貼付け
します。
「save」ボタンをクリックして内容を保存し、完了をクリックしてカスタムHTMLを閉じます。
※モバイル環境の場合は「サイドバー」をタップしてみてください。
カスタムHTMLで「タイトル」に設定したものが見出しになり、検索ボックスがGoogleの検索ボックスに変わっています。
たったこれだけで、自分のブログ内をGoogleの検索エンジンで検索することができるようになりました！
WordPressの検索ウィジェットでは「ちきんちきんゴボウ」での検索結果は0件でした。
Googleのカスタム検索ではどう変化するでしょうか？
「ちきんちきんゴボウ」と入力してエンターキーを押下すると検索結果のウィンドウが開きます。
検索の結果は12件もヒット！
表記が完全に一致していなくても同じ意味のものをきちんと拾ってくれていました。
ただ、少しだけ欠点もあります。
ヒットする範囲が広くなる分、関連性が薄い記事もヒットしてしまうことがあります。
たとえば、「ちきんちきんゴボウ」の記事へのリンクを貼っている記事まで引っかかってしまいます。
でも検索結果の上位には関連性が高いものが表示されるので、使い勝手は悪くありません。
表記のちょっとした違いで記事が全く検索に引っかからないデメリットのほうがはるかに大きいと思うので、これくらいの欠点なら全然OKです。
これで検索ウィジェットの時よりも、検索の使い勝手が良くなりそうです。
検索結果をブログ内に表示する
カスタムHTMLにカスタム検索のコードを貼っただけの状態ではカスタム検索の結果はブログの上に重なるような感じで表示されます。
これを、検索ウィジェットで検索したときのように自分のサイト中で表示させることもできます。
https://cse.google.co.jp/cse/allにアクセスします。
検索エンジン名を選択してから「デザイン」をクリックし、レイアウトから「2ページ」を選択して「保存してコードを取得ボタン」をクリック。
「検索ボックスコードの取得」画面になり、検索ボックス用のコードが表示されるので、このコードをコピーしします。
WordPress管理画面でカスタムHTMLのウィジェットを選択して好きな場所に設置します。
「タイトル」を入力し「検索ボックスコード」でコピーしたコードを貼り付けて「save」ボタンをクリックし「完了」をクリックしてカスタムHTMLを閉じます。
再度カスタム検索の編集画面に戻ります。
「次へ：検索結果コードの取得」ボタンをクリック。
「検索結果コードの取得」画面になるので検索結果コードをコピーします。
WordPressの管理画面に戻ります。
「固定ページ」→「新規追加」をクリックします。
固定ページのエディタ画面になるので、検索結果が表示されるページに表示されるタイトルをつけ、カスタムHTMLブロックを挿入して先ほどコピーした検索結果コードを貼り付けます。
そしてスラッグは「search-result」として「公開」ボタンをクリックして公開しておきます。
Googleカスタム検索の編集画面に戻ります。
「検索結果コードの取得」画面に「検索結果の詳細」というボタンがあるのでクリック。
すると「検索結果の詳細を指定：」というダイアログが開きます。
ここに先ほど作成した固定ページのURL（例：https://ドメイン/search-results/）をコピペして「保存」ボタンをクリック。
以上でサイト内に検索結果を表示するための作業は完了です。
テストの前にいったんF5キーを押してブログの表示を更新しておきます。
そして検索ボックスにキーワードを入れて検索してみると以下のような感じで自分のブログ内に検索結果が表示されるようになりました！
あとは、設定の変更やCSSのカスタマイズなどで不要な部分を非表示にしたりして検索結果画面のデザインを整えればいいだけです。
検索ボックスの見た目を変える
検索ボックスの線の色や背景色、検索ボタンの色などはGoogleカスタム検索の設定画面にあるページのテーマやカスタマイズで変更することができるので、自分好みに設定するといいと思います。
検索結果を収益化する
カスタム検索を設定したアカウントが「Google Adsens」の承認を受けているアカウントの場合。
設定によりカスタム検索の検索結果に広告を表示させることがで、その広告がクリックされることにより収益を得ることもできるようです。
設定方法はGoogleカスタム検索の設定画面から「設定」→「広告」をクリック。
検索エンジンの収益化という項目がデフォルトではオフになっているので、これをオンにします。
しばらく経過すると検索結果に広告が表示されるようになり、その広告がクリックされることで収益を得ることができるみたいです。
手軽にGoogle検索が使えます
以上、見てきたように簡単な設定をしてコードをウィジェットに貼り付けるだけでブログにGoogle検索を導入することができます。
これだけでGoogleの検索エンジンを使ってサイト内を検索することができるようになります。
WordPressの検索ウィジェットよりも柔軟に検索してくれるので、「ひらがな」のものを「カタカナ」、または「カタカナ」のものを「ひらがな
で検索してもヒットするようになります。
というわけで、もしWordPressの検索ウィジェットに物足りないものを感じている場合。
Googleカスタム検索の導入を試してみることをお勧めします。
ウィジェットにコピペするだけなので、合わなければウィジェットを外して元に戻せばいいだけですから気軽に試してみるといいと思います。
それでは、またー。
コメント