エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


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

      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」などのテンプレートファイルになります。
 

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

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

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

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

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

 
そのため、上記のように配列で 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
 
そこに下記の内容を記述します。
 

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

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

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

 
先程作成したエレメントファイルを「$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ヘルパーを使って指定する方法を解説
 
 
これらは、レイアウトファイルに変数を指定しておき、そこに編集する値を各ページ用のテンプレートファイルで指定する、という仕組みです。
 
 

CakePHP3の関連記事

CakePHP4のCSS、JavaScript、画像のブラウザへのキャッシュをコントロールする
CakePHP3でレコードを保存(追加、更新、Insert、Update)する複数の方法を紹介
CakePHP3でモデルなしフォームからCSVをアップロードしレコードを更新する方法解説
CakePHP3でPHP Simple HTML DOM Parserを使ってスクレイピングする方法
CakePHP3のInsert On Duplicate Key Update(upsert)構文を解説・バルク処理も
CakePHP3の1対多での連携を中間テーブルを使った多対多の連携に変更するときの手順
CakePHP3でデフォルトのソート条件を設定してユーザの選択肢たソート条件を有効にする方法
CakePHP3で Ajaxを使う方法の解説。3.6以降対応。Successとthenの両方を解説。
CakePHP3でパンくずの指定は HTMLヘルパーを使って指定する方法を解説
CakePHP3にOGPをfetch、asignを利用してテンプレートごとに指定する方法を解説
 
その他の「CakePHP3」に関する記事一覧
 
 

 - CakePHP 3.x 4.x

GoogleAdwords

GoogleAdwords

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

Message

メールアドレスが公開されることはありません。

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

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

  関連記事

CakePHP3のForm Helperの使い方のまとめ

CakePHP3になりフォームヘルパーの使い方も大きく変わりましたので、使い方をまとめました。基本的な使い方からプラスアルファの便利な使い方まで紹介。

CakePHP 2.3で saveの便利な使い方・サンプルソース付き

CakePHPのレコードを保存、更新する際に使う Saveを詳細解説します。

CakePHP3でファイルのアップロード処理を自作・解説付き・その1
CakePHP3でファイルのアップロード処理を自作・解説付き・その1

CakePHP3でファイルをアップロードする処理を、php.netにある「エラーを起こさない」と説明がある処理を参考に作成。サンプルソースとその解説付きで、コピペでも動くし、カスタマイズも簡単!

CakePHP3でデフォルトのソート条件を設定してユーザの選択肢たソート条件を有効にする方法
CakePHP3でデフォルトのソート条件を設定してユーザの選択肢たソート条件を有効にする方法

CakePHP3でデフォルトのソート条件を設定しつつ画面上でユーザがソート条件を選択したときもソート処理を実行させる方法を解説。ソート条件はページネーションの処理として実装。

CakePHP 2.3 ログイン、操作履歴、アクセスログ出力

CakePHPでログインや操作履歴などのアクセスログ出力処理を作成します。

CakePHP 2.3 Search Pluginで検索処理 その4前方一致検索、後方一致検索、不等号による検索、between句による範囲検索

CakePHPの検索プラグイン Search Pluginの検索処理の中で前方一致検索、後方一致検索、不等号による検索、between句による範囲検索の解説です。

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

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

CakePHP3でページごとに読み込むJavaScript、CSSを変える処理の解説
CakePHP3でページごとに読み込むJavaScript、CSSを変える処理の解説

CakePHP3でJavaScriptやCSSを編集する基本形から、それらやテンプレート(エレメント)を特定のテンプレートを読み込んだときのみ編集、実行するための方法、ブロック化について解説。

CakePHP3のルーティング(routes.php)の変更が反映されない時はキャッシュのクリアを
CakePHP3のルーティング(routes.php)の変更が反映されない時はキャッシュのクリアを

CakePHP3でルーティングの設定変更をしたけど反映されない!そんなときは慌てず騒がずキャッシュをクリアしよう!ルーティングの設定もキャッシュされることがあるらしい。

CakePHP3でユーザ定義の定数、変数を設定し、読み込む方法解説
CakePHP3でユーザ定義の定数、変数を設定し、読み込む方法解説

CakePHP3で定数や共通で使う変数をまとめて設定し、プログラム内で読み込む方法を、bootstrap.phpに直接記述する方法と定数ファイルを分ける方法の3つの方法で解説。