OGPについての説明」、「FacebookのOGPについて」の2回に渡りOGPについて説明しましたが、今回もOGPに関する話です。

Facebook以外でもOGPに対応したSNSは増えている事は説明しましたが、ここでは記事執筆時点でOGPに対応している事が確認できた、mixi、Gree、Google+、LinkedIn のOGPの設定について触れていきたいと思います。

なお、今回の話はこれまでのOGPの話を既に理解していることを前提に話しますので、OGPについて分からない方は先にそれらから読んで下さい。





mixiのOGPについて
GREEのOGPについて
Google+のOGPについて
LinkedInのOGPについて

mixiのOGPについて

mixiのmixiチェックボタンもFacebookのいいね!ボタンと同じようにOGPに対応しています。
なお、ここではmixiチェックボタンの設置方法については触れません。
分からない方は、「ソーシャルボタンの設置の仕方」のmixiの説明をご覧ください。

下の画像はmixiチェックを押した時に表示されるウィンドウです。

ogp-12

「チェックする」ボタンを押すと自分のmixiに記事が表示されます。

タイムライン (スタンダードでも同じです。)

ogp-13


自分のプロフィールには下のように表示されます。

ogp-14

メニューの「チェック」を選択した時。

ogp-15

タイムラインの詳細を見ると次のようになります。(他のところの詳細も基本的には同じような感じになります。)

ogp-16

それではどうすればOGPに対応するか説明していきます。

まず<html>タグにOGPで指定した名前空間に合わせ、下の名前空間を追加します。
xmlns:mixi="http://mixi-platform.com/ns#"
つまり、次のように記述します。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:mixi="http://mixi-platform.com/ns#">
mixiチェックを押したときのタイトルはメタ情報に次のタグを指定します。
<meta property="mixi:title" content="mixi用のタイトル" />
赤字の部分は自分の表示させたいタイトルに合わせて変更してください。

mixiチェックを押したときのタイトルの表示の優先順位は次のようになっております。

1. メタ情報に「mixi:title」が指定されている場合は、そのcontent属性の値が使用される。
2. メタ情報に「og:title」が指定されている場合は、そのcontent属性の値が使用される。
3. <mata>タグのname属性にtitleが指定されている場合は、そのcontent属性が使われる。
4. <title>タグがあればそれが使われる。
5. 上記に当てはまらない場合はチェック対象のURLのドメインが利用される。

次にmixiに表示する説明文を指定するには次のようにします。
<meta property="mixi:description" content="mixi用の説明文" />
赤字の部分は自分の表示させたい説明文に合わせて変更してください。

説明文の優先順位は次の通りです。

1. メタ情報に「mixi:description」が指定されている場合、そのcontent属性の値が使用される。
2. メタ情報に「og:description」が指定されている場合、そのcontent属性の値が使用される。
3. <mata>タグのname属性にdescriptionが指定されている場合は、そのcontent属性が使われる。
4. 上記に当てはまらない場合は、何も表示しない

続いて、画像の指定の仕方について説明します。
mixiでの画像の指定の仕方には3種類あります。
まずは1つ目。
<link rel="mixi-check-image" type="画像フォーマットに対応したMIMEタイプ" href="画像URL">
赤字は各自で画像に合わせて変更してください。
type属性は必須ではありませんが、relとhrefは必須です。
type属性の値のMIMEタイプとはjpegであれば「image/jpeg」、pngであれば「image/png」、gifであれば「image/gif」となります。

2つ目。
<meta property="mixi:image" content="画像URL" />
赤字は各自で画像に合わせて変更してください。

3つ目。
<meta property="og:image" content="画像URL" />
赤字は各自で画像に合わせて変更してください。

以上です。

mixiの場合は画像を指定する場合、複数指定する事が出来ます。複数指定すると、ユーザーがその中から任意の画像を選択して表示するように出来ます。
また記述が無い場合は自動的に画像を拾います。

画像の条件は次の通りになります。
・サムネイル画像に指定できるのは5枚まで
・画像フォーマットはjpeg、png、gif (アニメーションgif除く)
・画像容量は1KB以上400KBまで
・縦横共にサイズは76px以上 (縦横共に180px以上推奨)
・画像URLはhttp対応でhttpsには未対応
あまり利用する事が無いと思いますが、自動取得を禁止する場合は次の通りです。
<meta name="mixi-check-robots" CONTENT="notitle, nodescription, noimage" />
赤字の部分は自動取得されたくない項目を選んで任意の数だけ指定できます。
複数指定する場合はカンマで区切ります。

