CakePHP3のOGPはHTMLヘルパーの$this->Html->meta()を使って設定

2019/09/22 2019/09/28

CakePHP3のOGPはHTMLヘルパーとエレメントを利用して設定すると便利

CakePHP3で OGPを設定する方法も用意されている

　
CakePHP3の Cookbookには「OGPを設定する方法はこれです！」という感じの解説はありませんので、検索しても Cookbook以外にも「これ！」という解説の記事は見つかりませんでした。
　
ですが、「CakePHP3でkeywords、DescriptionをHTMLヘルパーを使って設定する」で解説しましたが、CakePHP3では metaタグを編集する HTMLヘルパーが用意されていますので、これを利用すると OGPのタグも設定することができます。
　
　
なお、この記事では OGPのアプリIDの取得方法などについては解説していませんので、別途検索してください。
　
　

CakePHP3で metaタグを編集する基本形

　
「CakePHP3でkeywords、DescriptionをHTMLヘルパーを使って設定する」で解説しましたが、metaタグを編集する基本形は以下のようになります。
記述する場所は、「/src/Template/Topics/view.ctp」などのテンプレートファイルになります。
　

<?= $this->Html->meta("description","ああああ",["block"=>true]); ?>

1	<?= $this->Html->meta("description","ああああ",["block"=>true]); ?>

　
出力結果は以下のようになります。
　

<meta name="description" content="ああああ"/>

1	<meta name="description" content="ああああ"/>

　
　
ちなみに、レイアウトファイル（/src/Template/Layout/default.ctp）の 32行目あたりの「<?= $this->fetch(‘meta’) ?>」の記述があるので、metaタグとして出力されます。
　
　

CakePHP3で metaタグを編集する応用編・OGPのタグを編集

　
「$this->Html->meta()」の 1つ目のパラメーターは、文字列で指定した場合は name属性の値を指定したものとして処理されます。
　
ですが、1つ目のパラメーターを下記のように配列で指定することもでき、配列で指定する場合は、属性とその値をそれぞれ指定することができるようになっています。
　

<?= $this->Html->meta(["property"=>"og:site_name","content"=>"あいう"],null,["block"=>true]); ?>

1	<?= $this->Html->meta(["property"=>"og:site_name","content"=>"あいう"],null,["block"=>true]); ?>

　
上記の記述をすると、出力結果の HTMLは以下のようになります。
　

<meta property="og:site_name" content="あいう"/>

1	<meta property="og:site_name" content="あいう"/>

　
そのため、上記のように配列で OGPに必要な属性を指定することで、OGPの metaタグを編集することができるようになるのです。
　
　
1つ目のパラメーターを配列で指定した場合は、2つ目のパラメーターは無視されるようで、「content」の値も 1つ目のパラメーターの配列の中に入れる必要があります。
　
また、3つ目のパラメーター「"block"=>true」は、metaタグを headタグ内に記述するために必須の設定になります。
　
そのため、2つ目のパラメーターもなにか記述する必要がありますが（何も書かないとエラーになりますが）、何を書いても無視されるため、何を書いても問題ありません。
上記のサンプルのように「null」や「false」などを書いておくと後々混乱せずにすむでしょう。
　
3つ目のパラメーターについては、「CakePHP3でkeywords、DescriptionをHTMLヘルパーを使って設定する」に詳しく書いていますので、そちらを参考にしてください。
　
　

OGPの部分をエレメントとして別ファイルにする方法

　
先に解説した内容で、OGPに必要な metaタグの処理「$this->Html->meta()」をテンプレートファイル内に記述しても OGPとして機能はしますが、いくつものテンプレートに同じような内容を記述する必要があり、メンテナンス性が高くありません。
そのため、OGPの部分はエレメント（パーツ）として別ファイルとして管理したほうが便利になります。
　
　

