baserCMS 5系でアイキャッチ画像も使って、OGPタグをいい感じで出力する

baserCMS 5系でアイキャッチ画像も使って、OGPタグをいい感じで出力する

以前に、「baserCMS 4系でアイキャッチ画像も使って、OGPタグをいい感じで出力する」 と題してOGPタグの出力コードを紹介しましたが、5系テーマ用に勉強を兼ねてコンバートしてみました。

ポイント

  • コードをbaserCMS5系（v.5.1.5現在）、CakePHP5.x に対応する。
  • コンテンツ毎（固定ページ、ブログ、メールフォームなど）に登録したアイキャッチ画像をog:imageタグに出力する。
  • Twitter、FacebookのOGPタグは、ほぼ対応。
  • 前回の4系OGPタグの出力コードの仕様をあらためて見直した。（コード内のコメントアウトを参照）

事前準備

  • コンテンツ毎に表示させたいアイキャッチ画像が登録されていない場合に表示するデフォルト画像を以下のようにアップロードしておく。
    固定ページ・フォルダ等の場合は、plugins/{利用しているテーマフォルダ}/webroot/img/common/ogp.jpg
    ブログ記事の場合は、plugins/{利用しているテーマフォルダ}/webroot/img/common/blog_ogp.jpg
  • コンテンツ毎に表示させたいアイキャッチ画像がある場合、事前に管理画面の各コンテンツ＞設定＞オプションから登録。
    アイキャッチ画像サイズの設定は、PCサイズ：1200pxを前提にして、Blog->getEyeCatch() を 'imgsize'=>'thumb' で出力します。

詳細

利用中のテーマのレイアウトファイルの<head>タグ内に以下の記述を加える（あるいは、差し替え）。
レイアウトファイルをコンテンツ毎に分けている場合でも、基本は、すべて同様に記述します。

5系テーマのレイアウトファイルの<head>タグ内に標準的に記述されている

    <?php $this->BcBaser->title() ?>
    <?php $this->BcBaser->metaDescription() ?>
    <?php $this->BcBaser->metaKeywords() ?>

の後ろ辺りに、OGPタグ出力用のコードを以下のように加えます。

    <?php
    //OGP
    //=====================================
    $siteName = $this->BcBaser->getSiteName();
    $description = mb_substr($this->BcBaser->getDescription(), 0, 100); //サイト説明文。例：80-100文字で調整
    $title = $this->BcBaser->getTitle(); //ページタイトル95文字以内
    $type ="website"; //記事はarticle, それ以外(HOME、固定ページ）はwebsite
    $url =$this->BcBaser->getUri($this->BcBaser->getHere());
    $publisher = ""; //サイトのFacebookページURLかID。FacebookページのFollowボタンを表示できるようになる。
    $fb_id = ""; //FacebookのAPP ID
    $author = ""; //TwitterCardに表示されるアカウント名
    //固定ページ、フォルダの場合のアイキャッチ画像出力
    $currentContent = $this->BcBaser->getCurrentContent();
    $eyeCatch = $this->BcUpload->uploadImage('eyecatch',
        $currentContent,
        [
            'table' => 'BaserCore.Contents',
            'imgsize' => '',
            'alt' => '',
            'noimage' => $this->BcBaser->getThemeUrl().'img/common/ogp.jpg',
            'output' => 'url',
            'link' => false
        ]
    );
    $trim = '?';
    $eyeCatch = $this->BcBaser->getUri(substr($eyeCatch, 0, strcspn($eyeCatch, $trim))); //取得したURLのクエリー文字列（特定文字「?」以降）を除去し、URIで出力
    //ブログ記事の場合のアイキャッチ画像出力
    if (!empty($post)) {
        $type ="article";
        $num = 100; //説明文の文字数制限。例：80-100文字で調整
        $str = strip_tags($this->Blog->getPostContent($post, true, false, false)); //説明文（概要＋本文から抜き出し）タグ除去
        $str = str_replace(["\r\n","\n","\r"],'', $str); //改行除去
        if(mb_strlen($str) >= $num) {
            $description = mb_substr($str, 0,$num-1)."…";
        } else {
            $description = $str;
        }
        //タイトルにはサイトタイトルを含めない
        $title = $this->Blog->getPostTitle($post,false) . ' – ' . $this->BcBaser->getSiteName(); //ページタイトル95文字以内
        $eyeCatch = $this->Blog->getEyeCatch($post,
            [
                'output'=>'url',
                'imgsize'=>'thumb',
                'noimage'=>$this->BcBaser->getThemeUrl().'img/common/blog_ogp.jpg'
            ]
        );
        $trim = '?';
        $eyeCatch = $this->BcBaser->getUri(substr($eyeCatch, 0, strcspn($eyeCatch, $trim)));
    }
    ?>
    <meta property="article:publisher" content="<?php echo $publisher; ?>">
    <meta property="og:type" content="<?php echo $type; ?>">
    <meta property="og:locale" content="ja_JP">
    <meta property="og:site_name" content="<?php echo $siteName; ?>">
    <meta property="og:title" content="<?php echo $title; ?>">
    <meta property="og:description" content="<?php echo $description; ?>">
    <meta property="og:url" content="<?php echo $url; ?>">
    <meta property="og:image" content="<?php echo $eyeCatch; ?>">
    <meta property="fb:app_id" content="<?php echo $fb_id; ?>">
    <?php // Twitter Cardsの種類指定 ?>
    <meta name="twitter:card" content="summary_large_image">
    <?php // カードフッターで使用されるウェブサイトの@TwitterID（無くてもOK）?>
    <meta name="twitter:site" content="<?php echo $author; ?>">

アイキャッチ画像のサイズの考え方については、「baserCMS 4系でアイキャッチ画像も使って、OGPタグをいい感じで出力する」を参考にしてみてください。たぶん、今でも変わらないと思います。

コメント

コメントする


opk7ZS

Related posts