Googleカスタム検索が原因でHTML5構文チェックツールで「Element gcse:search」エラーが出るときの解決方法

PR 2015/2/13 2017/12/10 WEB制作 0

HTML5構文チェックツールには、以下のようなものがあります。

今回は、これらのバリデーターツールで、以下のようなエラーが出たときの解消方法を紹介したいと思います。

Error: Element gcse:search not allowed as child of element div in this context. (Suppressing further errors from this subtree.)

photo by Christian Heilmann

エラーが出る原因

エラーが出ている箇所のソースは以下のようになっています。

<gcse:search></gcse:search>

gcse:searchというHTML要素は、HTML5的には許可されていないようです。

このHTMLタグが出る原因として、以下のようなGoogle カスタム検索で生成されたタグが考えられます。

タグの例としては、以下のようになります。

<script>
  (function() {
    var cx = 'XXXXXXXXXXXXXXXXXXX:vsajgjlzqge';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

エラーの解消方法

このエラーについて、検索してみると、GoogleフォーラムにてHTML5 Validator errors with gcse:searchというトピックを発見しました。

これによると、通常は以下のように生成されるタグ部分を、

<gcse:search></gcse:search>

以下で置換してやると、カスタム検索の機能は保ったまま、エラーも解消されます。

<div class="gcse-search"></div>

全体としてはこんな感じになります。

<script>
  (function() {
    var cx = 'XXXXXXXXXXXXXXXXXXX:vsajgjlzqge';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<div class="gcse-search"></div>

こうすることで、とりあえずgcse:searchエラーは潰すことができます。