当サイトではサイト内検索にGoogleカスタム検索を使用しています。
（スマホ画面で虫眼鏡アイコンを押すとワードプレスのサイト内検索になります）
サムネイルも表示できて便利なのですが、ときどき、意図しない画像が使われたりしますよね。
素直にアイキャッチ画像を拾ってくれればいいのに・・・。
調べたら、Googleのヘルプページであっさりやり方は見つかったのですが、実装するのには苦戦しました・・・。なので備忘録を残しておきます。
Googleカスタム検索ってなに？サイト内検索窓の設定方法
ネットで検索することを「ググる」という人は多い。
Googleは検索エンジンの代表格と言っても過言ではないでしょう。
そもそも、Googleカスタム検索とは・・・
Googleの検索技術を利用して、指定したサイト内のみの検索結果を表示してくれるのがGoogleカスタム検索です。
指定するサイトと言うのは任意のもので、複数指定もできます。
好みのサイトだけで“絞り込み検索”ができる、というものなんですが、これを自分自身が運営するサイトのみを指定することで、「サイト内検索」ができる、というわけですね。
サイト内検索窓の作り方
Googleカスタム検索を利用したサイト内検索窓の作り方は、すでに多くのサイトで詳しい解説があるので割愛します。
私が最もシンプルで分かりやすく解説されていると私が思ったのはこちらの記事。
細かい設定をしたい場合は「Googleカスタム検索 サイト内検索窓」でググって、自分が分かりやすいな、と感じるページを参考にしてください。
ログインしてオリジナルの検索窓を作ってみてください＾＾
Googleアカウントが必須なので、無い場合は新規作成してくださいね。
逆に複数アカウントがある場合は、サイト運営でGoogle アナリティクスで使用しているアカウントでログインしましょう。
コードを取得したら、カスタムHTMLにコピペして保存すればOKです。
サムネイルを指定する方法は、Googleカスタム検索のヘルプに情報あり
検索窓を設置できたら、適当なキーワードでサイト内を実際に検索してみてください。
サムネイル付きの検索結果が表示されると思います。
ワードプレスのアイキャッチ画像とGoogleカスタム検索のサムネイルは連動しない
ほとんどの場合は、アイキャッチ画像に設定している画像を拾ってくれます。
が、たまに記事中の挿入画像が表示されることがあります。
ただ、記事中画像ならまだいいんです。。。
なんと、当時サイドバーに設置していた画像広告（シルエットAC）をサムネイルにされてしまいました！(;’∀’)
ええぇーーー( ﾟДﾟ)こんなことってあるの・・・。
さすがにこの状況はまずいので、解決策を探りました。
Googleカスタム検索のヘルプページに記載されているサムネイル指定方法
ヘルプページにちゃんと解決方法は書いてありました。
方法は２つ。
サムネイルの指定 – カスタム検索 ヘルプ PageMap を使用する
PageMap のコードをページの
<head>セクションに追加してサムネイル画像を指定できます。このコンテンツはユーザーからは見えませんが、カスタム検索には有用な情報を提供できます。サムネイル画像のサムネイルDataObjectを作成するには次のようにします:<!-- <PageMap> <DataObject type="thumbnail"> <Attribute name="src" value="http://www.example.com/recipes/applepie/applepie.jpg"/> <Attribute name="width" value="100"/> <Attribute name="height" value="130"/> </DataObject> </PageMap> -->（PageMap を使用して、アクションやカスタム属性を追加することもできます。）
thumbnail メタ タグを使用する
thumbnailメタ タグをページの<head>セクションに追加して、サムネイル画像を指定することもできます。次に例を示します:<meta name="thumbnail" content="http://example/foo.jpg" />
なんのこっちゃ・・・って感じなのですが、やり方としては
PageMap（上の長いコード）またはthumbnailメタタグ（下の一行のコード）いずれかを、<head>内に入れればいいそうです。
私は、PageMapのコードを使いました。
サンプルコード4の行目に、画像URLが書かれています。
要は、このURL部分を、指定したい画像URLに書き換えてコピペすれば良い。
赤字の部分を書き換えます↓
<Attribute name=”src” value=”http://www.example.com/recipes/applepie/applepie.jpg“/>
画像URL部分のコードを書き換える
サムネイルの指定はできることが分かりました。
でも、問題発生です。ワードプレスのテーマの仕様上、ヘッダーは共通。
サンプルのように、ひとつの画像URLを書いて<head>～</head>内にコードを設置してしまうと、検索結果一覧に表示される全ての記事のサムネイルが、同じ画像になる。
・・・よね？多分。
サンプルコードの書き方は、あくまで個々のページに独立したヘッダーがあって、個別にコードを設置できる場合の例なのでしょう。
つまり、ワードプレスでアイキャッチ画像をGoogleカスタム検索のサムネイルに指定するには、サンプルコードのURL部分で、記事毎のアイキャッチ画像URLを取得する書き方にしなければならないんだと思います。
アイキャッチ画像のURLを取得する方法
調べてみたら、分かりやすいサイト様を見つけました。
PHP
<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>WordPressのアイキャッチ(サムネイル)の画像をURLで取得して表示する方法
このように書けば、アイキャッチ画像のURLを取得できるとのこと。
なので、サンプルコードの画像URL部分をこのコードに置き換えてみました。
header.phpの<head>～</head>の間にコードを挿入する
外観→テーマの編集→header.phpを開き、<head>～</head>の間の任意の場所にコードを貼り付けます。
最近のワードプレスのテーマは、直接phpファイルをいじらなくても＜head＞内にコードを挿入できる機能がついているものもあります。
プラグインでもそういう事ができるものがあります。
なるべく、テーマの機能やプラグインを利用してください。
もし、直接phpファイルをいじる場合は、必ず子テーマを用意してください。
実際にhead内に設置したコードがこちら。
<!-- <PageMap> <DataObject type="thumbnail"> <Attribute name="src" value="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>"/> <Attribute name="width" value="100"/> <Attribute name="height" value="130"/> </DataObject> </PageMap> -->
たぶん、他のテーマでもこのコードをそのままコピペで大丈夫だと思います。
ページのソースを見て画像URLが反映されているかを確認する
アイキャッチ画像のURLを呼び出せているか、ページのソースを見て確認してみました。
調べたいページで右クリック→「ページのソースを表示」で見ることができます。
画像URLがきちんとアイキャッチ画像のURLになっていました！
これで設定は完了です。
クローラーが回ってくるまで気長に待つ（最後に）
説明がずいぶんと長くなってしまいましたが、やることは最後にご紹介した「実際にhead内に設置したコード」を<head>～</head>内にコピペするだけです。
クローラーが回ってくるまで反映はされません。
私のサイトでは3日くらいかかりました。気長にお待ちください。
ただし！
これですべてのサムネイルがバチっとアイキャッチの画像になるとは限らないようですorz
コードの設置により、ほとんどのサムネイルは、アイキャッチに設定している画像が表示されるようになりました。
が、たまに違う画像が表示されていることも。
うーん、よく分わかりません・・・。
Google先生は気まぐれですね(ノД`)・゜・。解決策が分かったら追記します。
【補足1】サムネイルのサイズについて
ところで、コードの中に以下の記述がありますよね。
<Attribute name=”width” value=”100″/>
サムネイルの指定 – カスタム検索 ヘルプ
<Attribute name=”height” value=”130″/>
この数字を変更すると、サムネイルの幅と高さを調整できるはずなのですが・・・
これはどうも上手く機能しませんでした。
CSSをいじってみても反映されず。キャッシュを削除してページを更新しても変わらず。
Googleカスタム検索のヘルプフォーラム（海外版のみ）ものぞいてみたのですが、有益な情報は得られませんでした。
もし解決策が分かったら、やり方を追記したいと思います。
最後までお読みいただき、ありがとうございました。