この投稿はXOOPS Themes and Templates Advent Calendar 2012の8日目の記事です。

⇒　アドベントカレンダーの参加者リスト
⇒　7日目の投稿デザイナが知っておくべき XOOPS Cube Legacy 2.2 の新機能 by kilica
⇒　bodyにclass設定して、１～３カラム対応のテーマにする方法TwitterBootstrapを使ったテーマで、１～３カラム対応にする方法 by marine_xoops123

今回がAdvent Calendarへの投稿が始めてになりますargonです。よろしくお願いします。

さて、今回は既存のテーマを少しカスタマイズしてOGP対応をする方法の紹介をしたいと思います。
最近はFacebookの利用者も増え、Facebookでいいね！したり自分のウォール等にウェブページのURLを貼ったものを投稿する機会も増えてきたと思います。そのFacebook上で良い感じに表示する設定がOGPになります。

OGPとは

OGPとはThe Open Graph protocolの略でFacebookやGoogle+、mixiなどのSNSで使われている、ウェブページに何を書いてあるかの説明の書き方になります。

The Open Graph protocol(英語)
http://ogp.me/

テーマへのカスタマイズ方法

やり方はわりと簡単です。以下の記述をテーマのメタタグに追加とウェブページ内容にそって修正し表示用の画像を用意するだけです。

theme.html

<meta property="og:title" content="<{$xoops_sitename}>" />
<meta property="og:type" content="website" />
<meta property="og:description" content="<{$xoops_meta_description}>" />
<meta property="og:url" content="<{$xoops_url}>" />
<meta property="og:image" content="<{$xoops_imageurl}>images/ogp_image.png" />

各行ごとに見て行きましょう。
「og:title」はウェブページが名前になります。こちらはSmartyでXOOPSの設定を自動で入力してくれます。
「og:type」はの項目はウェブページが何のページであるかを記します。上記では"website"としましたが、ブログを中心としたウェブページでしたら"blog"、学校なら"school"、会社なら"company"など適切な内容に変更してください。
「og:description」はウェブページの説明になります。こちらもSmartyで記述してあるのでXOOPSの設定と同じものが表示されます。XOOPSの設定は管理画面の「互換カレンダーシステム -> 一般設定 -> METAタグ(Description)」で行えます。ここではフッターの設定も行えます。忘れがちですが部分ですがしっかりと適正な内容を設定しておきましょう。
「og:url」はウェブページのURLです。こちらもSmartyで記述してあるのでXOOPSの設定と同じものになります。
「og:image」ウェブページが記述しているモノの画像になります。こちらもテーマのimagesフォルダの下にogp_image.pngを追加するという形で記述してあります。
画像の内容ついてですが、個人のサイトでしたらその個人のアバター画像、会社のサイトでしたら会社のロゴマーク等適切な画像をリサイズして、テーマのimagesフォルダに設置してください。テーマの中に設置する形で書きましたが、もちろん画像の設置先を変更しても問題ないので、運用しやすいように設定しましょう。
画像のサイズですが規定で縦横200pxになっているので縦横200px以上にしましょう。

確認

設定後に下記のサイトでURLを入力して"デバッグ"をクリックして、確認してみてください。
意図しているよう正しく表示されたでしょうか？
https://developers.facebook.com/tools/debug

最後に

テーマのOGP対応カスタマイズいかがでしたか？記述する部分も少なく画像を1つ用意すれば、すぐできるのでXOOPSウェブサイトのオーナーさんは是非トライしてみてください。