Movabletypeでテンプレート毎にOGPの設定

2014.07.30 公開

2017.09.30 更新

HTML

前の記事「国内主要ブログサービスのOGPタイプ(og:type)」でOGPに触れましたが、このブログでは下記のOGPを設定しています。

masuP.netのOGP type
トップページ	記事	プロフィール	アーカイブ
website	article	profile	website

このブログはMovabletype(MT)を利用して構築していますので、MTのテンプレートにOGPの設定をしてやる必要があります。このブログではおおよそ下記のように設定しています。なおプロフィールページ以外にはog:imageの設定はしていません。

MTML

<mt:Ignore>テンプレートの種類を判別して、変数ogp_type以下ogpの値をセット</mt:Ignore>
<mt:Ignore>TOPページ</mt:Ignore>
<mt:If name="main_index">
  <mt:SetVars>
  title=<mt:BlogName encode_html="1" />
  ogp_type=website
  permalink=<mt:BlogURL />
  description=<mt:BlogDescription />
  </mt:SetVars>
<mt:ElseIf name="archive_class">
  <mt:Ignore>個別記事ページ</mt:Ignore>
  <mt:If name="archive_class" eq="entry-archive">
    <mt:SetVars>
    title=<mt:EntryTitle encode_html="1" /> | <mt:BlogName encode_html="1" />
    ogp_type=article
    permalink=<mt:ArchiveLink archive_type="Individual" />
    description=<mt:EntryExcerpt words="0" />
    </mt:SetVars>
  <mt:Ignore>ウェブページ。カスタムフィールドとしてPageOGPTypeを設けて、入力されていたら挿入する。</mt:Ignore>
  <mt:ElseIf name="archive_class" eq="page-archive">
    <mt:If tag="PageOGPType">
      <mt:SetVars>
      title=<mt:PageTitle encode_html="1" /> | <mt:BlogName encode_html="1" />
      ogp_type=<mt:PageOGPType />
      permalink=<mt:ArchiveLink archive_type="Page" />
      description=<mt:PageExcerpt words="0" />
      </mt:SetVars>
    </mt:If>
  <mt:Ignore>カテゴリアーカイブ</mt:Ignore>
  <mt:ElseIf name="archive_class" like="category">
    <mt:SetVars>
    title=カテゴリ「<mt:CategoryLabel encode_html="1" />」の記事一覧 | <mt:BlogName encode_html="1" />
    ogp_type=website
    schema_type=Blog
    permalink=<mt:CategoryArchiveLink />
    <mt:If tag="CategoryDescription">description=<mt:CategoryDescription /></mt:If>
    </mt:SetVars>
  </mt:If>
  <mt:Ignore>アーカイブインデックス。別途、permalink(該当ページのURL), title(該当ページのタイトル)を変数として設定する必要あり</mt:Ignore>
<mt:ElseIf name="archive_index">
  <mt:If name="permalink">
    <mt:SetVars>
    ogp_type=website
    schema_type=Blog
    </mt:SetVars>
  </mt:If>
</mt:If>
<!DOCTYPE html>
<html>
<mt:Ignore>headにprefixを挿入</mt:Ignore>
<head
  <mt:If name="ogp_type"> prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# <mt:Var name="ogp_type" />: http://ogp.me/ns/<mt:Var name="ogp_type">#"
  </mt:If>
>
<mt:If name="ogp_type">
  <meta property="og:type" content="<mt:Var name="ogp_type">" />
  <meta property="og:title" content="<mt:Var name="title">" />
  <mt:If name="permalink">
    <meta property="og:url" content="<mt:Var name="permalink">" />
  </mt:If>
  <mt:If name="ogp_type" eq="profile">
    <mt:Ignore>Profileの場合、og:imageに予め用意した画像をセット</mt:Ignore>
    <meta property="og:image" content="http://masup.net/images/masuP-photo.jpg" />
  </mt:If>
  <mt:If name="ogp_type" eq="article">
    <mt:Ignore>記事型の場合にauthorを追加。</mt:Ignore>
    <meta property="article:author" content="https://www.facebook.com/soichi.masuda" />
  </mt:If>
  <mt:Ignore>共通の値を入力。</mt:Ignore>
  <meta property="og:locale" content="ja_jp" />
  <meta property="fb:admins" content="xxxxxxxxxxxxxxx" />
  <mt:If name="description">
    <meta property="og:description" itemprop="description" content="<mt:Var name="description">" />
  </mt:If>
</mt:If>
</head>

コードにもコメントを記載していますが、もう少し補足するとインデックステンプレート以外は、archive_classを使って個別記事、ウェブページ、カテゴリアーカイブに分けています。ウェブページは内容によって出力内容が変わる想定で、カスタムフィールドを使っています。(例：about » profile) なお、インデックステンプレートはtitleとpermalinkを取得できないので、この記述の前に変数として設定してやる必要があります。

日付別やユーザー別アーカイブは使ってないから設定してないだけですが、基本的にはカテゴリアーカイブのlike="category"をlike="datebased"とかlike="author"にして追記すれば良いと思います。

本来のコードはこれをテンプレート判別とOGP出力のモジュールに分けて使っています。それを統合しただけなのでもしかしたら単体で動かないかも。一応テストしていますが、もしコピペで使って動かない場合はご連絡頂ければ幸いです。» 連絡先