4系でOGPタグをいい感じで出力する

例えば、「Omotenashi」テーマのレイアウト用のdefault.phpに記載されているOGPタグをサンプルにさせていただいて、こんな感じで使っています。悩んでらっしゃる方、結構いるんじゃないかなーと思いまして、何かのご参考になれば。
ちなみにTwitterタグは、ざっくりありません。

<?php
//OGP==========
//HOME、固定ページの場合(デフォルト画像を出力)
$siteName = $siteConfig["name"];
	$num = 297; //サイト説明文の文字数制限(本文から297文字抜き出し)
	$str = strip_tags($this->BcBaser->getDescription()); //タグ除去
	$str = str_replace(array("\r\n","\n","\r"), '', $str); //改行除去(最後のダブルコーテーションをシングルコーテーションx2に直してます)
if(mb_strlen($str) >= $num) {
	$description = mb_substr($str, 0,$num-1)."…";
	} else {
	$description = $str;
	}
$title = $this->BcBaser->getTitle(); //ページタイトル95文字以内
$type ="website"; //記事はarticle、それ以外(HOME、固定ページ)はwebsite
$url =$this->BcBaser->getUri($this->BcBaser->getHere());
$publisher = ""; //FacebookページURLあるいはID(FacebookページのFollowボタンを表示できるようになる)
$eyeCatch = "https://***/theme/***/img/ogp/***.jpg"; //固定ページ用のデフォルト画像のフルパス指定

//ブログ記事の場合(アイキャッチ画像を出力)
if (!empty($post)) {
	$type ="article";
	$title = $this->Blog->getPostTitle($post,false)." – ".$siteConfig["formal_name"]; //ページタイトル95文字以内(サイトタイトルを含めない)
	$blogName = $post["BlogContent"]["name"];
	$baseCurrentID = $this->Blog->getcurrentBlogId(); //アイキャッチ画像の保存先Urlを構成するためにブログ実体IDを取得
	$baseCurrentImgUrl = "/files/blog/" . $baseCurrentID . $blogName . "/blog_posts/";
	if($this->Blog->getEyeCatch($post)) {
		$eyeCatch = $this->BcBaser->getUri( $baseCurrentImgUrl . $post["BlogPost"]["eye_catch"]);
		} else {
		$eyeCatch = "https://***/theme/***/img/ogp/***.jpg";
		} //ブログ用のデフォルト画像のフルパス指定(アイキャッチを記事に使わなかった場合)
	}
?>
<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="og:image:width" content="600" />
<meta property="og:image:height" content="600" />
3 Likes

前に「ざっくりTwitterタグはありません」でしたが、たったメタタグ2つで十分だったので、Twitterお使いの方は、以下を追加していただければと。

<meta name="twitter:card" content="summary" /><!-- /見せたいカードの種類 -->
<meta name="twitter:site" content="@ユーザー名" />
2 Likes