【手順公開】Google検索結果にサムネイル画像を表示させる【クリック率改善】

どうも、Webマーケター兼中小企業診断士のトーマツです。

「上位表示されている記事も多いのに中々アクセス数が増えない。。。」

「昔はそれなりに流入があったけど、競合記事が増えてクリック率が減った。。。」

このような悩みをお持ちでないでしょうか？

実はあまり知られていませんが、超短期的なクリック率改善策として、「Google検索結果の記事タイトル横にサムネイル画像を出す」という方法が有効です。

本記事では、このようなSEO的に有利な施策について手順を含めて解説したいと思います。

Google検索結果にサムネイル画像を表示させるメリット

実際の手順の説明に移る前にまず結果のイメージをご説明したいと思います。

後述する簡単な設定を行うと、以下のように、Google検索結果ページ（SERP : Search Engine Results Page)において、記事タイトルとメタ・ディスクリプションの横に100 x 100のサムネ画像を表示することが可能です。

「診断士 読むべき本」（検索ボリューム：110）の結果。もちろん当サイトが一位です。
サムネありなのでCTRが鬼高い

このような設定を行うと、テキストのみのページと比べて視認性が良く、クリック率が高まるため、短期的に実行できるWeb集客施策のSEO施策としてもかなり有効性です。

「湘南台 カット」で検索した結果

上の画像においてもサムネ画像が表示されている①と④の方が視認性が高く、クリックされやすいと言えるでしょう。

こういう要素を「リッチスニペット」という

Google検索では、上記で説明したサムネ画像の表示など、検索結果ページをより情報リッチにして、ユーザーの検索体験を豊にする拡張機能を有しております。

これを「リッチスニペット（またはリッチリザルト）」と言います。

サムネ画像以外にも、以下の要素が含まれます。

これらを設定するには、Google等の検索エンジンに構造化データを読み取ってもらう必要があります。

Google検索結果にサムネイル画像を表示させる手順

では本題に移ります。

WordPressユーザーがGoogle検索結果にサムネ画像を表示させる方法は主に3つあります。

理由は後述しますが、断然おすすめは③です。

なので細かい手順は３のみ紹介したいと思いますが、せっかくなので一つずつ解説します。

①headタグ内にPageMapデータを設定する

最初はPageMapを使う方法です。

PageMapとはGoogleによって開発された構造化データ形式です。

クローラーが適切に情報を読み取るための形式と理解いただくと良いでしょう。

具体的に、サムネ画像を表示するには、”header.php”ファイルにおいて、headタグ内に以下のコードを追加してください。

<PageMap>
	<DataObject type="thumbnail">
		<Attribute name="src" value="画像ファイルが格納されている場所のURL"/>
		<Attribute name="width" value="120"/>
		<Attribute name="height" value="120"/>
	</DataObject>
</PageMap>

3行目の”画像ファイルが格納されている場所のURL”はご自身で使用したい画像のURLで書き換えて頂ければ作業完了です。

②headタグ内にthumbnailメタタグを設定する

次はheadタグ内にthumbnail用のメタタグを実装する方法です。

こちらの方法を採用する場合も①と同様に”header.php”ファイルを使います。

headタグ内に以下のコードを埋め込みます。

<meta name="thumbnail" content="画像ファイルが格納されている場所のURL" />

“画像ファイルが格納されている場所のURL”はご自身で使用したい画像のURLで書き換えて頂ければ作業完了です。

③”function.php”にアイキャッチ画像をmetaサムネイルとして設定するコードを追加する

最後は一番おすすめの方法です。

①と②の方法では全てのページにて共通のheadタグが用いられるため、「全てのページで同一の同じサムネを表示してしまうから」です。

これを回避する方法として、各記事ページで使用されている「アイキャッチ画像を読み込む方法」を説明したいと思います。

まずはWordPressの管理画面を開き、「テーマファイルエディター」→「テーマのための関数（function.php）」をクリックしましょう。

次に、「function.php」ファイルの一番下に下記のコードを貼り付けましょう（コードは以下のコピペをそのまま使っていただくのでOKです）。

// サムネにアイキャッチを使用
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() ). '" />';
}

貼り付け後「ファイルを更新」をクリックすればOKです。

最後にコードがうまく反映されているか確認します。

まずはご自身のメディアの任意の記事にて、ご自身が使われているブラウザのデベロッパツール（検証ツール）を開きましょう。

Google Chromeの場合、右クリックメニューの一番下の「検証」をクリックすればOKです。

次にデベロッパーツール画面上で「ctrl + F」をタイプし、検索窓を表示させた後、「thumbnail」と打ち込んでください。

「<meta name=”thumbnail”…」が表示されていれば反映成功です。

お疲れ様でした！

まとめ

以上、本記事では「Google検索結果にサムネイル画像を表示させる方法」について解説させて頂きましたが、いかがでしたでしょうか？

お答えできる範囲で答えさせて頂きます。

それではまた！

中小企業診断士こそWebマーケティングのプロを目指そう！【勉強法も紹介】 どうも、Tomatsuです。 新米・診断士さん 中小企業診断士になったのは良いものの「専門性がなく、どうやって仕事に繋げたら良い...

WordPressを使ったブログの始め方【中小企業診断士はオウンドメディアを持とう】 どうも、Tomatsuです。 Aさん（中小企業診断士） 中小企業診断士になったので名刺代わりにブログを開設したいと思っています。...