OGPのタグをエレメントファイル ogpElement.ctpとして編集

　
まず最初に、OGPとして記述する内容をエレメントとして取り出します。
　
生成するファイルのパス付きファイル名は以下になります。
/src/Template/Element/ogpElement.ctp
　
そこに下記の内容を記述します。
　

<?php
echo $this->Html->meta(["property"=>"og:site_name","content"=>"サイト名"],null,["block"=>true]);
echo $this->Html->meta(["property"=>"og:title","content"=>$ogpTitle],null,["block"=>true]);
echo $this->Html->meta(["property"=>"og:type","content"=>"トップページは website、個別ページは article"],null,["block"=>true]);
echo $this->Html->meta(["property"=>"og:url","content"=>$ogpUrl],null,["block"=>true]);
echo $this->Html->meta(["property"=>"og:image","content"=>"サムネイル画像の URL"],null,["block"=>true]);
echo $this->Html->meta(["property"=>"og:description","content"=>$ogpDescription],null,["block"=>true]);
echo $this->Html->meta(["property"=>"fb:app_id","content"=>"FacebookのアプリID"],null,["block"=>true]);
echo $this->Html->meta(["property"=>"og:locale","content"=>"ja_JP"],null,["block"=>true]);
?>

<?php

echo $this->Html->meta(["property"=>"og:site_name","content"=>"サイト名"],null,["block"=>true]);

echo $this->Html->meta(["property"=>"og:title","content"=>$ogpTitle],null,["block"=>true]);

echo $this->Html->meta(["property"=>"og:type","content"=>"トップページは website、個別ページは article"],null,["block"=>true]);

echo $this->Html->meta(["property"=>"og:url","content"=>$ogpUrl],null,["block"=>true]);

echo $this->Html->meta(["property"=>"og:image","content"=>"サムネイル画像の URL"],null,["block"=>true]);

echo $this->Html->meta(["property"=>"og:description","content"=>$ogpDescription],null,["block"=>true]);

echo $this->Html->meta(["property"=>"fb:app_id","content"=>"FacebookのアプリID"],null,["block"=>true]);

echo $this->Html->meta(["property"=>"og:locale","content"=>"ja_JP"],null,["block"=>true]);

　
ここでは「og:title」「og:url」「og:description」を変数としていますが、実際に設定する場合は「og:type」「og:image」も変数として指定する必要があります。
　
　

テンプレートファイル view.ctpの変更

　
そして、各ページのテンプレート側は下記のように修正します。
　
パス付きのファイル名は以下になります。
/src/Template/Topics/view.ctp
　

<?php
$url = (empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
$title = "タイトル1";
$description = "記事の description（記事概要）1";

echo $this->element("ogpElement",["ogpUrl"=>$url,"ogpTitle"=>$title,"ogpDescription"=>$description]);
?>

<?php

$url = (empty($_SERVER['HTTPS']) ? 'http://' : 'https://') . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];

$title = "タイトル1";

$description = "記事の description（記事概要）1";

echo $this->element("ogpElement",["ogpUrl"=>$url,"ogpTitle"=>$title,"ogpDescription"=>$description]);

　
先程作成したエレメントファイルを「$this->element()」で読み込みます。
　
1つ目のパラメーターが、エレメントのファイル名になります。
2つ目のパラメーターが、エレメントに渡す変数を指定箇所になります。配列で指定できますので、必要に応じていくつでも指定することができます。
　
　
これで、OGPに必要なタグを編集することができました。
　
　
今回は、HTMLヘルパーを使って OGPを指定しましたが、オリジナルのブロックを生成し、そこに OGPを編集する方法もあります。
fetch、asignを利用して OGPを編集したい場合は下記の記事を参考にしてください。
CakePHP3にOGPをfetch、asignを利用してテンプレートごとに指定する方法を解説
　
　

