Facebook / MoneyBlogNewz4月3日のリニューアルで、SeesaaブログがOGPに対応しました。
・OGP（Open Graph protocol）対応
OGPタグをブログに追加できます。SNSなどに引用される際にブログの紹介が正しく表示されるようになります。
わーい、
なんかボタン1コ押せば対応完了っぽいな！って思ってたらそうでもなかったので何が必要だったか記録しておきます。
(1) meta情報追加用のSeesaa独自タグを設置
Seesaaブログ管理画面 ＞ 設定 ＞ 詳細設定 ＞ 外部連携 ＞ OGPのタグを追加 で、「追加する」にチェックを入れて「保存」。そうすると、以下のメッセージが。HTMLをいじってる人は自力でやらないといけない模様です。
OGPを表示するには、HTMLを初期化するか、下記のタグをHTML編集で追加してください。
追加するタグ： <% blog.ogp_tag(ar6cle_for_ogp) %>
で、このメッセージのタグ、間違ってます。HTMLを変更してないブログで確かめたら、正しくはこれ↓でした。
<% blog.ogp_tag(article_for_ogp) %>
デザイン ＞ PC ＞ HTML で、
上記タグを<head>と</head>の間に追加して保存（私はこれ↓の次に追加しました）。
<meta http-equiv="Content-Script-Type" content="text/javascript" />
※ タグを手動追加する場合も、設定 ＞ 詳細設定 ＞ 外部連携 ＞ OGPのタグを追加 は必要です。（タグを手動追加しただけでは、Seesaa独自タグからFacebook用メタタグへの変換が実行されない。）
※ Facebookいいね！ボタンは、設定 ＞ 詳細設定 ＞ ソーシャルボタン で設置できます。
(2) xmlns属性の追加
デザイン ＞ PC ＞ HTML で、htmlタグを以下のように書き換えます。<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
↓
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
(3) アプリIDを取得してタグを設置
＋＋以下は、4月に試した際の内容です。2012年7月現在、App IDを取得する（新しいアプリを作成する）にはアカウント認証が必要で、クレジットカード情報を登録するか、携帯のメアド認証をしないといけなくなっているようです。App IDがなくても、ニュースフィードには記事への簡単なリンクが流れます（写真や記事概要は表示されない）。また、自分のプロフィールページには、メタ情報で取得した写真や記事概要も含めたリンクが表示されます。
App IDの代わりに管理者情報を追加してみましたが、ニュースフィードへの表示は簡単なリンクのままでした（写真・記事概要なし）。□□には、FacebookのID番号かユーザーネームを記入します（Facebook IDの調べ方）。
<meta property="fb:admins" content="□□" />
＋＋＋＋＋
Facebook Developersのアプリ作成画面にアクセスして、「新しいアプリケーションを作成」をクリック。
https://developers.facebook.com/apps
以下の内容を入力。
"App Name"
今から作成するアプリの表示名。アプリ一覧などに表示されるもの。
あとで変更可。
"App Namespace"
アプリの名前空間。URLなどに使われる文字列。あとで変更可。
"Web Hosting: Yes, I would like free web hosting provided by Heroku"
Herokuというクラウドホスティングサービスの案内？
チェックしなくても進めた。
セキュリティチェック画面で、表示された文字を入力して送信。
基本設定画面 ＞ アプリをFacebookに結合する方法を選択してください ＞ ウェブサイトをクリック。
サイトURLに今からOGP対応させたいサイトのアドレスを入力して、変更を保存。
基本設定画面で App ID（数字）をコピーし、以下の□□の部分に貼り付ける。
<meta property="fb:app_id" content="□□" />
Seesaa管理画面に戻り、 デザイン ＞ PC ＞ HTML で、
<% blog.ogp_tag(article_for_ogp) %>
の下に
<meta property="fb:app_id" content="□□" />
を追加して保存。
(4) 正しく表示されるかチェック
下記ページ（オブジェクトデバッガー）で、正しく表示されているかチェックする。http://developers.facebook.com/tools/debug
で、たぶん完了。
（'og:description'のエラーは、よくわかりませんが大丈夫っぽいです。ちゃんと表示されるので。）
関連リンク
以下の記事を参考にしました。- SEOの2倍のアクセスを稼ぐFacebook「OGP」と「いいね！」ボタンの活用術。（ガイアックスソーシャルメディアラボ）
- フェイスブックのいいね！をサイトに追加するならこれはやるべき（ECおもろ!!!）
- FacebookのユーザーIDが分からん！って時の調べ方（メディア【もふ】ねこもふ）
今回のSeesaaリニューアル前に、自力でOGP対応できないか調べたんですが、できなくはないけど結構ややこしくて、後でソース見たとき（OGP対応の件を忘れて）なんでこんなややこしい構成にしたんだって混乱しそうな気がしたので、リニューアルを待ってOGP対応しました。
か、
口座の登録が必要。
