GUSSAN
1
例えば、「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" />
「いいね!」 4
GUSSAN
3
前に「ざっくりTwitterタグはありません」でしたが、たったメタタグ2つで十分だったので、Twitterお使いの方は、以下を追加していただければと。
<meta name="twitter:card" content="summary" /><!-- /見せたいカードの種類 -->
<meta name="twitter:site" content="@ユーザー名" />
「いいね!」 3
GUSSAN
4
最近、debug.logを見ていたら、レイアウトファイルにエラーが出ていることを発見、ここで紹介したOGPタグの出力部分なのがわかったので、すいません!訂正させてください!
該当箇所は、ブログ記事の場合のアイキャッチ画像の出力部分。
$blogName = $post["BlogContent"]["name"];
そもそもこの部分必要ありませんでした。削除お願いします。
併せて、
$baseCurrentImgUrl = "/files/blog/" . $baseCurrentID . $blogName . "/blog_posts/";
部分を
$baseCurrentImgUrl = "/files/blog/" . $baseCurrentID . "/blog_posts/";
に変更していただきたいです。
以上、よろしくお願いします!
「いいね!」 2
GUSSAN
5
同じ様なことで悩んでらっしゃる方も意外に多い様な気がしたのと、トピックの内容がいろいろとごちゃごちゃしていましたので、改めて整理してみました。
prefix属性についても、ブログ記事と(HOME、固定ページ)の場合を条件分岐で出し分けてみました。
OGPタグの出力というトピックのタイトルからすこし広がってしまってますが、パッとみてなるべく分かりやすい様に<head></head>内まで広げて、書いてみました。
Omotenashi、Omotenashi2テーマに限らず、4系であれば、基本汎用的に使えると思います。
参考にしてみてください。
//prefix属性を(HOME、固定ページ)はwebsite、ブログ記事の場合はarticleとなるよう条件分岐==========
<?php if (!empty($post)) { ?>
<head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# article: https://ogp.me/ns/article#">
<?php } else { ?>
<head prefix="og: https://ogp.me/ns# fb: https://ogp.me/ns/fb# website: https://ogp.me/ns/website#">
<?php } ?>
//基本のタグ出力(ページタイトル、概要、キーワードなど)==========
<?php $this->BcBaser->charset() ?>
<?php $this->BcBaser->title() ?>
<?php $this->BcBaser->metaDescription() ?>
<?php $this->BcBaser->metaKeywords() ?>
<?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"; //(HOME、固定ページ)はwebsite、ブログ記事の場合はarticle
$url =$this->BcBaser->getUri($this->BcBaser->getHere());
$publisher = ""; //Facebookページがある場合、URLあるいはID(FacebookページのFollowボタンを表示できるようになる)
$eyeCatch = "https://***.com/theme/***/img/eyecatch_***.jpg"; //固定ページ用のデフォルト画像のフルパス指定
//ブログ記事の場合(アイキャッチ画像を出力)
if (!empty($post)) {
$type ="article"; //ブログ記事なのでarticle
$title = $this->Blog->getPostTitle($post,false)." – ".$siteConfig["formal_name"]; //ページタイトル95文字以内(サイトタイトルを含めない)
$baseCurrentID = $this->Blog->getcurrentBlogId(); //アイキャッチ画像の保存先Urlを構成するためにブログ実体IDを取得
$baseCurrentImgUrl = "/files/blog/" . $baseCurrentID . "/blog_posts/";
if($this->Blog->getEyeCatch($post)) {
$eyeCatch = $this->BcBaser->getUri( $baseCurrentImgUrl . $post["BlogPost"]["eye_catch"]);
} else {
$eyeCatch = "https://***.com/theme/***/img/eyecatch_***.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" /><!-- /画像サイズを600にしています -->
<meta property="og:image:height" content="600" />
<meta name="twitter:card" content="summary" /><!-- /Twitter使ってる場合、見せたいカードの種類 -->
<meta name="twitter:site" content="@ユーザー名" /><!-- /Twitterのユーザー名 -->
//中略。それぞれのテーマごと必要なタグが入ります(トップスライダー、js、cssの読み込み などなど)==========
</head>
「いいね!」 1