Googleカスタム検索でサムネイルをWordPressのアイキャッチ画像に指定する方法

当サイトではサイト内検索にGoogleカスタム検索を使用しています。

サムネイルも表示できて便利なのですが、時折、意図しない画像が使われたりしますよね。素直にアイキャッチ画像を拾ってくれればいいのに・・・。

調べたら、Googleのヘルプページであっさりやり方は見つかったのですが、実装するのには苦戦しました・・・。なので備忘録を残しておきます。

Twitter Facebook Google+ B! Hatena LINE Pocket

1 Googleカスタム検索ってなに？サイト内検索窓を作ってみよう
2 サムネイルを指定する方法は、Googleカスタム検索ヘルプによると？
3 画像URL部分のコードを書き換える
4 header.phpの<head>～</head>の間にコードを挿入する
5 ページのソースを見て画像URLが反映されているかを確認する
6 クローラーが回ってくるまで気長に待つ（最後に）

Googleカスタム検索ってなに？サイト内検索窓を作ってみよう

ネットで検索することを「ググる」という人は多い。Googleは検索エンジンの代表格と言っても過言ではないでしょう。

そもそも、Googleカスタム検索とは・・・

Googleの検索技術を利用して、あらかじめ指定したサイト内のみの検索結果を表示してくれる、それがGoogleカスタム検索です。

指定するサイトと言うのは任意のもので、複数指定もできます。好みのサイトだけで“絞り込み検索”ができる、というものなんですが、これを自分自身が運営するサイトのみを指定することで、「サイト内検索」ができる、というわけですね。

サイト内検索窓の作り方

Googleカスタム検索を利用したサイト内検索窓の作り方は、既に多くのサイトで詳しい解説があるので、ここでは割愛します。

最もシンプルで分かりやすく解説されている、と私が思うのはこちらのサイト様。

参考サイト

SEOラボ

サイト内検索とは～Googleカスタム検索エンジンを使った設置方法

細かい設定をしたい場合は、「Googleカスタム検索　サイト内検索窓」でググると色々とヒットするので、ご自分が分かりやすいな、と感じるページを参考になさってください。

Googleカスタム検索

上記リンクからアクセスできます。ログインしてオリジナルの検索窓を作ってみてください♪なお、Googleアカウントが必須なので、無い場合は新規作成してください。

逆に複数アカウントがある場合は、サイト運営でGoogle アナリティクスで使用しているアカウントでログインしましょう。

コードを取得したら、HTMLが書ける場所（テキストウィジェットや記事中、header/footer内など）にコピペして保存すればOKです。

ちょこっとアドバイス

WordPressでウィジェットや記事内に貼り付ける際、テキストモードで貼り付けた後、ビジュアルモードに画面を切り替えると、コードの一部が消えてしまい、検索窓がウェブサイトに表示されないという現象が起きます＾＾；

テキストモードでコードを貼り付けたら、ビジュアルモードを開かずに保存ボタンを押すようにしてください。また、後から編集する場合も、ビジュアルモードで開くと同様の事が起きるのでご注意ください。

サムネイルを指定する方法は、Googleカスタム検索ヘルプによると？

ワードプレスのアイキャッチ画像とGoogleカスタム検索のサムネイルは連動しない

無事に検索窓を設置できたら、適当なキーワードでサイト内を実際に検索してみてください。サムネイル付きの検索結果が表示されると思います。

ほとんどの場合は、アイキャッチ画像に設定している画像を拾ってくれるのですが、たまに記事中の挿入画像が表示されることがあります。

ただ、記事中画像ならまだいいんです。。。

なんと、サイドバーに設置していた画像広告（素材サイト・「シルエットAC 」）をサムネイルにしてくれちゃいました！(;’∀’)

ええぇーーー( ﾟДﾟ)こんなことってあるの・・・。

さすがにこの状況はまずいので、解決策を探りました。

