デフォルトレイアウトと、OGPタグのお話(CakePHP3系) #JavaScript

皆様こんにちは。
今日はCakePHP3系のデフォルトレイアウト(default.ctp)ファイルと、
OGPタグについてお話します。

この記事の結論は、
ogpタグ周りをjavascriptを使用して、
動的に変更する技術を紹介する記事となります。

デフォルトレイアウトって何やねんという方や、
OGPタグって何やねんという方は下記に参考URLを貼り付けましたので、
ご参照いただいた上で本記事をご確認いただけますと幸いです。

【デフォルトレイアウトについて】
*以下ページの『レイアウト』から読み進めてください
https://book.cakephp.org/3.0/ja/views.html#view-layouts

【OGPタグについて】
https://digitalidentity.co.jp/blog/seo/ogp-share-setting.html

■本題
さて、cakephpを使用してWebアプリやサイトを構築していると
デフォルトレイアウト(default.ctp)を使用する事が多々あると思います。
用途は様々ありますが、私はbodyタグ内に各ページのctpファイルを呼び出す使い方が多いです。
以下一例

<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="content-language" content="ja">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <!-- SEO向け 今回は以下metaタグをjsで書き換えるよ-->
    <meta name="description" content="" />
    <meta name="page_title" property="og:title" content="" /> 
    <meta name="type" property="og:type" content="" /> 
    <meta name="desc" property="og:description" content="" />
    <meta name="url" property="og:url" content="" />
    <meta name="site_name" property="og:site_name" content="" />
    <meta name="img_url" property="og:image" content="" />
    <title name="title">テストサイト</title>


    <!-- 各ページごとのcss読み込み -->
    <?php
        　echo $this->Html->css('default');
        　echo $this->fetch('css');
    ?>

</head>
<body>
    <!-- ハンバーガーメニュー押した後に開くグローバルナビ -->
    <nav class="gnav">
        <div class="gnav_wrap">
            <ul class="gnav_menu">
                <li class="gnav_menu_item"><span class="line_effect"><a href="<?php ?>">TOP</a></span></li>
                <li class="gnav_menu_item"><span class="line_effect"><a href="<?php ?>">Menu</a></span></li>
            </ul>
        </div>
    </nav>

    <!-- ハンバーガーメニュー  -->
    <a class="menu">
        <span class="line_top"></span>
        <span class="line_center"></span>
        <span class="line_bottom"></span>
    </a>

    <!-- スムーススクロール -->
    <p id="to_top"><a href="#to_top"></a></p>
    <div class="contents_inner">
        <?php
            echo $this->Flash->render();
            echo $this->fetch('content');//←ここに各ページのctpファイルが読み込まれる
        ?>
    </div>

    <!-- 各SNSのJS読み込み -->
    <script name="twitter_js" async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

    <script name="facebook_js" async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.2"></script>

    <script name="line_js" src="https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js" async="async" defer="defer"></script>

    <!-- 全ページに必要なjsファイルの読み込み -->
    <?php
        echo $this->Html->script('smooth');
        echo $this->Html->script('humburger');
        echo $this->Html->script('default');

        //各ページごとのjsファイルの読み込み
        echo $this->fetch('script');
    ?>

</body>
</html>

そうすると、
ある事が問題となります。

■ぶち当たる問題
記事コンテンツを配置しているページ(show.ctp等)が複数ある場合、
上記一例で上げた 
以下のogpタグを書き換える必要が発生します。
default.ctpにハードコーディングとして、
静的に値を入れると他のページでは使いまわせないですよね。

■どう解決するのか
私はjavascriptを使用して解決しました。

考え方としては

1.default.ctpにcontent=""として、空白値を持たせる

2.各コンテンツのshow.ctpページにcontent=""の空白値を書き換える値を設置する

3.javascriptで2番の値を1番の空白に入れる処理を書く

以下一例


var path = location.pathname ;
if ( path.match(/show/)) {//showページをの場合
    //SEO対策用
    var metadis = document.head.children;
    var metalen = metadis.length;//メタタグの個数を取得
    for(var i = 0; i < metalen; i++){//メタタグの個数分繰り返し処理
        var proper = metadis[i].getAttribute('name');//メタタグのname属性値を取得
        if(proper === 'page_title'){
            var content = document.getElementsByClassName('main_title');//各showページに配置
            var content = content[0]['innerText'];
            var dis = metadis[i];
            document.title = content;
            dis.setAttribute('content',content);
        }else if(proper === 'type'){
            var content = 'blog';
            var dis = metadis[i];
            dis.setAttribute('content',content);
        }else if(proper === 'url'){
            var content = document.getElementsByClassName('url');
            var content = content[0]['baseURI'];
            var dis = metadis[i];
            dis.setAttribute('content',content);
        }else if(proper === 'site_name'){
            var content = document.getElementsByClassName('main_title');
            var content = content[0]['innerText'];
            var dis = metadis[i];
            dis.setAttribute('content',content);
        }else if(proper === 'img_url'){
            var content = document.getElementsByClassName('main_img');
            var content = content[0]['currentSrc'];
            var dis = metadis[i];
            dis.setAttribute('content',content);
        }
    }

}

簡単にですが、
デフォルトレイアウトと、OGPタグのお話について
紹介させていただきました。

もっと良い方法があるよ!等ございましたら、
コメントにてご指摘いただけますと幸いです。

以上です。