Googleの検索でGoogle+のプロフィール写真や著者情報を表示する方法、知ってますか？

Google+バッジとは

Google+バッジとは、右画像のようなものです。
このGoogle+バッジを自分のブログ等に表示して、Google+をフォローしてもらうためのバッジです。

このGoogle+バッジをブログに設置すると、Googleでこのブログが検索されたときにプロフィール写真や著者情報が表示されるようになります。

現在は、プロフィール写真の表示は少なくなっていくという情報もあるようです。

Google+バッジの設置方法

Google+バッジは、こちらのサイトで取得できます。
色々な種類のバッジが作成できます。

• Google+ユーザーを選択
• 設定でバッジを選択
• レイアウトで縦向きか横向きを選択
• 幅でバッジの幅を指定
• 色のテーマで明るいかダークを選択
• カバー写真で有効か無効を選択(縦向き時のみ)
• キャッチフレーズで有効か無効を選択(縦向き時のみ)

Google+バッジの幅の設定はできますが、レスポンシブには対応していません。残念！

Google+バッジの設置

上記設定をすると、コードがバッジの下に出来上がっていますので、選択してコピーしましょう。
私がコピーしたコードは以下です。

<!-- ウィジェット を表示したい位置に次のタグを貼り付けてください。 -->
<div class="g-person" data-width="180" data-href="//plus.google.com/103003916930768547086" data-rel="author"></div>

<!-- 最後の ウィジェット タグの後に次のタグを貼り付けてください。 -->
<script type="text/javascript">
  window.___gcfg = {lang: 'ja'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Google+バッジを複数設置する場合は、＜script＞以降のコードは、一番後ろにのみ設置しましょう。

ここで、＜script＞以降のコードをHTMLドキュメントの一番下、＜/body＞ タグの直前にこのタグを配置すると、ページの読み込み速度が改善されることがあるようです。

WordPressを使用されている方は、ウイジェットで「テキスト」を選択し、コピーしたコードを貼り付ければOKです。

Google検索時、著者情報が表示されることを確認する方法

Google+バッジをブログやホームページに設置すると、Google検索時にプロフィール写真及び著者情報が表示されます。この表示がされていることを確認する方法があります。

但し、ウェブマスターツールにホームページを登録している必要があります。

構造化データ テスト ツールにアクセスして、サイトのURLを入力しプレビューボタンを押すと下記画像のようにプロフィール写真と著者情報の表示が確認できます。

Google+バッジ設置時は、この確認を必ず行いましょう。