2018.02.10当サイトではサイト内検索にGoogleカスタム検索を使用しています。(スマホ画面で虫眼鏡アイコンを押すとワードプレスのサイト内検索になります)サムネイルも表示できて便利なのですが、ときどき、意図しない画像が使われたりしますよね。素直にアイキャッチ画像を拾ってくれればいいのに・・・。調べたら、Googleのヘルプページであっさりやり方は見つかったのですが、実装するのには苦戦しました・・・。備忘録を残しておきます。画像URL部分のコードを書き換えるアイキャッチ画像のURLを取得する方法header.phpの<head>~</head>の間にコードを挿入するページのソースを見て画像URLが反映されているかを確認するクローラーが回ってくるまで気長に待つ(最後に)【補足1】サムネイルのサイズについてGoogleカスタム検索ってなに?サイト内検索窓の設定方法ネットで検索することを「ググる」という人は多い。Googleは検索エンジンの代表格と言っても過言ではないでしょう。そもそも、Googleカスタム検索とは・・・Googleの検索技術を利用して、指定したサイト内のみの検索結果を表示してくれるのがGoogleカスタム検索です。指定するサイトと言うのは任意のもので、複数指定もできます。好みのサイトだけで“絞り込み検索”ができる、というものなんですが、これを自分自身が運営するサイトのみを指定することで、「サイト内検索」ができる、というわけですね。サイト内検索窓の作り方Googleカスタム検索を利用したサイト内検索窓の作り方は、すでに多くのサイトで詳しい解説があるので割愛します。私が最もシンプルで分かりやすく解説されていると私が思ったのはこちらの記事。サイト内検索とは~Googleカスタム検索エンジンを使った設置方法サイト内検索を実装し、ユーザービリティを高めながら、サイト・ブログ運営することが大切です。サイト内検索窓」でググって、自分が分かりやすいな、と感じるページを参考にしてください。▶Googleカスタム検索のページはこちらログインしてオリジナルの検索窓を作ってみてください^^Googleアカウントが必須なので、無い場合は新規作成してくださいね。アナリティクスで使用しているアカウントでログインしましょう。コードを取得したら、カスタムHTMLにコピペして保存すればOKです。カスタムHTML以外にコードを貼ると(クラシックエディタのテキストモードなど)、画面を切り替えたときにコードの一部が勝手に消えてしまい(具体的にはscriptタグ)、検索窓が表示されない現象が起きます。してもテキストモードに貼り付ける場合は、ビジュアルエディタを開かずそのまま保存してください。サムネイルを指定する方法は、Googleカスタム検索のヘルプに情報あり検索窓を設置できたら、適当なキーワードでサイト内を実際に検索してみてください。サムネイル付きの検索結果が表示されると思います。ワードプレスのアイキャッチ画像とGoogleカスタム検索のサムネイルは連動しないほとんどの場合は、アイキャッチ画像に設定している画像を拾ってくれます。記事中の挿入画像が表示されることがあります。記事中画像ならまだいいんです。゚Д゚)こんなことってあるの・・・。この状況はまずいので、解決策を探りました。Googleカスタム検索のヘルプページに記載されているサムネイル指定方法ヘルプページにちゃんと解決方法は書いてありました。ついて、より詳しい情報をユーザーに提供するために有効です。デフォルsupport.google.com方法は2つ。セクションに追加してサムネイル画像を指定できます。このコンテンツはユーザーからは見えませんが、カスタム検索には有用な情報を提供できます。使用して、アクションやカスタム属性を追加することもできます。セクションに追加して、サムネイル画像を指定することもできます。ヘルプなんのこっちゃ・・・って感じなのですが、やり方としてはPageMap(上の長いコード)またはthumbnailメタタグ(下の一行のコード)いずれかを、<head>内に入れればいいそうです。私は、PageMapのコードを使いました。サンプルコード4の行目に、画像URLが書かれています。要は、このURL部分を、指定したい画像URLに書き換えてコピペすれば良い。value=”http://www.example.com/recipes/applepie/applepie.jpg“/>画像URL部分のコードを書き換えるサムネイルの指定はできることが分かりました。ワードプレスのテーマの仕様上、ヘッダーは共通。サンプルのように、ひとつの画像URLを書いて<head>~</head>内にコードを設置してしまうと、検索結果一覧に表示される全ての記事のサムネイルが、同じ画像になる。サンプルコードの書き方は、あくまで個々のページに独立したヘッダーがあって、個別にコードを設置できる場合の例なのでしょう。ワードプレスでアイキャッチ画像をGoogleカスタム検索のサムネイルに指定するには、サンプルコードのURL部分で、記事毎のアイキャッチ画像URLを取得する書き方にしなければならないんだと思います。調べてみたら、分かりやすいサイト様を見つけました。?>WordPressのアイキャッチ(サムネイル)の画像をURLで取得して表示する方法このように書けば、アイキャッチ画像のURLを取得できるとのこと。サンプルコードの画像URL部分をこのコードに置き換えてみました。header.phpの<head>~</head>の間にコードを挿入する外観→テーマの編集→header.phpを開き、<head>~</head>の間の任意の場所にコードを貼り付けます。最近のワードプレスのテーマは、直接phpファイルをいじらなくても<head>内にコードを挿入できる機能がついているものもあります。プラグインでもそういう事ができるものがあります。テーマの機能やプラグインを利用してください。phpファイルをいじる場合は、必ず子テーマを用意してください。WordPressテーマのカスタマイズで子テーマを使うべき理由、使い方などWordpressテーマのカスタマイズに必要な「子テーマ」と「親テーマ」に関する概念に関する説明です。子テーマの作り方や、使い方についても説明しています。テンプレートやスタイルを変更するなら、必ず押さえておきたいWordpressのテクニックですnelog.jp実際にhead内に設置したコードがこちら。</PageMap>-->たぶん、他のテーマでもこのコードをそのままコピペで大丈夫だと思います。ページのソースを見て画像URLが反映されているかを確認するアイキャッチ画像のURLを呼び出せているか、ページのソースを見て確認してみました。調べたいページで右クリック→「ページのソースを表示」で見ることができます。画像URLがきちんとアイキャッチ画像のURLになっていました!これで設定は完了です。クローラーが回ってくるまで気長に待つ(最後に)説明がずいぶんと長くなってしまいましたが、やることは最後にご紹介した「実際にhead内に設置したコード」を<head>~</head>内にコピペするだけです。クローラーが回ってくるまで反映はされません。私のサイトでは3日くらいかかりました。気長にお待ちください。!これですべてのサムネイルがバチっとアイキャッチの画像になるとは限らないようですorzコードの設置により、ほとんどのサムネイルは、アイキャッチに設定している画像が表示されるようになりました。違う画像が表示されていることも。うーん、よく分わかりません・・・。解決策が分かったら追記します。【補足1】サムネイルのサイズについてところで、コードの中に以下の記述がありますよね。ヘルプこの数字を変更すると、サムネイルの幅と高さを調整できるはずなのですが・・・これはどうも上手く機能しませんでした。CSSをいじってみても反映されず。キャッシュを削除してページを更新しても変わらず。Googleカスタム検索のヘルプフォーラム(海外版のみ)ものぞいてみたのですが、有益な情報は得られませんでした。解決策が分かったら、やり方を追記したいと思います。最後までお読みいただき、ありがとうございました。―ちびこママ海外での子育てを経験し、絵本の必要性を感じてウェブ絵本作りを始めました。絵本を無料公開しています。―ちびこママ海外での子育てを経験し、絵本の必要性を感じてウェブ絵本作りを始めました。絵本を無料公開しています。PinterestタイトルとURLをコピーしました。