広告

CocoonでモバイルGoogle検索結果にサムネイルを表示

サムネイル表示 WEB
この記事は約3分で読めます。

Google検索のサムネイルとは?

スマホやタブレットでGoogle検索をした時、サムネイルが表示されることがあります。

サムネイル表示

サムネイルが表示されるかどうかは、検索キーワードによっても異なるようです。

調べた感じでは、鍼灸・マッサージ・柔整・カイロプラクティック関係を検索すると出てきやすいです。

意図した画像を表示させるには

サムネイルが表示されているサイトのソースを確認&グーグルからの情報を確認すると、自動的に画像が選ばれているようです。

意図した画像を表示させるには、2つの方法があるようです。

  • HTML ページの <head> セクションの PageMap データ を使用する
  • thumbnail メタ タグを使用する

グーグルさんのヘルプ

気をつけて欲しいのは、上記の方法は「カスタム検索」の場合と書いてあります。

ただ、この方法で意図した画像が、検索結果に表示されたという結果があったので、やってみる価値はあると思います。

Cocoonでの方法

Cocoon設定 > OGP でOGPをONにします。

OGP設定

OGPタグで指定している画像と同じ画像が出力されるように、tmp/header-ogp.phpをカスタマイズします。

オリジナル

tmp/header-ogp.php オリジナル

修正後

tmp/header-ogp.php カスタマイズ

tmp/header-ogp.php の61行目と77行目に下記を挿入します。

echo '<meta name="thumbnail" content="'.esc_url($ogp_image).'">';echo "\n"; // 追加

gistにも、書いておきました。

カスタマイズしたtmp/header-ogp.phpを子テーマにアップする

Cocoonが更新される度に操作するのは大変ですので、子テーマを利用します。

tmpディレクトリを作成

子テーマにtmpディレクトリを作成します。

FTPでディレクトリを作成してもいいですし、PCでtmpフォルダを作って、FTPでアップロードしても大丈夫です。

カスタマイズしたheader-ogp.phpをアップロードします

子テーマのtmpディレクトリにカスタマイズしたheader-ogp.phpをアップロードします。

くれぐれも、カスタマイズ前のものをアップしないでくださいね。

確認

投稿や固定ページを表示させて、右クリックしてソースを確認しましょう。

ソースにthumbnail メタ タグがあればOKです。

Cocoon子テーマ tmp-user/head-insert.php に書いても反映されない

実は、tmp-user/head-insert.php に追記すればいいと思ってやってみたのですが、できませんでした。

ちょっと面倒ですが、治療院のサイトをCocoonで運営されている方なら、やっておいた方が良いと思います。