WordPress の AMP ページに検索フォームを設置する方法

Akira

福岡在住の Web デザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

WordPress の AMP ページに、検索フォームを設置する方法の紹介です。

ただ、AMP に検索フォームを設置できるのは、SSL に対応したサイト(サイト URL が https から始まるサイト)のみです。

スクリプトの読み込み

AMP で検索フォームを設置するには、amp-form の使用が必須です。

最初にすることは、この amp-form のスクリプトの読み込みです。

<head></head> 内に、以下の script タグを追加します。

<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 エラーに悩むこともありません。

基本に忠実にサイトを制作する時に、「特定のサイトを検索する」は検索フォーム機能として有力な選択肢になり得ます。

尚、補足をすると、noindex ページに向けての自己参照の rel=canonical は問題にならないとのことです。

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。