Google+ボタンのスニペットのカスタマイズ

久しぶりに+1 ボタンページを見てみると、”+スニペットのカスタマイズ” という箇所が。
Microdata用のものだと思いますが、以前からありましたっけ…。(?)

1
2
3
4
5
6
7
<!-- Update your html tag to include the itemscope and itemtype attributes -->
<html itemscope itemtype="https://schema.org/Blog">

<!-- Add the following three tags inside head -->
<meta itemprop="name" content="Title of your content">
<meta itemprop="description" content="This would be a description of the content your users are sharing">
<meta itemprop="image" content="imageUrl">

WordPress用

好みに合わせて適宜、変更してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<meta itemprop="name" content="<?php wp_title( '|', true, 'right' ); ?>">
<?php if ( is_single() ) { // 単独記事ページの場合 ?>
<?php if ($post->post_excerpt){ ?>
<meta itemprop="description" content="<?php echo $post->post_excerpt; ?>">
<?php } else {
$summary = strip_tags($post->post_content);
$summary = str_replace("\n","", $summary);
$summary = str_replace("\r","", $summary);
$summary = mb_substr($summary, 0, 100). "..."; ?>
<meta itemprop="description" content="<?php echo $summary; ?>">
<?php } ?>
<?php } else { // 単独記事ページ以外の場合 ?>
<meta itemprop="description" content="<?php bloginfo('description'); ?>">
<?php } ?>
<meta itemprop="image" content="imageUrl">

» +1 ボタン

—-
2012/01/27
Google+ページ用のGoogle+ボタンに、横幅の指定やカラーのオプションが付く。
» Inside Google Plus » Blog Archive » Google Plus Badges new options
» Link your Google+ page to your site – Google+ Platform — Google Developers

Google Search, plus でSERPにGoogle+が統合

米Google のSERPに、Google+ のコンテンツが統合される「Search, plus Your World」(Search, plus だけ?)が開始されたそうです。
すでに、米Google で使ってみたという人もいるかと思いますが、Twitter 関連など既存のソーシャル関連も継続して結果に統合されているようです。

Google+ に限らず、個人的にはわりとほいほいとつなっがていったりしますので、
あんまりすべてにおすすめされていくと、ちょっとアレな気もしますが、一応、若干のコントロールもアカウント設定からできるみたいです。
※この辺も、追加するサークルで比重を選べたらいいのになぁ。

Google Search Plus, Your World SERP
※Google+に投稿した画像とか。

SERP 右側の、People and Pages on Google+ 箇所にGoogle+ の企業用ページとかも表示されるそうですが、
この辺りはちょっといいなぁと思ったりますが、AdWords やGoogle プレイス関連とかと、どのように共存(表示)していくのか気になります。
※AdWords で掲載できるようになったり… 笑

さまざまなコンテンツを持つGoogle だけに、Bing のFacebookコンテンツ統合とはまた違った意味合いもありそうですが、
一応、自分としては検索のパーソナライズ化 や利用範囲の拡大は、楽しみなひとつでもあります。

» Search, plus Your World · Inside Google Search

無限の本棚 Google WebGL Bookcase

実用的というよりは、Google Books とWebGL(Chrome Experiments)のイメージを先行したデモサイトのようで、
実際のところはもう少しシンプル(?)になったりしそうですが、個人的にはけっこうこのままでも.. とも。

Google WebGL Bookcase

WebGL Bookcase
Browse thousands of titles from Google Books.

並べられている書籍については、Google books(books.google.co.jp)につながってます。

ウェブ進化のインフォグラフィック – The evolution of the web

Chrome の誕生3周年記念らしいのですが、
Google がブラウザ やJavaScript など、もろもろの進化の過程を表したインフォグラフィックを公開。

インフォグラフィック と表題されており、「HTML5だし!」と言われるとなぜか納得してしまう部分もありますが、
これもインフォグラフィックの一つとなると、今後、この手のものも色々でてくるんだろうなぁ。。

