Movable Type FacebookとTwitterのOGPサムネイル画像対応

ブログにSNSボタンをつけて自サイトの記事を投稿したら、FacebookとTwitterのサムネイルが空白になっているのに気が付いた。調べてみると、OGPというのに対応しないといけないみたいだ。こんなの知らなかった… MTのテンプレートを見ると、Rainierをベースにしたソースにすでに記述されていたのだけど、条件が合わず、デフォルトの siteicon-sample.png という空白の画像が呼び出されていた。
 

テンプレートのheadを以下のように直した。後述の カスタムフィールド で指定した画像URLが <mt:EntryDataOgimage> に入る。Og:imageが指定されていない場合は、【代わりに表示される画像】になる。twitter:card はとりあえず summary にしといた。

<!-- og:image -->
<meta property="og:image" content="<mt:If tag="EntryDataOgimage"><mt:EntryDataOgimage><mt:Else>【代わりに表示される画像のURL】</mt:If>" />
<meta property="fb:app_id" content="【Facebookの15桁のapp_id】" />
<!-- Twitter -->
<meta name="twitter:site" content="@【TwitterID】" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:image" content="<mt:If tag="EntryDataOgimage"><mt:EntryDataOgimage><mt:Else>【代わりに表示される画像のURL】</mt:If>" />

 

【Facebookの15桁のapp_id】は以下の手順で取得。

  1. Facebookにログインしている状態で https://developers.facebook.com/apps にアクセスする。
  2. [今すぐ登録] を押す。
  3. Facebook開発者として登録 ウインドウで、[はい] を選択して [次へ] を押す。
  4. アカウントの認証で [電話番号] を記入し、[SMSで受け取る] か、[電話で受け取る] を押すと、認証コード が連絡される。[認証コード] に入力して [登録] を押す。
  5. [アプリIDを作成] を押す。
  6. [表示名] に入力する。(一旦、適当でかまわない。自分はNullAppと入力した)
  7. [アプリIDを作成してください] を押す。
  8. [表示されたテキスト画像から読み取れる文字列を入力する。
  9. 表示された画面の左上の アプリID:~~ の数字が app_id 。
 

【TwitterID】は以下の手順で確認。

  1. Twitterにログインしている状態で https://twitter.com/ にアクセスする。
  2. 開いた画面の左にあるプロフィール欄の @~~ がTwitterID
 

MTに カスタムフィールド を追加し、記事でOg:imageを指定できるようにする。
管理画面の左のメニューから カスタムフィールド → 新規 で以下のように作成。

自分の場合、画像はFTPで上げているので、[種類] は [テキスト] にしてURLを入力できるようにした。MT上で画像を上げている場合は、[種類] を [画像] にすると、記事でアップした画像を選択できるようになるみたいです。
 

[記事作成画面] か [記事の編集画面] の右上の [表示オプション] から、[og:image用画像] にチェックを入れておくと、記事記入欄の下に、og:image用画像のURL入力欄が表示される。
 

記事にog:imageを指定して公開・更新したら、どのような見た目になるか以下のサイトで確認ができる。

Facebookの場合
Open Graphオブジェクトデバッガーにアクセスする。


 
  1. URLを入力 に og:image を確認したい記事のURLを入力する。
  2. [新しいスクレイピング情報を取得] を押す。

以上で、下の部分に適用された状態のプレビューが表示される。思った画像が表示されないときは、[シェアダイアログでこれを確認できます。] で開いたウインドウで確認できたら、反映されている。

[新しいスクレイピング情報を取得] は、Facebookに取得されているキャッシュを更新するボタンで、過去の記事で画像を変えたい場合や、新規記事ですぐにFacebookにキャッシュしてもらいたいときにも使える。また、画像だけでなく、meta name="description" なども更新される。

Twitterの場合
Card validator にアクセスする。


 
  1. Card URL に og:image を確認したい記事のURLを入力する。
  2. [Preview card] を押す。

以上で、右に適用された状態のプレビューが表示される。こちらも、Preview を実行したら、Twitterに取得されているキャッシュが更新されるらしい。
 

追記

Card validator を何度も確認していたら、Unable to render Card preview と表示されて受け付けなくなってしまった。本当はドメインを申請してホワイトリストに加えてもらわないといけないらしい。
 

どの記事でもいいので、Card URL に記事のURLを入力して Preview card 押すと下に Request Approvalボタンが表示される。押すと以下の入力欄が表示される。

  • Name:名前を入力(すでに入力されているはず)
  • Email:Twitterに登録しているメールアドレス(すでに入力されているはず)
  • Twitter Username:@ではじまるTwitterユーザーネーム(すでに入力されているはず)
  • Description:サイトの概要(自分は meta name="description" の内容を入力した)
  • Mark my cards as containing sensitive content:アダルトなど、慎重を要するサイトの場合はチェック
  • Website Twitter Username:サイト運営者のTwitterユーザーネーム(Twitter Username と同じにした)
Request Approval を押すと申請される。自分の場合、2時間ほどで申請が通り、プレビューが反映されるようになりました。
 

これで、一応OGPに対応できました。だいぶ前からあった仕様みたいなのに、全然知らなかった。いまごろ?ってやつ…

関連記事
FacebookとTwitterのOGP動画インライン対応できず