サイト全体に共通する処理をページごとに切り替える処理

　
今回は、サイト全体に共通して指定をする必要はあるものの、ページごとにそれぞれ違うテキストを切り替えて編集していく必要がある metaタグの一種である OGPを指定する方法を解説しました。
　
　
同じような考え方をする仕組みとして、下記の記事で書いている titleタグ、h1タグの値を指定する方法や、使用する JavaScriptや CSSをページごとに設定する方法、パンくずを指定する方法、metaタグの「keywords」「description」を指定する方法などにも活用することができます。
CakePHP3で /Layout/defult.ctpにある titleタグ、h1タグを編集する方法
 CakePHP3でページごとに読み込むJavaScript、CSSを変える処理の解説
 CakePHP3でkeywords、DescriptionをHTMLヘルパーを使って設定する
 CakePHP3にOGPをfetch、asignを利用してテンプレートごとに指定する方法を解説
 CakePHP3でパンくずの指定は HTMLヘルパーを使って指定する方法を解説
　
　
これらは、レイアウトファイルに変数を指定しておき、そこに編集する値を各ページ用のテンプレートファイルで指定する、という仕組みです。
　
　

- CakePHP 3.x 4.x 5.x CakePHP3

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです！

Message コメントをキャンセル

※入力いただいたコメントは管理者の承認後に掲載されます。

: CakePHP3にOGPをfetch、asignを利用してテンプレートごとに指定する方法を解説

CakePHP3でOGPを設定する方法を解説。fetch、assignを使用しレイアウトファイルに編集した変数にテンプレートファイルから値を指定する。これを利用してOGPを編集する。

: CakePHP3のHtmlHelperのLink設定のまとめ。mailto、URL、Root／Homeのリンクなども

CakePHP3でHtmlHelperを使ってリンクの設定をする方法のまとめ。基本形からURLを指定、class、id、targetを指定、mailtoのリンク、画像をアンカーに、JavaScriptのダイアログなどの解説。

: CakePHP3でシェルを作成しコマンドラインから実行・CakePHP2との違い

CakePHP3のシェルスクリプトを作成し、コマンドラインから実行する方法を解説。複数単語をつなげる場合の対応方法がCakePHP2より制限が厳しくなったのでCakePHP3の命名規則の確認が必要だ。

: CakePHP3チュートリアルで日付と時刻のDateTimeでエラーが出たときの対処方法

CakePHP3のブックマークチュートリアルには記載ミスもあり、そのまま動かない個所もある。CakePHP3では namespaceを使うようになったので、classを呼び出すときに￥を追加する必要が！

: CakePHP 2.3　連携先のテーブルの項目で条件抽出する場合

アソシエーション（連携）している先のテーブルの項目で条件抽出する際の考え方と注意点をサンプルソースを用いて説明しています。

: CakePHP3のCakeDC/Usersでログインユーザの所有レコードのみ更新、削除する権限管理の設定方法

CakePHP3のユーザ管理、ログイン認証プラグイン「CakeDC/Users」の権限管理を行う方法やアクセスできるコントローラー、アクションを設定、所有権を持つレコードのみ更新できる設定方法を解説。

: CakePHP3で現在処理しているコントローラー名、アクション名を取得する方法

CakePHP3で現在処理しているコントローラー名、アクション名を取得する方法を解説。複数の方法があるが、getParam()メソッドを使う方法が汎用性があって便利かも。

: CakePHPで同一テーブル内の値を比較する条件でレコードを取得する方法

CakePHPの同一テーブルにある項目の値を比較し条件に合致するレコードを取得する方法を解説。［”項目名”=>”値”]ではなく[”項目名 = 項目名”］と書くところがポイント。

: CakePHP4で定数の設定と呼び出し方法の解説（defineとConfigure）

CakePHP4で定数を設定、使用する方法を解説。定数定義はdefineとConfigureを使用する方法を解説。また、bootstrap.phpに直接記述する方法と別のファイルにする方法を解説。

: CakePHP3のインストールでURL rewriting……のエラーが！その解決方法解説

CakePHP3をインストールしたら URL rewriting is not properly configured.のエラーが。原因は.htaccessが有効になっていないこと。httpd.confに設定を追加すればOK。