Googleカスタム検索結果が表示されなくなった

2018-01-03

Googleカスタム検索結果が表示されなくなった

ご存じの方もいたかもしれませんが、いつ頃からかうちの「サイト内検索」（←）が使用できなくなってました。検索をしてもエラーメッセージを吐いて検索結果が表示されません。

どうやら、先日Googleのカスタム検索の仕様が変更になり、これまで使用していたHTML（V1コード）でのカスタム検索が使用できなくなったのが原因っぽいです。ネット上でも情報が少なくて特定に苦労しました…

結局標準のJavaScript形式のものに変更しました。導入についてはこちらのサイトが参考になりました。

sozoen.com

~~http://sozoen.com/yuichiro/wordpress-google-customsearch~~

http://sozoen.com/yuichiro/wordpress-google-customsearch

検索窓のデザインについては同じくこちらが参考になります。

sozoen.com

http://sozoen.com/yuichiro/google-custom-search

http://sozoen.com/yuichiro/google-custom-search

うちのサイトで使っているテンプレートだと綺麗に表示されませんでしたが、CSSを多少いじることで安定しました（以下のコードのハイライト行を追加）。

#gsc{
    width:100%;
    margin:0 auto;
    position:relative;
}
#gsc td {
    border: none;
}
#gsc .gsc-control-cse,
#gsc .gsc-control-cse-ja,
#gsc .gsib_a{
    margin:0 !important;
    padding:0 !important;
    font-size:12pt !important;
}
#gsc td.gsib_a{
    margin:0 !important;
    padding:0 !important;
}
/* テキスト入力フォームとボタンの位置 */
#gsc table.gsc-search-box td,
#gsc table.gsc-search-box input {
    vertical-align: top !important;
}
/* テキスト入力フォーム */
#gsc input[type="text"]{
    border: 1px solid #dddddd !important;
    height:25px !important;
    margin-top: 100px;
    font-size:10pt !important;
    ime-mode:active;
}
#gsc input[type="text"]:focus {
    border: 2px solid #b2e0eb !important;
    outline: 0;  /*safariの自動フォーカスを切る */
}

/* テキスト入力フォームの影を消す */
#gsc #gsc-iw-id1{&lt;
    border:none !important;
}
/* テキスト入力フォームの背景画像位置調整 */
#gsc #gs_tti0 input{
    background-position:5px 5px !important;
}
/* ボタンの色 */
#gsc input.gsc-search-button {
background: #000099 !important;
background: -ms-linear-gradient(top,  #008ee1 0%,#008ee1 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008ee1',endColorstr='#008ee1',GradientType=0 ); /* IE6-9 */
border: 1px solid #0000cc !important;
}
/* ボタンの位置調整と角丸消し */
#gsc .gsc-search-button{
    margin:0 0 0 -16px !important;
    border-radius:0px;
}
/* 入力時に出る「×」ボタンの位置調整 */
#gsc a{
    background-color:transparent;
    border:none;
}
/* 入力時に出る×ボタン -- Firefox位置調整 -- */
#gsc .gsib_b span{
        box-sizing: border-box;
   -moz-box-sizing: border-box;
        padding:2px 0 0 0;
}

これで完成…のはずが、今度は検索結果が表示されません。主な症状は以下の通り。

エラーメッセージも表示されず、検索結果のページは真っ白（空っぽ）になる
レイアウトを「2ページ」以外にすると正常に表示される
検索結果のページを何度か更新すると、正常に表示されることもある（確率的には2割程度）

正常に表示されることもあるということは、設定のやり方自体は間違っていないわけで、何が原因なのかかなり悩んだのですが、今度はこちらのサイトにヒントが。

Lancork

https://www.lancork.net/2014/07/google-custom-search-firefox-whiteout/

Googleカスタム検索のサイト内検索結果がFirefoxだけ表示されない時の対処法

Google カスタム検索を使えば自分で検索機能を作らなくてもサイト内検索を実装できます。しかし手順通りやったはずがFirefoxだけサイト内検索結果が表示されないトラブルが起きました。 ...

どうやらレイアウトを「2ページ」にした場合、同じページに、Googleが提供する「検索ボックスコード」と「検索結果コード」を表示すると、同じスクリプトが2回書かれることで干渉が起こり、表示がおかしくなるみたいです。

結局、重複するスクリプト部分を削り、

<script>
  (function() {
    var cx = '【検索ID】';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchbox-only></gcse:searchbox-only>
<gcse:searchresults-only></gcse:searchresults-only>

とすることで、きちんと検索結果のページに、検索ボックスと検索結果とが表示されるようになりました。

うまくカスタム検索が表示されない方は試してみてください。