公式OGPの方が機能的に洗練されてきたので、現状では公式OGPを使う事を推奨します。
記事自体は何かの参考になるかもしれないので、このまま残しときますねー！
◇ ◇ ◇
どうも。手探りのままいきなりブログのカスタマイズを始めてしまう方の正宗です。
フェイスブックやミクシィ、グリーの『いいね！』ボタン等で使われているOGP(The Open Graph protocol)ですが、Seesaaがデフォルトで用意してくれている『<% blog.ogp_tag(ar6cle_for_ogp) %>』のタグを使用すると、出力されるページのタイトルやURLはトップページのもので固定され、更にはロゴ画像までSeesaaが用意しているデフォルトのロゴに固定されてしまうので、出来れば自分でOGP用のmetaタグを記述したいと思う人も多いのではないでしょうか？
私もその内の一人です。
でもって、さっそくこのブログのOGP対応を目指してHTMLのカスタマイズを始めたのですが、あれやこれや試行錯誤して予想以上に大変だったので、今日は私がこのブログをOGPに対応させた際のmetaタグの書き方を記しておこうと思います。
SeesaaブログをOGPに対応させたい、あなたの参考になれば。
■ まずはじめに。6つの注意事項
1.腹をくくりましょう。何が起きてもスーパー自己責任です。
2.HTMLのバックアップを事前に絶対に取っておきましょう。そうすれば、少なくとも現状復帰が可能になります。
3.このブログで記述してるOGP用のmetaタグの内容は『title、type、url、image、description、site_name』の6つのみです。
4.metaタグ内容の『title、url』の2つは、ページごとに個別のものを出力する事が出来ます。それ以外は固定になります。
5.descriptionに本文の内容を反映させるのはあきらめましょう。その方が幸せになれます。
6.HTMLの構造タグ『<html>』内にも忘れずに『xmlns:og="http://ogp.me/ns#"』や『xmlns:fb="http://www.facebook.com/2008/fbml"』の文を追加して「OGPに対応しましたよ」と宣言しておきましょう。参考までに書きますと、このブログでは<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="ja" lang="ja">と記述しています。ちなみに私は記述してませんが、ミクシィ用は『xmlns:mixi="http://mixi-platform.com/ns#"』、グリー用は『xmlns:gr="http://gree.jp/ns"』となります。
■ 次に、以下のmetaタグをコピペします
以下の6行のmetaタグをコピーして、あなたのブログのHTMLの『<head>〜</head>』内にペーストします。
↓ 以下をコピペ ↓
<meta property="og:title" content="あなたのブログの<title>〜</title>の間の記述全て" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<% mobile_link_discovery %>" />
<meta property="og:image" content="あなたが用意した画像のURL" />
<meta property="og:description" content="<% blog.description | nl2br | tag_strip %>" />
<meta property="og:site_name" content="<% blog.title %>" />
↑ 以上をコピペ ↑
その後、赤文字の部分をあなた独自のものに修正します。
各行については以下の通りです。
■ 各行ごとの説明
・1行目『og:title』について
あなたのブログの<title>〜</title>の間の記述全てを赤文字の部分にコピペします。<% if:extra_title %>とか書いてあると思いますが、それも含めて全部です。"<title>"及び"</title>"自体はコピペしちゃダメですのでご注意を。これで個別記事のタイトルやカテゴリタイトルもOGP用に出力出来るようになります。
・2行目『og:type』について
"website"で固定します。検索していて"blog"や個別記事のみ"article"で対応する方も見かけましたが、どのページもHTMLで作られている以上"website"が妥当、かつシンプルで良いと思ったので。
・3行目『og:url』について
handheld指定で使われている<% mobile_link_discovery %>を流用します。SeesaaブログではPCと携帯を自動で振り分ける仕様だからだと思いますが、<% mobile_link_discovery %>は常にPC閲覧用の個別ページURLを出力してるので、そのまま使ってしまいましょう。
・4行目『og:image』について
あなたのロゴ画像を用意して下さい。サイズは200×200でPNG（次点でJPGかGIF）のものにしましょう。200×200以下のサイズだと警告が出ます。200×200より上のサイズはどこまで対応してるか私には分かりません。用意した画像をファイルマネージャでアップロードして、そのURLを赤文字の部分に記述して下さい。
・5行目『og:description』について
本来ならそのページの概要を記述するべき部分なのですが、どう頑張っても本文の文字を自動で表示させる事が出来なかったのでブログの説明文で代用しました。無念じゃ。
・6行目『og:site_name』について
ブログの正式名称を表示する部分なので、ブログタイトルで固定します。
■ 最後に、チェックします
設定が終わったら、そのHTMLを保存して下さい。
仕上げにどこか問題が無いかどうかのチェックをしましょう。
フェイスブックが提供しているツールページ、デバッガーにアクセスしてあなたのブログのURLを入力し、結果をチェックしてみて下さい。
どうでしょう？
意図した通りに表示されてますか？
以上でフェイスブック『いいね！』もミクシィチェックも一切ブログに設置していない私からのOGP講座は終了です、お疲れさまでした。
え？
なんでそれでOGPに対応させたのかって？
ロマンだからですよ。
ではでは、また来てね！！
＜追記 2016-10-14 深夜＞
どうも！4年と半年後の正宗です。
2016年も終わりが近い頃になって、ようやくフェイスブック始めてみました（笑）
・ここに来て突然のFacebook
あと、時が経ちSeesaaブログ標準のOGP設定が上手く機能するようになっているのでそちらを使用した方が良い感じです。
