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エラーは潰すことができます。
まとめ
この記事を書いた、2015年2月時点で、Googleカスタム検索でタグを生成すると、まだ<gcse:search></gcse:search>タグが出力されているようです。
構文のエラーが気になる場合は、手軽に修正できるので、試してみてください。