baserCMSでSNSでシェアしたときに表示される画像など、OGPの設定をする

baserCMSで株式会社RYUSのコーポレートサイトを作りました。そのときにSNSでシェアしたときに表示されるOGPの設定をしました。そのことについて書きます。

baserCMSでOGPの設定をするときはテーマをいじる

baserCMSに限らないかもしれませんが、今回OGPの設定をするためにカスタマイズしたのはテーマの中でした。ということで、使っているテーマによりOGPの出方が違うかもしれません。

いくつかのテーマでOGPの設定を確認してみたのですがその部分まではコーディングされていないものが多かったので、baserCMSで共通的なOGPの付け方を考えてみようと思いました。

今回コーポレートサイトで使わせていただい、logical_jp_baser　というテーマと、デフォルトの　M-SinglePage　でOGPを設定する方法について考えました。

Facebookでシェアしたときに画像などが適切に出るようにOGPの設定をする

とりあえず、私の場合なのですがFacebookでシェアすることが多く、そのときに適切に画像などが表示されるように設定をしたいと思います。

このblogでFacebookにシェアしたときは適切に画像などがでているので、OGP設定をまねたいと思います。

ソースを見ると、

<meta property='og:locale' content='ja_JP'>
<meta property='fb:admins' content='100000870086901'>
<meta property='article:publisher' content='https://www.facebook.com/pages/%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BERYUS/175754762448692' />
<meta property='og:type' content='website'>
<meta property='og:title' content='RYUS blog'>
<meta property='og:url' content='https://usortblog.com/'>
<meta property='og:description' content='株式会社RYUSのblog'>
<meta property='og:site_name' content='RYUS blog'>
<meta property="og:image" content="https://usortblog.com//wp-content/themes/twentyfourteen-ryus/images/logo_name.jpg">

このように設定されていました。

logical_jp_baser の修正

logical_jp_baser テーマではある程度OGP設定がされています。組み込み済みの設定にデータを使いたいので、まず

app\webroot\theme\logical_jp_baser_ryus\config\bootstrap.php

に、自分のサイト用データを入力します。74行目からの

/* Facebookインサイトを利用する場合は、ユーザーIDを指定してください
------------------------------------------------------------- */
global $wsLogFbAdminID;
//$wsLogFbAdminID = '000000000000000';

にFacebookのAdminIDを指定します。(AdminIDについては、「WordPress FacebookのOGPをプラグインなしで指定する！」にありますのでそちらを参照してください)

上記の1行を

$wsLogFbAdminID = '【取得したfb:adminsの15桁ID】';

のように変更します。

画像は、86行目以降の

/* OGP画像があれば、URLを「フルパスで」指定してください
------------------------------------------------------------- */
global $wsLogOGPImg;
//$wsLogOGPImg = 'http://example.com/themed/logical_jp_baser/images/ogp.jpg';

とあるところにシェアされたときに表示したい画像をサーバーにアップロードしておき、その画像URLを指定します。今回の場合は、

$wsLogOGPImg = 'http://ryus.co.jp/theme/logical_jp_baser_RYUS/img/ogpimage.png';

このように指定しました。

Facebookページがある場合は、89行以降の

/* Facebookページ枠を表示する場合はURLを指定してください
------------------------------------------------------------- */
global $wsLogFbPageURL;
$wsLogFbPageURL = 'https://www.facebook.com/basercms';

ここに自分のFacebookページのURLを入力します。今回の場合は、

$wsLogFbPageURL = 'https://www.facebook.com/pages/株式会社RYUS/175754762448692';

このように変更します。

あともう一つのファイルを修正します。

app\webroot\theme\logical_jp_baser_ryus\elements\meta.php

を修正します。

43行目当たりの、

<?php if($this->BcBaser->isHome()): ?>

の上に行を追加して、

