「Google+1」ボタン設置とスニペット

「Google+1」ボタンの作成方法からURLの判定等について説明しています。又、microdataやOGPでスニペットを明確化する事でGoogle+上で画像付で表示させる事も出来ます。

「Google+1」ボタンの概要

 「Google+1」ボタンはGoogleが提供しているGoogle+の機能の一部で本サイトにも設置している以下のボタンです。

「Google+1」ボタンの設置1

 Google+のユーザーがクリックする事で他のユーザーにお奨めしている事が表示され、他のユーザーはURLをクリックする事で簡単にホームページを参照出来るようになります。

 サイトを訪れた事がないユーザーの目に留まる機会が増えるため、訪問者を増やせる可能性があります。

 設置するのは無料でユーザー登録も不要なため、クリックしてくれる人が殆どいなくても設置しておいて損はないと思います。

「Google+1」ボタンの作成

 「Google+1」ボタンの作成は「Google Developers」で行います。

「Google+1」ボタンの設置2

 上記画面の右にはデフォルトのコードが赤枠部分のように表示されます。緑の枠の部分は各項目を選択した時のプレビューです。選択を変更する度にどのようなボタンになるか確認が出来ます。

「Google+1」ボタンの設置3

 特になにも設定せずにコードをそのまま利用出来ますが、以下に設定の内容を説明します。

・サイズ
 ボタンのサイズは以下の4種類です。
small
「Google+1」ボタンの設置4
medium
「Google+1」ボタンの設置5
standard
「Google+1」ボタンの設置6
tail
「Google+1」ボタンの設置7
・+1 情報
 +1 情報はインラインがデフォルトでボタンの右側に数字とコメントが表示されますが、バルーンに変更すると以下のように表示されます。
「Google+1」ボタンの設置8
 サイズをtailにしている場合はバルーンが上に表示されます。
「Google+1」ボタンの設置9
 尚、なしも選択可能で、なしではGoogle+1ボタンだけでカウント等が表示されません。
「Google+1」ボタンの設置a
・幅
 ボタンの幅です。+1 情報でバルーンやなしを選択すると設定出来なくなります。デフォルトは300pxですが、インラインを選択した場合でも220px以下でも大丈夫と思います。
・言語
 通常は日本語を選択します。
・詳細オプション
 通常は選択する必要がありません。

htmlへの反映

 設定は自動的に右に表示されるコードに反映されます。

「Google+1」ボタンの設置b

 上記をコピーして「Google+1」ボタンを表示したい場所に張り付けます。

 尚、「Google+1」ボタンはパソコンに保存したhtmlファイルをブラウザで開いても表示されません。サーバーにアップロードして初めて表示されます。このため、最初は公開する前にテスト的に作成したファイルをアップロードして表示されるか確認しておいた方がいいと思います。

URLの入力について

 URLの入力は詳細オプションをクリックする事で出来ます。

「Google+1」ボタンの設置c

 詳細オプションをクリックすると以下のように表示され、URLの入力が可能になります。

「Google+1」ボタンの設置d

 URLは入力しなくても自動判定してくれます。このため、詳細オプションをクリックする事なく表示されたコードを全てのページに張り付けて大丈夫です。

 但し、トップページは気を付ける必要があります。例えばexample.comとexample.com/index.htmlのURLを統一していなくて両方でトップページが表示される可能性がある場合、それぞれ違うURLと認識してしまいます。

 この場合、URLを入力しておくとどちらかに統一出来ます。例えばexample.comと入力しておくとexample.com/index.htmlとブラウザで表示されている時にクリックされてもexample.comと認識されます。トップページ等異なるURLで同じページを表示する場合は指定しておいた方がいいと思います。

Google+での拡散

 上記で「Google+1」ボタンを設置してGoogle+のユーザーがボタンを押すと、サークルに紹介する事が出来ます。

 サークルとはキャンプ仲間等、同じ趣味や連絡を取り合う人たちのグループです。Google+ではツイッターのようにフォローして相手の発言を参照する事も出来ますが、サークルにより仲間の発言等を参照する事も出来ます。

 「Google+1」ボタンをクリックされるとこのサークルの人たちが訪問してくれる可能性があります。

OGPの設定

 Google+1でも「いいね!」ボタン同様にOGPの設定が有効です。OGPでサイトの題や説明、イメージ等を指定する事が出来ます。例えば、「Google+1」ボタンをクリックされると画像付で表示させる事も出来ます。

 詳細は「「いいね!」ボタン設置とOGP」の「OGPの設定」をご参照下さい。

microdataの設定

 「Google+1」ボタンではOGPの設定よりmicrodataの設定が優先されます。microdataは「パンくずリストの設置」で説明したものと同じです。

 microdataは「スニペット」で作成出来ます。

「Google+1」ボタンの設置e

 上記で必要事項を記述すると右側にコードが表示されるため、表示されたコードをhtmlに張り付けます。

 記述する内容はOGPと殆ど同じですが、一部違いがあります。

・ページの種類
 ここではArticleにします。microdata自体は人物や商品等を説明している事を示すのにも使えるため、そういった使い方をする時は他の項目を選択します。
・タイトル
 ページのタイトルを入力します。省略した場合は<title>タグやOGPで設定したタイトルが使われます。
・画像のURL
 image/image.png等のように指定します。画像は高さ120px以上必要で、幅は100px以上が推奨されています。省略した場合はOGPで設定した画像が使われます。
・説明
 ページの説明を入力します。省略した場合は<meta name="description" content="ページの説明">タグやOGPで設定した説明が使われます。
・マークアップの場所
 <head>、<body>それぞれの選択肢に応じたタグが表示されます。

スニペットのチェック

 「Google+1」ボタンでのスニペットはボタンを押された時に表示される概要になります。

 microdataやOGPでマークアップした後は「構造化データ テスト ツール」でどのようにスニペットとして把握されているかチェック出来ます。

 「構造化データ テスト ツール」は「Google+1」ボタンがクリックされた時にどのように表示されるかだけでなく、パンくずリストが正常に認識されているかプレビューしたり、作者情報を認識しているか等、様々なマークアップが正常に認識されるか確認出来るチェックツールです。

 詳細は「Googleウェブマスターツール」の「構造化データのテスト」をご参照下さい。

  • このエントリーをはてなブックマークに追加

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)