ウェブサイト作成用備忘録・１４号：無料レンタルサーバ（PHP使用不可）でogpタグの疑似動的制御を行う

自分はプログラミングの学習を兼ねた作品制作を行う際に[XFREE](https://www.xfree.ne.jp/ "XFREE")の月額無料のHTMLサーバプランを使用しているのですが、無料+広告ナシな分使用できる機能に制限があり、このプランではPHPを使用できない為、OGPタグを動的制御する際に必要なサーバサイドのプログラミングが出来ません（無料+広告アリのPHPプランを使えば良いだけなのですが、広告があるとサイトの雰囲気が台無しになってしまうのです…）

その為、今回はそんな状況下でもogpタグを動的制御**している様に見せかける**為に自分が工夫した内容をご紹介します。
######※ogpタグ自体の解説は↓の様な解説ページが沢山あるので、そちらを見た方がわかりやすいと思います。
https://digitalidentity.co.jp/blog/seo/ogp-share-setting.html

####状況：占いサイトを作成し、占いの結果をSNSにシェアした時に表示されるogpタグの画像の切り替えたい

#####プラン１：占いサイトのメインページと占い結果表示ページを分割し、占いの結果の数だけ結果表示ページを用意する

この方法は主に[4ndan.com](https://4ndan.com/ "4ndan.com")の様なサイトで見かける方法です。
メインページから結果表示ページに遷移する事で、予め結果に応じた内容のogpタグを設定したページからSNSにシェアする事で結果的にogpタグを切り替えている様に見せる事が出来ます。
しかし、今回自分が作成したページは、
**占いスタンバイ**→**スタートボタン**→**占い結果表示**→**SNSシェアボタン表示**までの一連の流れにアニメーション演出を加えたかった為、ページ遷移は行わずに実装する必要がありました。

#####プラン２：占いの結果の数だけ中継用空HTMLを用意し、メインページの占い結果表示画面のSNSシェアボタンURLを書き換える事でページ遷移無しでogpタグだけを切り替えている様に見せかける

#####ステップ１：javascriptで占いコンテンツを作成し、結果に応じてSNSシェアボタンのURLを切り替えを実装する

```javascript

  function 占い結果を反映する関数(占い結果) {
    switch (占い結果) {
      case '結果1':

        // 結果1の表示に必要な諸々の処理を実行

        // SNSシェアボタンのURLを結果1の中継用ページに書き換える
        $("SNSシェアボタンに設定したID").attr("href", "./結果一覧/結果1.html");
        break;

      case '結果2':

        // 結果2の表示に必要な諸々の処理を実行

        // SNSシェアボタンのURLを結果2の中継用ページに書き換える
        $("SNSシェアボタンに設定したID").attr("href", "./結果一覧/結果2.html");
        break;
    }
  }

```

#####ステップ２：中継用空HTMLを占いの結果の数だけ作成する（重要な部分だけ抜粋）

```html

<!-- 検索エンジンにインデックスさせない -->
<meta name="robots" content="noindex, nofollow">
<!-- OGPタグ指定 -->
<meta property="og:url" content="このページのURLを入力" />
<meta property="og:type" content="割愛" />
<meta property="og:title" content="占いの結果を入力" />
<meta property="og:description" content="占いの結果の解説等を入力" />
<meta property="og:site_name" content="サイト名を入力" />
<meta property="og:image" content="占いの結果に応じたイメージ画像のURLを入力" />
<meta name="twitter:card" content="割愛" />
<meta name="twitter:site" content="割愛" />
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function(){
    // ページ読み込み時条件分岐に応じてメインページ or twitterに接続
    $(document).ready(function(){
        let access = document.referrer;
        //占いサイトから中継ページにアクセスしたかどうかを判定
        if(/占いサイトのURL/.test(access)){
            //占いサイトからのアクセスした場合、シェアURLを通してSNSに即座にページ遷移する
            window.location.href = 'https://twitter.com/share?url=占い結果に応じたSNSへのシェア用URL';
        } else {
            //占いサイト以外（SNS側からのアクセス等）からアクセスした場合、即座に占いサイトのTOPページに遷移する
            window.location.href = '../index.html';
        }
    }); 
});
</script>
</body>
</html>

```

###工夫したポイント

####１・中継用の空ページにはメタタグのcontent="noindex, nofollow"設定する事で、中継ページが直接検索されない様にしている

####２・中継ページ読み込み時にjavascriptのdocument.referrerというプロパティを取得する
document.referrerプロパティを取得すると、現在のページから見たアクセス元のURLを取得する事が出来ます。
**※このプロパティはローカル環境では機能しない為、動作はサーバー上で確認する必要があります。**

####３・アクセス元のURLにtestメソッドを使用して、占いサイトからアクセスした場合はSNSにシェアURLを通してページ遷移を行い、外部サイト（SNS側）からアクセスした場合は占いサイトのTOPページに遷移させる
**※testメソッドで確認するURLの文字列からはhttp等の文頭部分は省き、独自ドメイン部分を検索するように指定してください**

限定的なシチュエーションの内容ですが、誰かの参考になれば幸いです。

ちなみに、上記の仕組みを使用した占いサイトはサーバーにアップロードして一般公開までしているのですが…

ここに掲載するのは恥ずかしいので、それはまた別の機会に…