Google+1ボタンからGoogle+に直接『共有』される際のタイトルとサムネイル、説明文を指定する方法

本日、「Google+1ボタンから直接Google+に『共有』の投稿が可能に」なりましたが、その+1から投稿される内容の一部となるサムネイルと説明文をウェブサイト運営者側で指定する方法を説明します。

なお、Google+ボタンでは4つの方法でそれら情報を指定できますが、情報の取得はここで説明する順に優先されます。

1. Schema.orgのマイクロデータを使用する方法

Googleではこの形式を使うことを推奨しています。

その「+スニペット」を追加するためには、schema.orgが推奨する属性をウェブサイト各ページに追加します。

たとえば、このページ自体の+スニペットをソースに追加するには、

<body itemscope itemtype=”http://schema.org/Article”>
<h1 itemprop=”name”>Google+1ボタンからGoogle+に直接『共有』される際のタイトルとサムネイル、説明文を指定する方法</h1>
<img itemprop=”image” src=”thumbnail.jpg” />
<p itemprop=”description”>本日、「Google+1ボタンから直接Google+に『共有』の投稿が可能に」なりましたが、その+1から投稿される内容の一部となるサムネイルと説明文をウェブサイト運営者側で指定する方法を説明します。</p>
</body>

となります。

この4つの属性を指定しておけば、訪問者が+1を使ってあなたのウェブページを「共有」した場合に、見栄えの良い「共有」としてGoogle+に投稿されます。

2. Open Graphプロトコルを使用する方法

WordPressなどのFacebookいいね！関連のプラグインを使用している場合などは、自動的にこのOpenGraphプロトコルのタグが追加されていることがあります。

このメタタグがソースに表記されていれば、その内容が+1ボタンによって使用されます。

Metaタグのtitleとdescriptionを使用する方法

3. 従来のHTMLタグであるMetaタグの2つの要素を使用する方法

従来から使用されているMetaタグがあれば、+1ボタンはそこからタイトルと説明文を取得しますが、サムネイルに関しては自動的に最適なものが採用されてしまいます。

4. Google+ボタンにお任せする方法

通常であれば上記3つの内のどれかが指定されているはずですが、Metaタグもが省略されている場合は、+1ボタンは自動的にページのコンテンツからそれら3つのスニペットを自動的に生成しようとします。

当然のことながらその精度は低いため、Googleではこの方法はお薦めしない、としています。

以上、Google+ボタンで使用されるスニペットの指定方法ですが、Facebookのいいね！ボタンもウェブサイト運営上で重要ですから、当面は1と2の併用が良いかと思われます。

ちなみに、当ブログではFacebookいいね！関連プラグインが2のOpen Graphプロトコルのタグを追加してくれておりますのでそれにお任せしています。

スニペット指定時の注意点

2011年8月25日時点では、どうやら説明文が半角64文字で強制的に切り取られてしまい、日本語ですと文字化けする場合があるようです。

気になる方は説明文の文字数を全角で32文字以内に納めるようにすれば解決すると思われます。

皆様も是非お試し下さい。

今後もGoogle+最新情報を配信しますのでもしよろしければ是非Google+で私をフォローしてみてください。

Facebook上にもGoogle+ユーザーのページがありますのでよろしければそちらの「いいね！」もどうぞ。

招待状が欲しい方は、こちらからGoogleアカウントのメールアドレスをお知らせください。

また、他のGoogle+関連記事はこちらから。

公式リリース（英文）：Making the most of improvements to the +1 button

公式の詳しい開設（英文）：Adding the +1 Button