FirstLayout

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

はじめに

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 メタ タグがないことを確認しましょう。

参考rel=canonical 属性に関する 5 つのよくある間違い

ただ、低品質コンテンツを理由に、多くのサイトが検索結果ページに noindex を指定しています。Google の推奨に従えば、noindex を指定した検索結果ページで rel=canonical を指定できず、AMP エラーが出てしまいます。

そこで「特定のサイトを検索する」の出番です。検索結果ページが Google 検索であれば、noindex や rel=canonical の指定に悩む必要がありません。当然、AMP エラーに悩むこともありません。

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

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

参考自己参照のrel=canonicalタグはnoindexタグと併用できる?できない?

メニュー 閉じる 検索 記事を読む Facebook Twitter はてなブックマーク Pocket LINE ダウンロード 全ての記事 Web制作 便利ツール