はじめに
WordPress の AMP ページに、検索フォームを設置する方法の紹介です。
ただし、AMP に検索フォームを設置できるのは、SSL に対応したサイトのみです。
コンポーネントの読み込み
AMP で検索フォームを設置するには、amp-form を使用します。
まずは、<head></head> 内に script タグを追加し、amp-form を使えるようにします。
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>テンプレートの作成
次に、検索フォームのテンプレートを作成します。
WordPress の検索フォームは、searchform.php で作るのが一般的です。searchform.php に、このようなコードを追加します（HTML は一例です）。
<form method="get"
action="<?php echo home_url( '/' ); ?>"
target="_top">
<label>
<input type="search"
title="サイト内を検索"
placeholder="サイト内を検索"
value="<?php the_search_query(); ?>"
name="s" />
</label>
<input type="submit"
value="検索" />
</form>AMP 用の検索フォームで特徴的なのが、3 行目の target="_top" が必須なこと。それ以外は、通常ページの検索フォームと変わりません。
searchform.php だけで通常ページと AMP ページの検索フォームを用意する場合は、条件分岐を使えばいいはずです。
<form method="get"
action="<?php echo home_url( '/' ); ?>"
<?php if ( is_amp() ) {
echo 'target="_top"';
} ?>
>
<label>
<input type="search"
title="サイト内を検索"
placeholder="サイト内を検索"
value="<?php the_search_query(); ?>"
name="s" />
</label>
<input type="submit"
value="検索" />
</form>AMP ページの判定には、is_amp() を使っています。この条件分岐タグは、サイトで使っている条件分岐タグへの変更が必要です。
これで、AMP ページへの検索フォームの設置は完了です。
Google 検索の「特定のサイトを検索する」
Google 検索の手法の 1 つに「特定のサイトを検索する」があります。
Google の検索ページで、サイト URL またはドメインの前に site: を付ける方法です。
このブログであれば、site:https://firstlayout.net/、または site:firstlayout.net と Google で検索します。すると、Google の検索結果に表示されるのは、このブログのコンテンツのみ。
また、site:firstlayout.net AMP と検索すれば、このブログ内の AMP に関係のあるコンテンツが表示されます。
この「特定のサイトを検索する」は、サイトに設置する検索フォームに仕込めます。
実装するコードの一例は、下記のとおりです。実装後は、サイト内の検索フォームに語句を入力し検索すると Google 検索に移動します。
<form method="get"
action="//www.google.com/search"
target="_top">
<input type="search"
title="サイト内を検索"
placeholder="サイト内を検索"
name="q" />
<input name="as_sitesearch"
value="<?php echo home_url( '/' ); ?>"
type="hidden" />
<input type="submit"
value="検索" />
</form>target="_top" を削除すれば、通常ページでも実装できます。
2 行目の action で、Google 検索の URL を指定します。この指定で、サイト内の検索フォームから Google 検索に移動できます。
また、7 行目の name には、q を指定します。
さらに、8 行目の name="as_sitesearch" の指定により、「特定のサイトを検索する」が使えるようになります。
9 行目の value は、特定のサイトの指定です。サイトの URL、またはドメインを指定します（上記コードでは、サイト URL を指定しています）。
メリット・デメリット
「特定のサイトを検索する」のメリットとデメリットをいくつか挙げてみます。
メリットは、このようなものです。
- 言わずもがな Google 検索は優秀
- ユーザーは使い慣れている Google 検索を使える
- スマホでも使いやすい
- 通常ページにも AMP ページにも導入できる
- インデックスされていればコメント欄も検索対象になる
一方、デメリットは、このようなものです。
- インデックスされたコンテンツしか検索結果に表示されない
- 検索結果ページはカスタマイズができない
- 一旦サイトの外に出るため、ユーザーはそのまま帰ってこないかもしれない
- 通常の Google の検索結果内に検索ボックスが表示されている場合は、検索ボックスでサイト独自のサイト内検索システムが使えない
デメリットの最後の項目の「検索ボックス」の詳細は、サイトリンク検索ボックスは構造化データをマークアップしても表示できない。すでに表示できているサイトにのみ有効をご参考ください。
また、カノニカル AMP（AMP ページしかないサイト）では、rel=canonical に関する問題解決もメリットに含まれるかもしれません。AMP の要件の 1 つが、rel=canonical の指定です。指定がなければ、AMP エラーが出ます。
また、Google は、rel=canonical を向けたページに noindex を指定しないように推奨しています。
rel=canonical のリンク先ページに noindex メタ タグがないことを確認しましょう。
ただ、低品質コンテンツを理由に、多くのサイトが検索結果ページに noindex を指定しています。Google の推奨に従えば、noindex を指定した検索結果ページで rel=canonical を指定できず、AMP エラーが出てしまいます。
そこで「特定のサイトを検索する」の出番です。検索結果ページが Google 検索であれば、noindex や rel=canonical の指定に悩む必要がありません。当然、AMP エラーに悩むこともありません。
基本に忠実にサイトを制作する時に、「特定のサイトを検索する」は検索フォーム機能の選択肢の 1 つになり得ます。
尚、補足をすると、noindex ページに向けての自己参照の rel=canonical は問題にならないとのことです。