また、18歳未満非対応のページの場合は次のメタ情報を追加します。
これを指定する事で18歳未満のmixiユーザーの使用制限が課せられます。
<meta property="mixi:content-rating" content="1" />
ここでは説明しませんが、PC以外の機器 (携帯、スマートフォンなど) に関する設定などもあります。詳細は「技術仕様」を参照してください。

長々説明しましたが、OGPの説明の最初の記事で説明したメタ情報をそのまま下の通りに指定すればよく、<html>タグにmixi用の名前空間を指定するだけでOGPには対応できます。
注意点は画像の制限ぐらいです。
<meta property="og:title" content="記事のタイトル" />
<meta property="og:type" content="記事のタイプ" />
<meta property="og:url" content="記事のURL" />
<meta property="og:image" content="表示させたい画像のURL" />
<meta property="og:description" content="記事の説明" />
なお、OGPのテストをするときは、mixiもfacebookと同じように前のOGPのデータが残っているようで、書き変えても直ぐに反映されません。
こちらが調べた時は、メタ情報を変更すると、大体15分ぐらい反映されるまでに時間が掛かりました。
残念ながらキャッシュのクリア方法については調べた範囲では分かりませんでした。


GREEのOGPについて

GreeについてのOGPの説明をしているサイトは少ないようですが、基本的にはほとんど同じようです。

まず<html>タグに以下の名前空間を追加します。
xmlns:gr="http://gree.jp/ns"
facebook、mixiとも合わせて表記すると、次のようになります。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:mixi="http://mixi-platform.com/ns#" xmlns:gr="http://gree.jp/ns">
(GREEのサイトの例では、xmlns:og="http://opengraphprotocol.org/schema/" xmlns:gr="http://gree.jp/ns" の二つの名前空間を用いておりました。xmlns:ogに記載されたURIが他と異なり、サイトによってはxmlns:ogを二つとも書いているところもありました。これは衝突にならないのか? また、URIが異なるのは問題ないのか? といった事が勉強不足で分かりませんでした。)

メタ情報については以下の通りです。
「og:title」必須、100文字以内。
「og:type」推奨、省略すると「その他」として扱われる。
「og:url」推奨、省略すると設置ページのURL
「og:image」推奨、画像のURL
「gr:image_1」、「og:image」に加え、付加的に画像を添付する。
その他にもいくつかメタ情報はありますが、詳細は「Social Feedback」を参照してください。


Google+のOGPについて

Googleの+1ボタンをクリックすると以下のように表示されます。
これは共有バルーンといって、そこに一種のプレビューとして+スニペットが表示されます。
タイトル、サムネイル画像、簡単な説明が表示されます。
画像にカーソルを合わせるとユーザーが候補を切り替えたり、非表示にする事も出来ます。

ogp-17

共有すれば次のように表示されます。

ogp-19


タイトル、画像、説明文の指定方法は、OGPにも対応しておりますが、優先順位がありますので、順番に簡単に説明します。

 1. Schema.org の microdata

Schema.orgのmicrodataと言われても、大半の人が意味が分からないと思います。
Google ウェブマスター ツール ヘルプ に説明が記載されております。

Schema.orgは説明によると、GoogleやMicrosoft、Yahoo!がウェブの改善を目的とし、共同で進めている構造化データマークアップの共通仕様を策定する取り組みだそうです。要するに検索をもっと便利にしようとしているようです。
microdataは、構造化データマークアップの規格の一つで、メタ情報を埋め込むための記述方法だそうです。

これ以上については、自分で検索してみてください。

Facebook Open Graphでは、ユーザーの利便性向上のための検索エンジンが必要とする詳細な情報が提供されていないということで、GoogleではOGPよりもこちらを優先するようで、推奨とまで書かれています。
しかし、まだあまり普及していないという事もあり、OGPで対応した方が今のところは楽だと思います。

まず、Google DeveloperSnippetのページへ行きます。

下の画像のように表示されますので、ページの種類 (OGPのog:typeに当たる) 、タイトル、画像のURL、説明をそれぞれ記述します。
(ブログの記事のページに+1ボタンを設置するならば、ブログ独自のタグを利用する必要があるかと思います)

マークアップの場所は、何も余計なものを表示したくないならば<head>を選択、上手くページデザインできるならば<body>を選択します。

後は右にコードが表示されますので指示通りにセットするだけです。

