2020年12月 Archives

以前までGoogleのサイト内検索を利用していたのですが、新しくリニューアルされたためか表示がおかしくなっていたので、自分でカスタマイズしてみました。

表示を変更する際、HTMLフォームを利用してカスタマイズする方法が一般的かと思いますが、今回はJavascriptのタイプをCSSでカスタマイズしています。

このカスタマイズ方法についてですが、Chromeのデベロッパーツールなどでカスタム検索の要素IDなどを調べ、CSSで表示を調整するという方法です。

ただ、スタイルがHTMLタグに直で記述されているため、CSSに記載するだけではデフォルトの表示が上書きされないようです。そのため、わたしは「!important」を多用して強制的に上書きしてみましたが、この方法でうまくいきました。

あくまで参考までになりますが、わたしはCSSを以下のようにカスタマイズしてみました。

検索結果をサイト内で表示するか、それともGoogleにするかで1行目などのコードが違うかと思いますが、おおむね、以下のような感じでカスタマイズしていけばよいかもしれません。

.gsc-control-cse {padding: 0 !important;}
table.gsc-search-box {border-left: none !important;border-top: none !important;}
table#gs_id50 {border-left: none !important;border-top: none !important;}
table.gsc-search-box td {border-right: none !important;border-bottom: none !important;}
.gsc-search-button-v2 {border-color: #ccc !important;background-color: #666 !important;}

わたしがやったのは、ボーダーをなくし、検索ボタンを白黒にしてシンプルな形で表示しましたが、ほかにもボーダーを丸くしたりするとよいかもしれません。

新しいタイプのサイト内検索の方が、Googleのブランドロゴがかっこよかったため、最新のものを使用してカスタマイズした方が良いかと思います。ブランドロゴは必ず表示しなければならないため、デフォルトの「ENHANCED BY Google」の表示を消すのはNGになるはずです。

また、アドセンスのサイト内検索で収益化している場合、カスタマイズによって規約違反になってしまうのかは不明ですので、通常の一般的なカスタム検索で利用されることをおすすめします。

自サイトではレスポンシブウェブデザインやHTTPSには対応しているものの、新しい技術である「AMP化」や「構造化データ」には対応していないため、今年はこの二つに対応しようと取り組んでいます。

そこで、ざっくりテストしてみたのですが、AMP化についてはルーチン化された単純作業が多いため、比較的取り掛かりやすいのですが、構造化データはページごとに個別の対応が必要になるため、かなり時間がかかる印象を感じました。

そのため、まずはサイトをAMPに対応しつつ、AMPへの対応が終わったら構造化データ化に着手するのが最善と思います。

そもそも、このAMPと構造化データの違いについてですが、AMPについてはモバイル環境での高速化のための技術であり、一方の構造化データについてはセマンティックウェブの仕組みであるため、根本的には全く違う技術になります。

AMPはGoogleのサーバーを使用することに加え、ランディングページをキャッシュで表示させるため、モバイル環境でも高速なウェブ表示が可能になる技術です。

一方、構造化データについては、セマンティックにコンテンツの意味を伝えるものになります。

例えば、チーズケーキの記事を公開した際、それがチーズケーキのレシピを意味するものなのか、喫茶店でのメニューを意味するものか、あるいはお取り寄せグルメの商品を意味するものか、検索エンジンが判断できないわけではないとは思いますが、判断がしにくいです。

その際、「レシピ」の構造化データを取り入れると、明確に一義的に「レシピ」のコンテンツであることを訪問者に伝えることができるメリットがあります。

どちらかといえば、AMPよりも構造化データの方が重要度が高い気もしますが、最近ではどちらもマストSEOの必須の要素であるため、両方に対応しておくとよいでしょう。

また、実際に書く際の順序はどちらが先かについてですが、某大手サイトのHTMLソースを確認してみると、「構造化データのjson」→「amp-customのCSS」→「styleのボイラープレート」→「ampの定型文」の順序になっていました。

そのため、構造化データについてはAMPよりも前に記載しておくことをおすすめします。