Googleカスタム検索のヘルプページに記載されているサムネイルの指定方法

ヘルプページにちゃんと解決方法は書いてありました。

☞サムネイルの指定

方法は２つ。

PageMap を使用する

PageMap のコードをページの <head> セクションに追加してサムネイル画像を指定できます。このコンテンツはユーザーからは見えませんが、カスタム検索には有用な情報を提供できます。サムネイル画像のサムネイル DataObject を作成するには次のようにします:

（PageMap を使用して、アクションやカスタム属性を追加することもできます。）

thumbnail メタタグを使用する

thumbnail メタタグをページの <head> セクションに追加して、サムネイル画像を指定することもできます。次に例を示します:
<meta name="thumbnail" content="http://example/foo.jpg" />

なんのこっちゃ・・・って感じなのですが、やり方としては、PageMap（上の長いコード）またはthumbnailメタタグ（下の一行のコード）のいずれかを、<head>内に入れればいいそうです。

今回は、一つ目のPageMapのコードを使うことにしました。

サンプルコードの４行目に、画像URLが書かれています。要は、このURL部分を、指定したい画像URLに書き換えてコピペすれば良い、という訳です。

赤字の部分を書き換えるんだよ！

画像URL部分のコードを書き換える

サムネイルの指定はできることが分かりました。

でも、問題発生です。ワードプレスのテーマの仕様上、ヘッダーは共通。

サンプルのように、特定の画像URLを書いてheader.phpの<head>～</head>内にコードを設置してしまうと、検索結果一覧に表示される全ての記事のサムネイルが、同じ画像になってしまう・・・よね？(笑)たぶん。

サンプルコードの書き方は、あくまで個々のページに独立したヘッダーがあり、個別にコードを設置できる場合の例なのでしょう。

つまり、ワードプレスでアイキャッチ画像をGoogleカスタム検索のサムネイルに指定するには、サンプルコードのURL部分を、アイキャッチ画像URLを取得する書き方にしなければならないんだと思います。

図解作ってみました…イメージはこんな感じ？

アイキャッチ画像のURLを取得する方法

調べてみたら、分かりやすいサイト様を見つけました。

参考サイト☞WordPressのアイキャッチ(サムネイル)の画像をURLで取得して表示する方法│9ineBB

PHP

<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>

このように書けば、アイキャッチ画像のURLを取得できるとのことなので、サンプルコードの画像URL部分をこのコードに置き換えてみました。

header.phpの<head>～</head>の間にコードを挿入する

外観→テーマの編集→header.phpを開き、<head>～</head>の間の任意の場所にコードを貼り付けます。私は</head>の直前に貼りました。

※テーマの編集を行う場合は、子テーマを作っておいた方がいいです。

WordPressテーマSelaの子テーマを作る手順

実際に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>内にコピペするだけです。

クローラーが回ってくるまで反映はされません（私のサイトでは３日くらいかかりました）が、気長にお待ちください。

※ただ、これですべてのサムネイルがバチっとアイキャッチの画像になるとは限らないようですorz

コードの設置により、ほとんどのサムネイルはアイキャッチに設定している画像が表示されるようになりました。が、たまに違う画像が表示されていることも。うーん、よく分わかりません・・・。

Google先生は気まぐれですね(ノД`)・゜・。解決策が分かったら追記します。

サムネイルのサイズについて

ところで、コードの中に以下の記述がありますよね。

この数字を変更することでサムネイルの幅と高さを調整できるはずなのですが・・・これはどうも上手く機能しませんでした。

CSSをいじってみても反映されず。キャッシュを削除してページを更新しても変わらずでした。

Googleカスタム検索のヘルプフォーラム（海外版のみ）も覗いてみたのですが、有益な情報は得られませんでした。

もしサムネイルの画像サイズを変更することができたら、やり方を追記したいと思います。

あかえほ

赤ちゃん絵本のWeb図書館