PodcastへのSmart App Bannerを表示する


この記事の対象とする人

自分でPodcastサイトを運営しているPodcaster

Smart App Bannerとは

Smart App Banner(スマートバナーとも言うらしい)というのは、iPhoneからWebサイトを見たときに、上に表示されているアプリダウンロードのバナーみたいなやつのこと。
↓こんなやつ

この記事では、Smart App Bannerの「自分のPodcastへのリンク」版を表示させます。
↓上の方に表示されているやつです。

押すと、Podcastアプリで、自分のPodcastが開きます。

実装

先に、Apple Podcastでの配信URLを確認しておく。
https://podcasts.apple.com/podcast/watahari/id1540412220 のようなURLのはず1。この最後の部分のidに続く10桁数字をコピーしておく。

そして、head内に、下記のmetaタグを書けばOK。

hoge.html
<meta name="apple-itunes-app" content="app-id=(さっきメモした数字)">

上述の例であれば、こんな感じになる。

hoge.html
<meta name="apple-itunes-app" content="app-id=1540412220">

アプリダウンロードのSmart App Bannerと同じ書式で、表示させたいアプリのIDを入れるところを、PodcastのIDにするだけで、不思議なことにPodcastへのリンクになる。

表示確認は実機iPhone/iPadじゃないとできないことに注意。
私は(どうせmetaタグだし試しに本番反映してやろう・・・)と思ってやってみたら、一発でうまくいって嬉しかったです。

参考

公式ドキュメント2ではPodcastでの例は見当たらなかったが、下記のようなサイトで発見され紹介されていた。