-   topic   - トピックス

[baserCMS]OGPタグをページ毎に設定する

2017年04月17日 技術関係

いつも株式会社ヒニアラタのホームページをご覧いただき誠にありがとうございます。

facebook_ogp.png

今回はbaserCMSで制作したWebサイトで、ページ毎に異なるOGPを設定する場合の手法をご紹介します。プラグインなどを使わずにOGPタグをセットしていきます。

この記事の動作環境

  • baserCMS 3.0.14
  • CakePHP 2.5.9

OGPタグについて

OGPタグはFacebook等でサイトが引用(リンク)された際に利用されるメタタグで、 ページのタイトルやサムネイル画像などの情報をまとめたものです。(以下のリンクが詳しいようです)

参考記事:
今さら聞けない、SNSで情報を拡散するためのOGP入門

baserCMSでOGPタグを利用する方法は幾つかあると思います。多くの場合はレイアウトテンプレート内に記述して一括で処理すると思いますが、今回はページ毎に設定する方法を試してみたいと思います。 固定ページだけでなく、プラグインのコンテンツテンプレート内(View)からも利用できるので、 プラグインの管理画面からアップロードした画像をOGPに設定するといった使い方もできそうです。

BcHtmlヘルパーを使用する

baserCMSではCakePHPのHtmlヘルパーを拡張したBcHtmlヘルパーが利用できます。 下記で使用しているメソッドmeta()は、引数にセットされた値を$this->BcBaser->scripts()が記述されている場所に出力してくれます。

基本的にはどのテーマでも$this->BcBaser->scripts()は、headタグの中に記述されているはずですので、結果的にOGPタグがhead内に出力される事になります。

  
<?php
$this->BcHtml->meta(
  array(
    'property' => 'og:title',
    'content' => 'ここにタイトルが入ります',
  ),
null,
array(
  'inline' => false)
);
?>
  

なお、この記述方法についてはこちらのページを参考にさせて頂きました。ありがとうございました。

固定ページで使用する

固定ページ内で、この手の記述をする場合には「オプション」の中の「コード」欄が便利です。下図のような感じで使用できます。

screen_20170417.png

なお、タイトルと同じような理屈で画像を指定できます。(ここでは、画像はテーマ内の画像フォルダに入っているものとします)

  
<?php
$imageUrl = $this->BcBaser->getThemeUrl();
$this->BcHtml->meta(
  array(
    'property' => 'og:image',
    'content' => $imageUrl.'img/hogehoge.jpg'
  ),
null,
array(
  'inline' => false)
);
?>
  

以上です。いかがでしたでしょうか。皆様のお役に立てれば幸いです。