FacebookのOGPをMTに設定する方法

2011/04/28

mtogp.gif

FacebookのOGPをMTに設定する方法をご紹介します。

htmlタグにxmlnsを設定

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xml:lang="ja" lang="ja" xmlns:og="http://opengraphprotocol.org/schema/">

アプリIDを取得

Facebookデベロッパーズサイトのアプリ作成画面にアクセスしてアプリIDを取得します。

http://developers.facebook.com/setup/

「OGP」のタグをテンプレートに組み込む

MTでブログ記事、ウェブページ、インデックステンプレート、タグ、検索機能を使用している事を想定した分岐コードは以下になります。


<MTIf name="main_index">
<meta property="og:title" content="<$MTBlogName$>" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="<$MTBlogURL$>" />
<meta property="og:image" content="<$MTBlogURL$>サムネイル画像までのパス" />
<meta property="og:site_name" content="<$MTBlogName$>" />
<meta property="fb:app_id" content="取得したアプリIDが入ります" />
<MTElseIf name="entry_template">
<meta property="og:title" content="<$MTEntryTitle$>|<$MTBlogName$>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<$MTEntryPermalink$>" />
<mt:Setvarblock name="ogimage">
<mt:EntryAssets sort_order="ascend" lastn="1"><$mt:AssetURL$></mt:EntryAssets>
</mt:Setvarblock>
<meta property="og:image" content="<mt:If name="ogimage"><$mt:GetVar name="ogimage"><mt:Else><$MTBlogURL$>サムネイル画像までのパス</mt:If>" />
<meta property="og:site_name" content="<$MTBlogName$>" />
<meta property="fb:app_id" content="取得したアプリIDが入ります" />
<MTElseIf name="page_template">
<title><$MTPageTitle remove_html="1"$>|<$MTBlogName$></title>
<meta property="og:title" content="<$MTPageTitle$>|<$MTBlogName$>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<$MTPagePermalink$>" />
<meta property="og:image" content="<$MTBlogURL$>サムネイル画像までのパス" />
<meta property="og:site_name" content="<$MTBlogName$>" />
<meta property="fb:app_id" content="取得したアプリIDが入ります" />
<MTElseIf name="category_archive">
<meta property="og:title" content="<$MTArchiveCategory$>|<$MTBlogName$>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<$MTCategoryArchiveLink$>" />
<meta property="og:image" content="<$MTBlogURL$>サムネイル画像までのパス" />
<meta property="og:site_name" content="<$MTBlogName$>" />
<meta property="fb:app_id" content="取得したアプリIDが入ります" />
<MTElse>
<meta property="og:title" content="<$mt:Var name="title"$>|<$MTBlogName$>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<$mt:Var name="searchUrl"$>" />
<meta property="og:image" content="<$MTBlogURL$>サムネイル画像までのパス" />
<meta property="og:site_name" content="<$MTBlogName$>" />
<meta property="fb:app_id" content="取得したアプリIDが入ります" />
</MTIf>

※サムネイル画像は全ページ共通を想定しています。
※検索、タグのページやインデックステンプレートにはタイトルを<$mt:Var name="title"$>URLを<$mt:Var name="searchUrl"$>と任意の変数にあらかじめ設定しておいてください。

詳しくは<遂に公開>SEOの2倍のアクセスを稼ぐFacebook活用術。皆が知らない「いいね!」ボタンと「OGP」の設定方法、超解説をご参考ください。詳しく解説されています。

この記事について