ドキュメント

インストール

  1. ダウンロードページから「OpenGraphTags-x.x.zip」をダウンロードします。(x.xにはバージョン番号が入ります)
  2. ダウンロードしたファイルを展開します
  3. OpenGraphTags-x.x/plugins/OpenGraphTags をインストール先のMTに plugins/OpenGraphTags としてアップロードします
  4. OpenGraphTags-x.x/mt-static/plugins/OpenGraphTags をインストール先のMTに mt-static/plugins/OpenGraphTags としてアップロードします
  5. インストール完了です

インストールが完了すると以下のようになります。

$MT_HOME/
    plugins/
        OpenGraphTags/
    mt-static/
        plugins/
            OpenGraphTags/

テンプレートの編集

HTML ヘッダーを出力するテンプレートに<mt:OpenGraphTags>を追加します。

プラグインの設定

ウェブサイトやブログの「プラグイン設定」で設定します。

各設定項目の意味は以下の通りです。

ブログ記事で有効にする
ブログ記事の編集画面で og:image を設定できるようにします
ウェブページで有効にする
ウェブページの編集画面で og:image を設定できるようにします
外部のサイトから画像を取得
チェックされている場合、ブログ記事やウェブページの og:image に外部のサイト(Flickr等)の画像が指定されると、保存時にプラグインがダウンロードしてアイテムに登録します。外部のサイトの画像を指定して、og:image に正方形の画像を指定することにこだわる場合にはこの項目にチェックする必要があります。
この機能を利用する場合には、MTを動作させているサーバから外部のサーバへ HTTP (または HTTPS) で接続できる必要があります。多くのサーバでは特に設定をしなくても動作すると思いますが、エラーが出る場合にはサーバ環境やMTの設定の確認をしてください。
自動で設定する
チェックされている場合、API経由などの投稿で og:image が未設定で作成されたブログ記事やウェブページに対して。プラグインが自動で og:image を設定します。

ブログの設定

ウェブサイトやブログの「全般設定」ではこのように og:image の画像を指定することができます。

ここで指定した画像は以下の場所で利用されます。

  • インデックステンプレートの og:image
  • ブログ記事やウェブページのデフォルトの og:image
  • (ウェブサイトの場合)配下のブログで og:image が未設定の場合のブログの og:image

指定は必須ではありませんが、指定しておくことを強くお薦めします。

カテゴリの設定

「カテゴリの編集」や「フォルダの編集」でも同じように指定することができます。

ここで指定した画像は以下の場所で利用されます。

  • カテゴリアーカイブの og:image
  • カテゴリ/フォルダを選択した場合のブログ記事/ウェブページの og:image の選択候補

ブログ記事の編集

「ブログ記事の編集」や「ウェブページの編集」では「公開」の下に設定用のインターフェイスが表示されます。

ここでは直接画像を指定するのではなく、編集中の内容に含まれる画像から選択する形になります。候補として表示される画像は以下の通りです。

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

<mt:OpenGraphTags>

Open Graph Protocol 用のメタ情報を埋め込むためのタグをまとめて出力します。

モディファイア

tags="...","..."
出力するタグを指定します
指定しない場合はサポートしている全てのタグが出力されます
指定できる値は以下の通りです
  • site_name
  • title
  • description
  • url
  • image
  • type
width="..." など
<mt:AssetThumbnailURL /> がサポートしているモディファイアを指定すると、og:url の URL に反映されます

使い方

例 - 1

<mt:OpenGraphTags />

結果

<meta property="og:site_name" content="..." />
<meta property="og:title" content="..." />
<meta property="og:description" content="..." />
<meta property="og:url" content="..." />
<meta property="og:image" content="..." />
<meta property="og:type" content="..." />

例 - 2

<mt:OpenGraphTags tags="image","url" />

結果

<meta property="og:image" content="..." />
<meta property="og:url" content="..." />

<mt:OGImageURL>

og:image に設定された画像の URL を出力します。

デフォルトでは以下の順番で、現在のコンテキストから og:image の設定されたオブジェクトを探し、最初に見つかったオブジェクトの og:image を出力します。

  1. ブログ記事/ウェブページ
  2. カテゴリ/フォルダ
  3. ブログ
  4. ウェブサイト

モディファイア

object_type="..."
対象とするオブジェクトのタイプを指定します
指定されたタイプのオブジェクトが現在のコンテキストで見つからなかったり、og:image が設定されていない場合には出力は空になります
指定できる値は以下の通りです
  • entry
  • page
  • category
  • folder
  • blog
  • website
width="..." など
<mt:AssetThumbnailURL /> がサポートしているモディファイアを指定すると、出力される URL に反映されます

使い方

<mt:Ignore>200x200の正方形のサムネイル画像</mt:Ignore>
<img src="<mt:OGImageURL width="200" square="1" encode_html="1" />" />

<mt:OGURL>

og:url に指定するカノニカルURLを出力します。

使い方

<mt:OGURL />

<mt:HasOGImage>

og:image が設定されている場合に内容を出力します。

モディファイア

object_type="..."
対象とするオブジェクトのタイプを指定します
指定されたタイプのオブジェクトが現在のコンテキストで見つからなかったり、og:image が設定されていない場合には出力は空になります
指定できる値は以下の通りです
  • entry
  • page
  • category
  • folder
  • blog
  • website

使い方

<mt:HasOGImage object_type="entry">
  <!-- ブログ記事に og:image が設定されている場合 -->
  <img src="<mt:OGImageURL width="200" square="1" encode_html="1" />" />
<mt:Else>
  <!-- og:image が設定されていない場合 -->
</mt:HasOGImage>

ブログ記事の画像

<mt:OGImageURL>を利用すると、og:image に指定した画像を「ブログ記事の画像」としてサイト内の任意の位置で利用することができます。

<mt:Entries lastn="10">
  <a href="<mt:EntryPermalink />">
    <img src="<mt:OGImageURL width="400" square="1" encode_html="1" />" />
  </a>
</mt:Entries>

カノニカルURL

<mt:OGURL>を利用するとカノニカルURLを簡単に設定することができます。

<link rel="canonical" href="<mt:OGURL />" />