OGP（Open Graph Protocol）をMovableTypeに設置しよう

最紀クライアント様から設置して欲しいという要望の多い「OGP（Open Graph Protocol）」（※以下OGPとします。）をMovableTypeに設置する際の方法を纏めてみました。

ちなみにOGPとはFacebookやTwitterをはじめとするソーシャルネットと自分たちが展開しているウェブサイトやブログなどの連携を行うために必要なhtmlソースコードへの記述をルール化したものを指します。

そのOGPを設置する時はhtmlのメタプロパティーにて以下の要素を埋め込むことで実装できます。

メタプロパティーの各要素

og:site_name	ブログもしくはウェブサイトの名称
og:title	ブログ記事もしくはウェブページのタイトル
og:url	ブログ記事もしくはウェブページのURL
og:image	記事中の画像、あるいはブログアイコンなど
og:description	ブログ記事もしくはウェブページの概要
fb:admins	ブログ管理者のfacebookアカウントID Facebookにログインした状態で下記にアクセスしますと簡単に取得できます。 FacebookのユーザーIDを取得する
fb:app_id	Facebookインサイトによるアクセス解析を利用する場合、専用のアプリを作ってそのアプリIDを設置します。

そして実際にMovableTypeに埋め込んで行く際は下記のソースコードをご参照ください。

※上記コードで「こうやった方がええよ！」というアドバイスがありましたらコメントお寄せください。

テンプレートへの埋め込み作業が完了しましたら、適切に設置できているか確認してみましょう！

再構築を実施してテンプレートの内容が反映できましたら、任意の記事のURLをコピーします。
そしてURLリンターというFacebookのデベロッパー向けのチェック画面へ移動し、正常に表示されているかを確認します。

Facebook：URLリンター

こんな感じでOGP（Open Graph Protocol）が設置できるはずです。

是非お試しください！！

<!--共通部分-->
<meta property="og:site_name" content="<$MTBlogName$>" />
<meta property="og:type" content="article" />
<meta property="fb:admins" content="ブログ管理者のfacebookアカウントID" />
<meta property="fb:app_id" content="解析用アプリやコメントアプリ利用時のアプリID" />


<!--トップページの場合-->
<MTIf name="main_index">
<meta property="og:title" content="<$MTBlogName$>" />
<meta property="og:url" content="<$MTBlogURL$>" />
<meta property="og:image" content="ヘッダーのロゴ画像などのパスを入れると良いでしょう" />
<meta property="og:description" content="<$MTBlogDescription$>" />
</MTIf>


<!--カテゴリーアーカイブ-->
<MTIfArchiveType archive_type="Category">
<meta property="og:title" content="<$MTCategoryLabel$>" />
<meta property="og:url" content="<$MTCategoryArchiveLink$>" />
<meta property="og:image" content="<MTEntries lastn="1"><MTAssets lastn="1"><$MTAssetURL$></MTAssets></MTEntries>" />
<meta property="og:description" content="<$MTBlogName$>の「<$MTCategoryLabel$>」に関する記事一覧とか…" />
</MTIfArchiveType>


<!--日付のアーカイブページ -->
<MTIfArchiveType archive_type="MonthlyやYearly">
<meta property="og:title" content="<$MTArchiveLabel$>" />
<meta property="og:url" content="<$MTArchiveLink$>" />
<meta property="og:image" content="<MTEntries lastn="1"><MTAssets lastn="1"><$MTAssetURL$></MTAssets></MTEntries>" />
<meta property="og:description" content="<$MTBlogName$>の「<$MTArchiveLabel$>」の記事一覧とか…" />
</MTIfArchiveType>


<!--個別記事、エントリー -->
<MTIfArchiveType archive_type="Individual">
<MTSetVarBlock name="img1"><MTEntryAssets type="image">images</MTEntryAssets></MTSetVarBlock>
<meta property="og:title" content="<$MTEntryTitle$>" />
<meta property="og:url" content="<$MTEntryPermalink$>" />
<meta property="og:image" content="<MTIf name="img1" like="image"><MTEntryAssets lastn="1"><$MTAssetURL$></MTEntryAssets><MTElse>ロゴ画像などエントリーに画像がない場合の代替画像のパス</MTElse></MTIf>" />
<meta property="og:description" content="<$MTEntryExcerpt convert_breaks="0" words="120" $>" />
</MTIfArchiveType>


<!--ウェブページ-->
<MTIfArchiveType archive_type="Page">
<MTSetVarBlock name="img1"><MTPageAssets type="image">images</MTPageAssets></MTSetVarBlock>
<meta property="og:title" content="<$MTPageTitle$>" />
<meta property="og:url" content="<$MTPagePermalink$>" />
<meta property="og:image" content="<MTIf name="img1" like="image"><MTPageAssets lastn="1"><$MTAssetURL$></MTPageAssets><MTElse>ロゴ画像などページに画像がない場合の代替画像のパス</MTElse></MTIf>" />
<meta property="og:description" content="<$MTPageExcerpt convert_breaks="0" words="120" $>" />
</MTIfArchiveType>

ブログを書いた人：リアライズ

現在コメントは受け付けておりません。ご了承ください。