Google Programmable SearchをAMPページで使用する方法

 ウェブサイトに強力な検索機能を付けられるGoogle Programmable Search(旧カスタム検索エンジン)ですが、そのままだとAMPページでは使えません。
 この記事では、AMPのサイトにProgrammable Searchの検索窓を埋め込む方法を紹介します。

Google Programmable Searchとは

 Googleの検索エンジンを利用して、特定のサイトのみ検索対象にしたり、検索窓をサイトに埋め込んだりできるサービスです。

 無料で使える上、収益化設定をオンにすれば、広告がクリックされた回数に応じて報酬が受け取れます。
(但し、以下で紹介する方法では2021年4月30日以降は収益分配の対象外となります。)

AMPページにProgrammable Searchを設置する方法

 カスタム検索エンジンの作成は、上記サイトの右上「使ってみる」から行えます。

 設定項目が多いですが、作成するだけなら名前と検索対象サイトを入力するだけなので簡単です。
 以下では、AMPページに設置する為に必要な部分だけ説明しますので、カスタマイズは必要に応じて行ってください。

デザインの設定

 実装の都合上、検索結果を検索窓と同画面で表示するタイプのデザインは使えません
(検索窓の下に大きな余白ができていても良い、という場合は「HTMLの実装」で実装する高さを大きく取れば可能ですが…。)

 Programmable Searchの左側のメニューの「デザイン」→「レイアウト」タブで、一番下の「Googleがホスト」を選択します。
 「検索結果の表示先」は「新しいウィンドウ」に設定してください。

 それが終わったら「カスタマイズ」タブにて、「全般」の背景色を、検索窓を埋め込む部分の背景色と同じにします。

 保存したらコードを取得します。

HTMLの実装

 Programmable Searchで発行される埋め込み用のタグはJavaScriptのため、そのままではAMPページに実装する事ができません。

 そこで、検索窓のスクリプトを記述したHTMLファイルを用意し、それをamp-iframeで読み込みます。
 まずは検索窓を設置する部分のコード。

<amp-iframe id="search" width="350" height="50" src="(検索窓用のファイルまでのパス)/search.html" sandbox="allow-scripts allow-popups" layout="responsive">
	<amp-img layout="fill" src="(プレースホルダ用の画像URL)" placeholder></amp-img>
</amp-iframe>

 別途head内でamp-iframeに必要なスクリプトを読み込んでください。
 プレースホルダ用の画像を準備しないのであれば、2行目は削除して構いません。

 検索窓用のファイル search.html には、Programmable Searchで発行されるスクリプトタグを記述します。
 以下の様になるはずです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script async src="https://cse.google.com/cse.js?cx=partner-pub-(あなたの検索エンジンのID)"></script>
<div class="gcse-searchbox-only"></div>
</body>
</html>

 注意点ですが、amp-iframeはファーストビューでの表示位置に対して制限があります。
 画面上の上の方に設置すると表示されない事がありますので、その場合はブラウザの開発者ツールでエラーが出ていないか確認してください。

設置例

 このページのすぐ下(関連記事の上あたり)にあります。

追記:収益化したいんだが?

 オーバーレイのデザインならamp-scriptでなんとかなるかもと思って試してみましたが、CORSの問題で上手くいきませんでした。

喜欢,分享或订阅,如果您喜欢这篇文章!

🔔 から登録すると、更新をプッシュ通知で受け取れます。

本网站使用cookie。
更多细节