壽 かおり @kaoritter

og:image をいい感じに設定してくれる、Movable Type のプラグイン『OpenGraphTags』がめっちゃ便利な件について

この記事について

この記事は Movable Type Advent Calendar 2013 の4日目の記事です。

これまでの記事一覧

OpenGraphTags ってどんなプラグイン？

OpenGraphTags とは、記事にあわせた og:image をいい感じに自動で勝手に追加してくれるプラグインです。

詳しくはこちらの動画をどうぞ。 From: OpenGraphTags - ToI

og:image とは、ソーシャルでシェアされたりしたときにサムネイルで表示される記事を代表する画像のこと。

本来ならば、各記事ごとに HTML の meta タグに入れなければならないのですが、このプラグインを使うと、ただいつもどおり記事を公開しているだけで、いい感じに自動で勝手に記事に合わせた og:image を meta に追加してくれるのです。するぷろなどXMLRPC経由での投稿にももちろん対応。

便利すぎて泣ける。

基本は有償ですが、無償＆無保証のオープンソース版もあります。

このプラグインの素晴らしいところ　ベスト３

1. 何もしなくても、勝手に og:image 画像を選んで設定してくれる

以下の順番で、画像を探し、見つかった画像を og:image に指定してくれます。

  • カスタムフィールドの「画像」タイプのフィールドに登録された画像
  • 「ブログ記事アイテム」に登録された画像
  • 「本文」と「続き」の中で使われている画像
  • 関連付けられた「カテゴリ」または「フォルダ」の og:image
  • ブログの og:image

わたしは、カスタムフィールドも、ブログ記事アイテムも使っていません。 なので、新記事を投稿すると記事内の最初の画像が自動で選ばれます。 記事に画像を追加していない場合は、このブログのデフォルトの og:image （木肌みたいなやつ）になります。

と、これをいま調べていて気づいたのですが、カテゴリやフォルダに対してもデフォルトの og:image を設定できるのですね。

つまり、画像なしのMTカテゴリの記事は、MTカテゴリ用のデフォルト og:image を用意しておくことができるということですね。気が利いてる！

2. 複数画像から選びたかったら、MTの編集画面サイドバーから自分で選べる！

記事に画像が複数含まれる場合、この上のロジックのとおり、記事の最初の画像が og:image になります。

ですがもちろん、投稿時や投稿後に記事内複数画像の中から、どれを使うかを選べます。MT6なら、スマホからでももちろん画像選択可能。

20131203185355.png

これは、スマホで見たMT6の記事投稿画面。こんな風に6件の画像の中から好きな画像をその記事のog:imageに指定できます。

3. og:image を、MTのテンプレートの別の箇所でも使える！

＜mt:OGImageURL＞っていうタグで、その記事のog:image画像URLを出力できます。

なので、このサイトのサイドバー（スマホで見ている方は記事の下）のようにサムネイル付きの最新記事リストも、簡単に作ることができるのです。

このプラグインに対する個人的な思い

あれは、2012年のMTDDCのことでした。

MTでブログを書き始めた　ｶｰﾁｬﾝ J( 'ｰ`)し　（ていうかわたし）。

記事ごとに、og:image をいい感じに出したいんだけれどやり方がわからない。こういう仕様のプラグインがあったらいいのになああ。

という、妄想をライトニングトークで語ったのです。

詳細は、（長いですがｗ）こちらの記事をどうぞ：#mtddc 2012で、ｶｰﾁｬﾝが悪乗りプレゼンしてきたので、ネタバレしときます。 - @kaoritter BLOG

そしたら、出来たのが、このプラグイン！わーい！！

つまり、OpenGraphTags は、ｶｰﾁｬﾝ J( 'ｰ`)し のために作られたプラグインなのです！わたしが手放せないのも当然だ。あなたもブロガーなら、きっと手放せなくなります。

本当にありがとう、たかしあまのさん！！

ついでに言うと、MTの会社であるSix Apartは今年で10周年です。

[N] 【Six Apart 10周年】「ネタフル、ニューヨークへ行く！」 関社長にSkypeインタビュー！ #SA10th の記事にある通り、弊社ことSix Apartは今年10周年。米国拠点から世界への再進出へ向け、本格的な投資を始めます。

次の10年の本格的な世界展開に、わたしもがっつりコミットしていきたい所存です。ていうか、わたしもニューヨーク行きたいです！

次の記事は？

明日(12/5)はまだはっきり決まっていないけれど、たぶん滑りこみで記事が上がるはず！

その次(12/6)は、MT6を記念してリリースされた『Movable Type 6 本格活用ガイドブック 』の本の著者のおひとりでもあるかたつむりくんのWWW の Tomohiro Okuwaki さんの予定です。

会社にどっさりおいてあったので、見ましたが、MT6の主要な機能が網羅されていてすごく役立ちそうでした。ちゃんと読もう！

この記事の筆者

壽 かおり @kaoritter

毎日リモートワークで働く、IT企業の広報担当。ネットサービスやガジェット好きです。2009年生まれのむすめが一人。もっと詳しくはプロフィールページをご覧ください。

この筆者の記事一覧

関連記事

前の記事へ

6秒動画のVineをはじめてみた。

次の記事へ

Oggi の付録の theory の万年筆が結構良くて満足