AMP で Google 検索の「特定のサイトを検索する」を導入

サイトの検索フォームに「特定のサイトを検索する」を仕込む方法

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

このサイトは、2019 年の春頃にリニューアルをする予定。

リニューアル後は、カノニカル AMP( AMP ページしかないサイト)になります。

そのための WordPress テーマを作っているのですが、1 つ問題を抱えました。

それは、検索結果ページで AMP エラーが出ること。

その解決方法として、検索フォームに Google 検索の「特定のサイトを検索する」の導入を検討しています。

検索フォームの作り方、なぜ AMP エラーが出たのかなどを書いてみたいと思います。

尚、通常ページでも「特定のサイトを検索する」は導入できます。

特定のサイトを検索するとは?

Google 検索の手法の 1 つに「特定のサイトを検索する」というものがあります。

Google の検索ページで、サイト URL またはドメインの前に site: を付ける方法です。

このブログであれば、site:https://firstlayout.net/、または site:firstlayout.net と Google で検索します。

すると、Google の検索結果に表示されるのは、このブログのコンテンツのみ。

site:firstlayout.net AMP と検索すると、このブログ内の AMP に関係のあるコンテンツが表示されます。

この「特定のサイトを検索する」は、サイトに設置する検索フォームに仕込むことが可能。

サイト内の検索フォームにキーワードを入力し検索すると、Google 検索に移動します。

テスト環境では十分なテストができないので、すでにこのサイトの検索フォームに仕込みました。

通常ページでも、AMP ページでも、サイト上部にある検索フォームで実際の使用感をお試しいただけます。

このページの AMP ページには、下記の URL から移動できます。

https://firstlayout.net/introduce-search-specific-sites/?amp=1

検索フォームの作り方

AMP ページで検索フォームに Google の「特定のサイトを検索する」を導入するには、1 つ条件があります。

それは HTTPS サイトであること。

これは、AMP でフォームを設置するための必須条件です。

HTTPS サイトであれば、2 ステップで「特定のサイトを検索する」を導入できます。

amp-form スクリプトの読み込み

AMP ページへの検索フォームの設置には、amp-form を使います。

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

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

検索フォームの HTML

次に、検索フォームを作成します。

下記の HTML は一例です。サイトに合わせてご変更ください。

<form action="//www.google.com/search" method="get" target="_top">
  <input name="q" type="search" placeholder="サイト内を検索" aria-label="サイト内を検索">
  <input name="as_sitesearch" value="##サイトのドメインを入力##" type="hidden">
  <button type="submit" aria-label="検索"></button>
</form>

1 行ずつご説明します。

<form action="//www.google.com/search" method="get" target="_top">

1 行目の form タグの action で、Google 検索の URL を指定します。この指定のおかげで、サイト内の検索フォームから Google 検索に移動できます。

methodtarget は AMP のルールに準じた指定なので、変更は必要ありません。

通常ページに導入する場合には、target="_top" を削除します。

<input name="q" type="search" placeholder="サイト内を検索" aria-label="サイト内を検索">

2 行目は、検索フォームの入力欄です。

name には、q を指定します。

placeholderaria-label は、サイトに合わせて変更します。

<input name="as_sitesearch" value="##サイトのドメインを入力##" type="hidden">

3 行目は、「特定のサイトを検索する」の指定です。

name="as_sitesearch" の指定により、「特定のサイトを検索する」が使えるようになります。

また、value は、特定のサイトの指定です。サイトの URL、またはドメインを指定します。

このブログであれば、##サイトのドメインを入力## の部分を https://firstlayout.net/、または firstlayout.net に変更します。私であれば、後者のドメインで指定します。

<button type="submit" aria-label="検索"></button>

4 行目は、検索フォームの送信ボタンです。

aria-label は、サイトに合わせて変更します。

導入理由は AMP エラーの回避

カノニカル AMP( AMP ページしかないサイト)で「特定のサイトを検索する」の導入を検討している理由は、検索結果ページの AMP エラーを回避するためです。

AMP エラーが出たのは、検索結果ページを noindex にしたことから始まります。

検索結果ページは低品質コンテンツなので、noindex にしました。多くのサイトでも noindex にされているはず。

この noindex のページに向けては、rel=canonical を指定しないように Google は推奨しています。

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

rel=canonical のリンク先ページに noindex メタ タグがないことを確認しましょう。

ただ、これには補足があり、noindex ページに向けての自己参照の rel=canonical は問題にならないとのこと。

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

私は基本に忠実であるのが好きなので、rel=canonical を noindex の検索結果ページに向けたくありませんでした。

また、rel=canonical を向けるに適した他のページはありません。

この 2 つの理由から、検索結果ページに rel=canonical 自体を書きませんでした。

しかし、これが AMP エラーを招きます。

なぜなら rel=canonical の指定は、AMP の要件の 1 つだから。

つまり、rel=canonical がないページは、もれなく AMP エラーが出てしまいます。

ここで私の頭に浮かんだのは、2 つの選択肢。

  • 自己参照が問題ないのなら rel=canonical を指定する
  • noindex にするようなページの AMP エラーは無視する

どちらでもよかったのですが、どちらも何かスッキリしない。

「うーん…」と悩んでいた時ひらめいたのが、「特定のサイトを検索する」でした。

これを使えば、サイト内に検索結果ページがなくなる!

サイト内に検索結果ページがなければ、noindex や rel=canonical の指定に悩む必要がない。当然、AMP エラーに悩むこともない。

まだどの方法で検索フォームを設置するかは決めていませんが、今のところ「特定のサイトを検索する」が最有力です。

ちなみに、AMP 公式サイトの検索フォームは、「特定のサイトを検索する」を使っています(ただし、検索フォームは PC でのみ表示)。

メリット・デメリット

「特定のサイトを検索する」のメリットとデメリットは、どのようなものがあるでしょうか。

いくつか挙げてみます。

メリット

  • 言わずもがな Google 検索は優秀
  • ユーザーは使い慣れている Google 検索を使える
  • Google カスタム検索エンジンとは異なり、スマホでも使いやすい
  • 通常ページにも AMP ページにも導入できる

デメリット

  • インデックスされたコンテンツしか検索結果に表示されない
  • 検索結果ページはカスタマイズができない
  • 一旦サイトの外に出るので、ユーザーはそのまま帰ってこないかもしれない
  • 通常の Google の検索結果内に検索ボックスが表示されている場合には、検索ボックスでサイト独自のサイト内検索システムが使えない

企業や店舗、サービスなどのサイトでは、「特定のサイトを検索する」は導入しづらいと思います。

良くも悪くも検索結果ページは Google の色が出るので、サイトの他のページとは明らかに異なってしまうためです。

一方、個人ブログのようなサイトでは、「特定のサイトを検索する」は有効な選択肢です。

使いやすい検索フォームを作るには、けっこうな手間がかかります。

その手間を一切かけずに優秀な検索機能を導入し、ユーザーの利便性を向上できます。


このサイトに導入後に、自分で検索を試しました。

コメント欄まで検索対象になるのはいいね!

WordPress デフォルトの検索フォームは、決して優秀だとは言えません。

AMP エラーに関係なく、使いやすく優秀な「特定のサイトを検索する」が気に入りました。