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+バッジ設置時は、この確認を必ず行いましょう。
Google+バッジ設置してみませんか。