Google - The evolution of the web
» The evolution of the web – ウェブの進化

先日改めて公開された、GmailやGoogle calendar などをオフラインで利用可能なHTML5版のChrome アプリで、
ブラウザのキャッシュがストレージ変わり(?)になるような箇所を見て、進化の過程に改めて軽く感動も。

1996年にHTML5スタート
各ブラウザやToolTip をクリックすると、初代から現代までのバージョンや説明が表示されます。
HTML5 って2006年頃からだったんですね..。

The evolution of the webのMOZAIC
なにげに現在使っている中の一台のXP は、ちょっと様相が近かったりも..。

via: Google、Chrome立ち上げ3周年でHTML5のインフォグラフィックを公開 – ITmedia ニュース

Googleの+1ボタンにスニペットが追加。Microdataでサークルへの投稿も管理

昨日、なにかのサイトを見ていた際にいつも通り(?)にGoogleの+1ボタンを押すと、Google+ への投稿と思わしきコメント欄が表れ、
何かしらのプラグイン?と思い、ちょっといいなぁと思っていたところ、実際に機能の拡張があったみたいですね。

たしかに、今まで+1 ボタンを押してもSERP で表示されるほか、Google プロフィールページでしかとくに見たりすることがなかったですしね…。
※”Google” 自体がソーシャルネットワークとすると別?かも知れませんが..

Both sharing from +1 and inline annotations are rolling out fully over the next few days. To test these improvements right now, join our Platform Preview group.

Share bubble(sharebox?)というみたいで、今後ロールアウトされるらしいのですが、The Google+ Project(グループ)のPlatform Preview group に入ると先に使えるようになるそうで、
さっそく、そのGoogle グループに入ってみたところ、すぐに反映されて使えるようになりました。

Platform Preview group に入るとすぐに使えるように
※でも、昨日見たのはなんだったのか…

サイト管理者としては、+1 ボタンを押された際に表示される、「タイトル」、「説明文」、「イメージ(画像)」を、
Facebook のOpen Graph protocol ライクにMicrodata で設定できるそうです。

話はそれますが、 Microformats やYahoo! SearchMonkey のRDFaが、少し前にschema.org に統合され地味に嬉しかったのですが、

それまで補完という意味も含め、Microformats、RDFa、Microdata それぞれ同一ページに書いており、
同一ページでフォーマットを組み合わせて使用するのは避けたほうが良いというアナウンスがあり、そんなアレですけど一応、ちょいちょい修正中…。

Google +1ボタンのmicrodata でのタイトル、説明文、イメージ(画像)の指定方法

現状でMicrodata のitemscopeで指定できるitemtype は以下の4つみたいです。

  • Article
  • Local Business
  • Product
  • Other
1
2
3
4
5
<body itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">タイトルです</h1>
  <img itemprop="image" src="image-url"></img>
  <p itemprop="description">説明文です。</p>
</body>

各指定についてはbody内の各タグに、Microdata で指定するのが推奨のようですが、
head内にmetaタグでのOpen Graph protocol の記述でも大丈夫みたいです。

もしかしたら、こちらで既に対応済みのサイトも多いかも知れませんね。
ちなみに、head内でmetaタグにitemprop を指定する方法でも可能らしく、初めて知りました。

1
2
3
<meta itemprop="name" content="Title Of Your +1 Content">
<meta itemprop="description" content="This would be a description of the content your users are +1ing">
<meta itemprop="image" content="images/cool-image.png">

その他、Microdata の指定がない場合、head内のtitle、description が利用され、画像は適切っぽいものを取得するようです。
また、それもない場合は、Google がページ内の適切なものを抜粋してくれるそうです。

詳細についてはこちらに説明があります。
» Adding the +1 Button – +1 Button API – Google Code

非同期での+1 ボタンコード作成ページに今回の拡張スニペットに追加するmicrodata のコードを書きだしてくれるものも設置されてました。
» plusone-button

change_history