OGPを設定してSNSでのシェア表示を改善 [MovableType]

こんな表示だとあまり目立たないけど

こうなるとだいぶ目立つ。
本文中の写真がウォール横幅いっぱいに表示され、ブログの本文が表示されるようになりました。

OGPって何？

OGP（Open Graph Protocol）というのは、FacebookをはじめGoogle+、mixiなどのソーシャルメディアに対して、外部サイトの情報を投稿するための規格で、metaタグに記述することでサイトの情報をSNSに教えることが出来ます。そうすることでサイトがシェアされた時の表示が変わったりするわけです。

写真がない場合（写真があっても出なかったりと謎な時もあるんですが）このようにデフォルトのアイコンが表示されるようにしました。このアイコンはiOSでホームにブックマークした時などに出るようにUPしているやつです。

タイムライン上で目を引くようにするにはとにかく「写真が全て」と言っても過言ではない気がします。
MovableTypeのソースコードはこんな感じ。

<meta property=”og:site_name” content=”maharada.net”>
<meta property=”og:title” content=”<$MTEntryTitle remove_html=”1″$>” />
<meta property=”og:type” content=”article” />
<meta property=”og:url” content=”<$MTEntryPermalink$>” />
<meta property=”og:description” content=”<$MTEntryExcerpt convert_breaks=”0″ words=”120″ $>” />
<meta property=”og:image” content=”<mt:If name=’ogimage’><$mt:GetVar name=’ogimage’><mt:Else><$mt:BlogURL$>/apple-touch-icon.png</mt:If>”>

はじめに上記のソースコードを入力して再構築した時、エラーが出ちゃってあれ？って事になったのですが、原因はMTEntriesタグ系をサイトインデックス構築側に読み込ませてしまったことが原因でした。MTEntriesタグはエントリーの詳細ページに対して作用するものでインデックスではエントリーを特定できないのでコンテクスト外となりエラーになっていたようです。インデックス用にはそれらのタグを外して解決。これはうちのブログの作りの問題。

参考にしたサイトは以下など。

Facebookのデバッガーを使えばOGPの情報がどのようにFacebookに読み込まれているかを確認できます。

このOGP、今更ながら設定したのですが、結構重要だと思います。「1いいね」の拡散力ってバカにならないですからね。1ツイートの拡散力の比ではない印象です。

同じサイズの写真があるのにサムネイルが出たり出なかったりという問題にはFacebookサーバ側のキャッシュの問題があるらしく

Facebookのサムネイル画像が表示されない時の対処法 – 高橋暁子のソーシャルメディア教室

Facebookデバッガーで画像の出ないページをデバッグするとキャッシュがクリアされて表示されることがあるみたいです。これでうちのページの画像も幾つか出るようになりました。記事内には大きめのサイズの画像をUPすることが大事みたいです。