最近になって、スマホのブラウザでGoogle検索した際に、サムネイル画像が表示されるようになりました。
「meta thumbnail」というものをheadタグ内に記述する必要があるんですが、WordPressでの設定方法についてご紹介します。
meta thumbnailを静的なHTMLで書く場合
最近では設定次第で、スマホのブラウザでGoogle検索した時にこのようにサムネイル画像が表示されます。テキストだけのサイトよりもサムネイル画像が表示されたサイトの方がクリック率が上がりそうですね。
スマホのブラウザでGoogle検索した際に表示されるサムネイル画像を設定するのが「meta thumbnail」というもので、headタグ内に下記の1行を追加することで表示させることができます。
<meta name="thumbnail" content="画像までのパス">
ただし、この書き方の場合は決められた1枚の画像を表示させる場合なので、ブログの各記事に対応させることができません。ポートレートサイトなどでは問題ないかもしれませんが。
meta thumbnailをWordPressのheader.phpに記述する場合
先ほどの書き方だと記事ごとにアイキャッチ画像が変わるような、一般的なブログ形式に対応できないので、記事ごとに設定されたアイキャッチ画像を出力するためにphpで書きましょう。
記述する場所がheadタグ内なので、header.phpを編集します。
<?php
if (is_single() && has_post_thumbnail($post_object->ID)) {
$thumbnail_id = get_post_thumbnail_id($post_object->ID);
$image = wp_get_attachment_image_src( $thumbnail_id, 'full' );
$thumbnail_image = $image[0];
} else {
$thumbnail_image = get_template_directory_uri().'/images/thumbnail.png';
}
?>
<meta name="thumbnail" content="<?php echo $thumbnail_image; ?>">
簡単に言えば「その記事にアイキャッチ画像が登録してあるかどうかを判定し、アイキャッチ画像が登録してあればその画像を出力し、そうでなければ共通する1枚の画像を表示する」ということが書かれています。
テーマフォルダ内にimagesっていうフォルダがある前提で書いちゃってますが、アイキャッチ画像がない記事ページ、もしくは記事ページ以外使うサムネイル画像はテーマフォルダ内に入れておいて、そこまでのパスを書いてください。
上記のプログラムを書く場所は、headタグ内であればどこに書いても良いです。meta descriptionなどと並べておくと分かりやすいので、僕はそのようにしてます。
あと出力するアイキャッチ画像をフルサイズで出してますが、ご自身の環境に合わせてサムネイルサイズなどに変更しても良いと思います。
記事にアイキャッチ画像を登録するには？
記事にアイキャッチ画像を登録する方法については、こちらの記事で解説してます。
全部の記事にアイキャッチ画像を設定しておいた方が良いので、もし設定してない方はこの機会に入れちゃいましょう。
最後に
コピペで簡単に追加できますので、ぜひお試しください。
functions.phpに書く方法もあるんですが、headタグ内のどの場所に記述するかをコントロールしやすいので、僕はこっちの書き方の方が好きです。