<meta property="og:title" content="<?php echo $this->BcBaser->getTitle();?>">
<meta property='og:locale' content='ja_JP'>
<meta property="og:url" content="<?php echo $this->BcBaser->url(null,true);?>">
<?php if($this->BcBaser->isHome()): ?>

Facebookページが無い場合はこの修正で終了です。

Facebookページがある場合は、8行目の

global $wsLogSnsBtn;

のあとに1行付け加えて、

global $wsLogSnsBtn;
global $wsLogFbPageURL;

とします。

45行目当たりの、

<?php else: ?>
<meta property="og:type" content="article">

に、Facebookページに関する記述を追加して、

<?php else: ?>
<meta property="og:type" content="article">
<?php
/* article:publisher ===================== */
if($wsLogFbPageURL) {
echo '<meta property="article:publisher" content="' . $wsLogFbPageURL . '">' . "\n";
}
?>

のようにします。

M-SinglePage　の修正

M-SinglePageをはじめ、OGPが全く指定されていないテーマの修正方法は　</head> という記述のあるファイルを探して、そのタグの直前にOGPに関する記述を追加します。

M-SinglePageの場合は、

app\webroot\theme\m-single_ryus\layouts\default.php

を修正します。

</head>

直前にOGPの指定を入れます。

<meta property='og:locale' content='ja_JP'>
<meta property='og:title' content='<?php echo $this->BcBaser->getTitle();?>'>
<meta property='og:url' content='<?php echo $this->BcBaser->url(null,true);?>'>
<meta property='og:description' content='<?php echo $this->BcBaser->getDescription();?>'> 
<meta property='og:site_name' content='<?php echo $this->BcBaser->siteConfig['formal_name'];?>'>
<meta property="og:image" content="【OGP画像として表示したい画像】">
<meta property='article:publisher' content='【関連する自分のFacebookページURL】' />
<?php if($this->BcBaser->isHome()): ?>
<meta property="og:type" content="website">
<?php else: ?>
<meta property="og:type" content="article">
<meta property='fb:admins' content='【取得したfb:adminsの15桁ID】'>
<?php endif; ?>

FacebookのAdminIDについてはこのページの少し上の方に説明があります。また、Facebookに関する記述はFacebookページを表示したいときだけでいいと思います。
og:site_nameにformal_nameを指定してありますが、サイトによってはnameの方が、OGPとして適切かもしれませんのでその辺はお好みでやってみてください。

これで表示させて、ソースを見ると、

<meta property='og:locale' content='ja_JP'>
<meta property='og:title' content='お知らせ｜XOOPS Cube,NetCommons,WordPress,LAMP,PHP,ソフトウェア開発,イントラネット開発,モジュールカスタマイズ,WEBサイト保守'>
<meta property='og:url' content='http://localhost/ryuscojpb/news/'>
<meta property='og:description' content='<p>株式会社RYUSからのお知らせです。</p>'> 
<meta property='og:site_name' content='株式会社RYUS'>
<meta property="og:image" content="http://ryus.co.jp/theme/logical_jp_baser_RYUS/img/ogpimage.png">
<meta property='article:publisher' content='https://www.facebook.com/pages/株式会社RYUS/175754762448692' />
<meta property="og:type" content="article">
<meta property='fb:admins' content='100000870086901'>

このようにOGPが指定された状態になります。

OGPを指定してあるのに適切に表示されないときは！

OGPを指定してあるのにFacebookでシェアしたときになかなか適切に表示されず、苦労しました(>_<)。いくつかやってそのうちちゃんと表示されるようになったので、どれが良かったのかは分からないのですがやったことを書きます。

Facebookデバッガー

「Facebookの共有で、指定してある画像が表示できなかった場合の対処方法」の方法で、何度か新しくOGPを読み直しました。

baserCMSのキャッシュを消す

管理画面の　システム管理

サーバーキャッシュ削除 をクリックしてキャッシュを消しました。

ということで無事にFacebookで、

このように思った通りのシェアができるようになりました(^^)/