スマホで検索すると、検索結果に画像が表示されている時があります。

検索結果画像サンプル

この画像は、何も指定しなくても表示がされる時があります。その場合はGoogleが勝手に決めてくれるのですが、どうやら最初に表示される画像をピックアップするようなので、時にびっくりするような画像（アイコンとか）が表示されてしまったりして、検索したユーザーを困惑させる結果になりかねません。

ですので、そのスマホで検索した際に表示されるサムネイル画像を任意のものに変更する方法をご紹介したいと思います。

コードを<head></head>の間に配置する

以下のコードを<head></head>の間にコピペしてください。

<!--
 <PageMap>
 <DataObject type="thumbnail">
 <Attribute name="src" value="画像のパス"/>
 <Attribute name="width" value="100"/>
 <Attribute name="height" value="130"/>
 </DataObject>
 </PageMap>
-->

4行目にある画像のパスの部分に任意の画像のパスを挿入してください。

メタ情報のthumbnailとは？

本来のmeta thumbnailとはホームページを検索した際に、その検索結果で表示される画像を指定するためのタグになります。検索した際に表示されるのがページタイトルや概要（description）だけでは、その内容がユーザーにとって把握できない場合があり、そういった場合に対し、meta thumbnailを使用して画像を検索結果に表示させれば、どんな内容のページかを直感的にユーザーに伝えることが可能になるのと、結果的にSEOやCTR（Click Through Rate)にいい効果をもたらすことも考えられます。

pagemapはmeta thumbnailの代替手段でもあります。

必ず表示されるとは限らない

ただし、設定すれば必ず表示されるというわけではなく、表示させるかどうかはGoogleのアルゴリズムが判断するようで、キーワードによっても表示したりしなかったりしますのでご注意ください。

WordPressでアイキャッチ画像をサムネイルで表示させるには

画像のパスにアイキャッチ画像を表示させるようにすればOK

<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>

WordPressでトップページにfront-page.phpなどを使用している場合

WordPressではfront-page.phpやhome.phpをテーマ内にアップロードすると自動的にそのページがトップページとして表示されます。

そういう時はアイキャッチが使えませんので、以下のようにしてもいいと思います。

<!--
  <PageMap>
    <DataObject type="thumbnail">
      <?php if(is_front_page()): ?>//トップページの場合の条件分岐
      <Attribute name="src" value="画像のパス"/>
      <?php else: ?>//それ以外の場合
      <Attribute name="src" value="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>"/>
      //アイキャッチを指定
      <?php endif; ?>
      <Attribute name="width" value="100"/>
      <Attribute name="height" value="130"/>
    </DataObject>
  </PageMap>
-->

2019.02.09制作コラム

Tags: /

関連情報