ogp-18

例えば次のように表示されます
<!-- 次のように html タグを更新して、itemscope 属性と itemtype 属性を含めてください。 -->
<html itemscope itemtype="http://schema.org/Article">

<!-- head 内に次の 3 つのタグを追加してください。 -->
<meta itemprop="name" content="タイトルです">
<meta itemprop="description" content="説明文が表示されます。">
<meta itemprop="image" content="画像URL">

2. OGP

二番手がOGPです。「og:title」、「og:image」、「og:description」の3つが対応しておりますが、これらについては前の記事で説明済みなので省略します。

3. <meta>タグを利用する

タイトルと説明は次のようにメタタグで指定します。画像についてはページ内に適切な画像があれば表示されます。
<meta name="title" content="タイトル" />
<meta name="description" content="説明文" />
4. Googleの自動判別

非推奨となっていますが、上記のいずれも設定されていない場合は、Googleが解析して設定します。

以上です。

画像については、高さ120px以上、幅は100 px 未満の場合はアスペクト比を3.0以下にする必要があります。そうしないとバルーンに表示されません。

また、mixiやfacebookと同様+スニペットのデータはキャッシュの関係ですぐに反映されない場合があるそうです。

Googleでもfacebookと同じように、ページのOGPなどに関する情報を「Structured Data Testing Tool」で調べる事が出来ます。


・LinkedInのOGPについて

日本では、あまり普及してませんがビジネスに特化したSNSであるLinkedInもOGPに対応しております。
重要なのは「og:title」、「og:image」、「og:url」の3つです。

画像に関しては、幅150px、高さ80pxよりも大きくなければなりません。もしも適切なサイズの画像で無い場合は、LinkedInが自動的に選択します。

LinkedInの共有ボタンを押すとウィンドウが開き、下の画像のように表示されます。
(画像はOGP対策をしていない記事なので見にくいですが、左にあります。)

説明文の編集という部分をクリックすると、タイトル、説明文の編集、さらに画像のON/OFFの切り替えが出来ます。
更新に投稿はデフォルトでチェックが入っており、共有時のコメントを追加できます。また、公開範囲を全体に公開するか、コンタクトのあるユーザーのみに公開するか選択できます。
さらに左下のTwitterアイコンのチェックボックスにチェックを入れる事でTwitterに投稿できます。
初回はアプリ連携の確認画面が表示されるので、問題が無ければ許可します。この設定はいつでも変更する事が可能です。

ogp-20

連携するとLinkedInに投稿されると同時に、Twitterにも下の画像のように投稿されます。
URLは自動的に短縮されます。

ogp-22

なお、LinkedInもfacebookなどと同じようにキャッシュに保存されるらしく、一度表示するとOGPのテストで更新しても、しばらくの間は反映されないようです。
mixiと異なり、少なくとも1時間程度では更新されないようです。こちらが確認した限りでは1日経っても反映されませんでした。キャッシュのクリアが出来れば話は別ですが、一週間に一回という話もあるようなので、テストする時は最終段階の時のみにした方が良いかもしれません。


OGP関連-目次


OGP関連-目次


参考URL


1. mixi Developer Center http://developer.mixi.co.jp/ より
mixiチェック 技術仕様 http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/spec_mixi_check/
2. chocolateboard backyard.weblog http://backyard.chocolateboard.net/ より
OGPで指定したサムネイル画像の大きさについて(Facebookとかmixiとか...) http://backyard.chocolateboard.net/201108/ogp_share_image
3. GREE Developer Center https://developer.gree.net/ より
Social Feedback https://docs.developer.gree.net/ja/platform/connect/socialfeedback
4. NAVER Engineer's Blog http://tech.naver.jp/blog/ より
初心者向けschema.org講座 http://tech.naver.jp/blog/?p=1038
5. NAVER Engineer's Blog http://tech.naver.jp/blog/ より
Schema.orgをパーツ化しリッチスニペットを実装する http://tech.naver.jp/blog/?p=1999
6. kots blog http://www.kots.jp/blog/ より
Google+ボタンのスニペットのカスタマイズ http://www.kots.jp/blog/site-structured/6134/
7. Google Developers https://developers.google.com/ より
+1 ボタン https://developers.google.com/+/plugins/+1button/?hl=ja
8. LinkedIn Developers https://developer.linkedin.com/ より
Setting Display Tags for Shares https://developer.linkedin.com/documents/setting-display-tags-shares