iPhone で WEBサイトを閲覧していると、たま〜に下記のようなアプリのバナーを見かけます。

このバナーをどうやってWEBサイトに仕込むのか、調べて試してみたのでメモ。といっても簡単で、iOS 6 以降では次の meta タグが効くので、この meta タグを書いておくと自動でバナーが表示される。

<meta name="apple-itunes-app" content="app-id=[アプリのID？]">

アプリのIDは、App Store で URL に表示されているもの。例えば Instagram の場合は、次のように 389801252 となる。

なので、次のように meta タグを書くと、

<meta name="apple-itunes-app" content="app-id=389801252">

Instagram アプリのバナーが表示される。

もし端末にアプリがダウンロードされていなければ、上記のバナーのように 表示 と表示され App Store にリンクすれるが、もしダウンロード済みの場合は、次のように 開く となる(アプリが起動する)。

ほか

こちらにデモページを置きました(iPhone の Safari で見てください)。
⇒http://hkusu.github.io/iOS_itunesTag_demo/