Movable TypeでOGP(Open Graph Protocol)とfaviconの設定を追加するには?

Twitter、Facebook、mixi等でブログ記事のリンクを張られたときの為に、もっと早く設定を修正すべきだったとちょっと後悔してます。

Webアクセス解析を確認したところ、SNSから当ブログの記事が紹介されていることを見つけました。
確認してみると、単なるリンクではなく真っ白な画像と説明が微妙に表示されてるではありませんか。
色々調べてみると、OGPの設定が関係していることが分かりました。
OGPについては以下のサイトの説明をご参照くださいませ。

ferret [フェレット] - Facebook・TwitterのOGP設定方法まとめ

ダッシュボード→[ブログ]→[デザイン]→[テンプレート]からメインページ(index.html)と個別記事のテンプレートを確認したところ、「<meta property="og:○○" content="~" />」のタグが含まれてました。
月別アーカイブや別途追加した全アーカイブのテンプレートからリンクが張られるということは少ないので、デフォルトの状態でも基本的な対応はされていると。
では、何故画像が真っ白になるかと言いますと、og:imageに設定されているURLの画像ファイルがデフォルトのままなのであたり前田のクラッカーということで。
画像を以下の画像に差し替えました。

サイト画像

あまりに単純すぎるだろというツッコミはありまくりかもしれませんが、絵心はなかったので、フリー素材を使い電車猫ロゴを作成しました…
ただ、Twitterで記事をサマリ表示する為には設定が足りないのと、どうせならfaviconも設定したいと欲が出てしまいまして、テンプレートの修正箇所を探しました。
ダッシュボード→[ブログ]→[デザイン]→[テンプレート]→[テンプレートモジュール]→[HTMLヘッダー]に以下の設定を加えれば良いそうです。

<!-- favicon -->
<link rel="shortcut icon" href="(faviconのURL)" type="image/vnd.microsoft.icon" />
<link rel="icon" href="(faviconのURL)" type="image/vnd.microsoft.icon" />
<!-- Twitter card -->
<meta name="twitter:card" content="summary" />

「(faviconのURL)」の部分はICOファイルのURLを指定してください。
電車猫ブログのfaviconは、以下の記事を参考にし、オンラインでフリー素材の画像ファイルをICOファイルに変換しました。

Forgot the Milk. - Faviconをサクサク作ってくれる8つの Faviconジェネレータ サイト

TwitterとFacebookでのOGP表示を確認するには以下のデバッグサイトを利用すると便利です。

Twitter Developers - Card Validator
開発者向けFacebook - デバッガー

og:imageとTwitterカードを設定すると、それっぽいサイトに見えますね(´∀`)(笑)
色々なSNSからリンクされるくらい重要と思われる記事を書かないと無用の長物となってしまいますので頑張ります∠( ̄∧ ̄)