【WordPress】Googleスマホ検索結果にサムネイル(アイキャッチ)画像を出す方法(コピペでOK)


ごきげんよう、変なカスタマイズばっかりしてるバビです。

先日、自分のブログ記事の検索結果を見ていて、他のサイトには画像があるのに私のサイトには画像が表示されてないことが気になりました。

こういうやつですね。

Googleスマホ検索結果のサムネイル画像サンプル

1位、2位のサイトにはあるのに、3位の自分のサイトにはない。

これがあったほうが検索した人の視認性が高まって、クリック率も上がるんじゃね?

と思い、気になって調べたら、どうやら表示させる方法があるようなのでカスタマイズしました。

ただ、絶対ではないようなので、表示されたらラッキーくらいで考えてください。

注意
  1. WordPressこのコードで実装できるはずですが、私はテーマSANGOでしか検証していません。
  2. 最初から同じ機能のあるテーマもあるかもしれませんので、事前にご確認ください。
  3. 私の場合はいくつかの記事で表示されたことを確認できましたが、必ず表示されるという保証はできません。
  4. カスタマイズは自己責任で行ってください。

お詫びと訂正とお礼

マクリンさん(@Maku_ring)からご指摘をいただき、コードが誤っていることが分かったため修正しました。

大変申し訳ございませんでした。

マクリンさん、ますじゅんさん(@jun1masu)ありがとうございました。

そんなお二人の素敵なブログはこちらです

Google公式の検索結果にサムネイル画像を出す方法

実はその方法自体は、Googleのカスタム検索のヘルプページに出ています。

カスタム検索の記述ですが、試しにやってみてスマホ検索結果に表示できたというサイトも見つけました。

通常の検索でも仕組みは一緒なのかもしれません。

公式で示されている方法は以下の2つ。

  1. PageMap を使用する
  2. thumbnail メタ タグを使用する

簡単に言うとWordPressテーマにheader.phpの<head>内にコードを書き込めばいいだけです。

PageMap
<!--
  <PageMap>
    <DataObject type="thumbnail">
      <Attribute name="src" value="画像URL"/>
      <Attribute name="width" value="100"/>
      <Attribute name="height" value="130"/>
    </DataObject>
  </PageMap>
-->
thumbnail メタ タグ
<meta name="thumbnail" content="画像URL" />

ただ、WordPressは、すべてのページでheader.phpの<head>を使いまわすため、この方法だと1枚しか画像が指定できません。

全部の記事で同じ画像が出ちゃうことに…

なので、その記事のアイキャッチ画像をサムネイルに指定するようにコードを調整します。

function.phpにコードを貼り付ける

注意

function.phpの記述を誤ると、サイトが表示されないなどの重大なエラーを引き起こすことがあります。

  1. 子テーマのfunction.phpを編集すること
  2. 必ずバックアップをとること

の2点を守り、慎重に操作するようにしてください。

Google公式でいう②thumbnail メタ タグを使用する方法にました。

やり方は簡単で、以下のコードを子テーマのfunction.phpに貼り付けるだけです。

php
//サムネイルを指定
add_action( 'wp_head', 'add_meta_to_head' );
function add_meta_to_head() {
echo '<meta name="thumbnail" content="' .wp_get_attachment_url( get_post_thumbnail_id() ). '" />';
}

thumbnailのメタタグが挿入されているか確認する

コードの貼り付けが済んだら、サイトを開いて右クリックして「ページのソースを表示」でソースを確認します(Chromeの場合です)。

記事内を「meta name=”thumbnail“」などで検索してみて

<meta name=”thumbnailcontent=”アイキャッチ画像のURL”>

というタグが<head> </head>に挿入されていればOKです。

反映には時間がかかるし、反映されないことも

あとは検索エンジンのクローラがまわってくるまで待つだけです。

ただし、必ずしも指定した画像が表示されるわけではありません

  • 画像を表示させるかどうか
  • 記事中のどの画像を使用するか

はGoogleのアルゴリズムが判断して決定しています。

どの画像が表示されるかは、記事内容と画像との関連性などから判断されます。

なので、画像のファイル名や画像内の文字などを意識すると、表示されやすくなるかもしれません。

結局はGoogleの気分次第ということですね。

もしかすると今後のGoogleの仕様変更などによって、この方法では表示できなくなるかもしれません。

検証がしづらいため、どの程度有効なのかは不明ですが、私のブログでは効果がありました。

カスタマイズ記事一覧

おまけ

検証が難しい

私がこれをやろうと思ったのは、

  • 検索1位と2位にはサムネイルが表示されていた
  • アイキャッチとは別の画像が表示されていた

という2つの記事をなんとかしたいと思ったからです。

実際この2つの記事はこのカスタマイズでどちらもアイキャッチがサムネイルとして表示さるようになりました。

その後、検証してみようと思ったのですが、そもそもクエリによって検索結果にサムネイルを表示させないパターンもあって、検証が難しい!

このケースの場合はどうやってもサムネイルは表示されないようです。

たぶん、このカスタマイズが有効なのは、

「検索結果の他のサイトのサムネイルは表示されているのに、自分のには表示されたない」

パターンなのかな?と思います。

間違ったコードでも適用されていた?

最初、間違って以下のコードを使用していました。

php
//サムネイルを指定
add_action( 'wp_head', 'add_meta_to_head' );
function add_meta_to_head() {
  echo '<meta name="thumbnail" content="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>">';
}

赤字の個所が間違っています。

にもかかわらず、なぜか私が表示させたかった記事ではサムネイルが表示されていました。

さらに、このコードを消して、クローラーが回ってくるのを待つとサムネイルが非表示に。

ということは、間違ったコードなのにクローラーは正しく認識していたということでしょうか?

謎です。

正しいコードを入れてしばらくしたら、サムネイルが表示されていない記事はサムネイルが表示されました。

元々別の画像が表示されていた記事はサムネイルが消えたままです。

しばらくすると表示されるのかな?

経過観察中。

カスタマイズ記事一覧

1 COMMENT

現在コメントは受け付けておりません。