はじめに

以前、無料でiOSとAndroidのストアにリダイレクトするという記事を書いたのですが、OGP設定をできるようにしようと試みたところ、いろいろと進展がありましたので続報です。

Google Apps Scriptでの実装

記事にもあるようにGoogle Apps Scriptで実装していたのですが、いざOGPを実装してCardValidatorを通したところ残念なエラーが遭遇しました。

ERROR: Fetching the page failed because it's denied by robots.txt.

robotからのアクセスを拒否しているようなのでGASは断念しました／(^o^)＼

ホスティングサービス

前回の記事のコメントで頂いていたようにNetlifyなども検討しましたが、「無料」「使い勝手が良さそう」「慣れている」という理由から、GitHub Pagesを使うことにしました。

導入

https://pages.github.com/
の手順のままですね。私の場合は「Project site」→「Choose a theme」を参考にしましたが、テーマは使い方がイマイチわからなかったので、結局スクラッチでHTMLを書きました。

リポジトリとページのURLは次のような関係になっています（usernameとrepositoryが任意）
GitHub: https://github.com/username/repository
Pages: https://username.github.io/repository
※SettingsページにPagesへのリンクがあります。

リダイレクトページの実装

前回の記事からの差分は以下の通りです。

jQueryを使わないようにした
OGP対応

<!DOCTYPE html>
<html>
  <head>
    <meta property="og:title" content="タイトル名" />
    <meta property="og:url" content="https://username.github.io/repository/app_title/index.html" />
    <meta property="og:type" content="game" />
    <meta property="og:image" content="https://username.github.io/repository/image/image.png" />
    <meta property="og:site_name" content="site_name" />
    <meta property="og:description" content="説明文" />
  </head>
  <body>

    <form action='https://itunes.apple.com/app/idxxxxx' method='GET' id='ios'>
      <input type="hidden" name="mt" value="8">
    </form>
    <form action='https://play.google.com/store/apps/details' method='GET' id='android'>
      <input type="hidden" name="id" value="com.keepgamesimple.xxxxx">
    </form>  

    <script type="text/javascript">
    window.addEventListener("DOMContentLoaded", function(){
      if((navigator.userAgent.toLowerCase().indexOf("iphone") > -1) || (navigator.userAgent.toLowerCase().indexOf("ipod") > -1) || (navigator.userAgent.toLowerCase().indexOf("ipad") > -1)) {
        document.getElementById("ios").submit();
      } else if ((navigator.userAgent.toLowerCase().indexOf("android") > -1)) {
        document.getElementById("android").submit();
      } else {
        document.getElementById("ios").submit();
      }
    }, false);
    </script>
  </body>
</html>

実際のコード

OGPに使う画像は1200x630で用意しました。
最初はアイコン画像（512x512）を使ったのですが、Facbookでは上下が思いっきり切れて表示されてしまいます。
画像の確認にはOGP画像シミュレータを使いました。とても便利です。

OGPのチェック

こちらでチェックしておけば、無駄な投稿をせずに表示を確認できます。

こんな感じで表示されるようになりました

実際にリダイレクト

ついでにランディングページも作ってみた

GitHub Pagesを試しているうちに、気づいたらランディングページを作っていましたw
（なんでいままで静的HTMLにGASなんか使ってたんだ＼(^o^)／）

実装とサイトです。

自分はデザインセンスが皆無なのでBootstrapを使いました。
Bootstrapのexampleをまんま使っただけですが、それっぽく仕上がりました。

これだけ簡単にレスポンシブデザインに対応できるのはすごいですね。

ついでに独自ドメインで運用

GitHub Pages + CloudFlare で独自ドメインをSSL化するを参考にさせて頂きました。
httpsに対応できるんですね。すごい。

自分のサイトが出来上がった！素敵！
https://keepgamesimple.com/

次は多言語化に対応する予定。。。

無料でアプリのランディングページやリダイレクトページを作る