Smart App Bannerとは、iPhoneのSafariでWebページを開いたとき、画面の上部にApp Storeのアプリを案内する帯を出すAppleの仕組みです。ページのhead要素にmetaタグを1行書くだけで表示できます。
記事の本文にApp Storeへのボタンを置いても、読者がそこまでスクロールしなければ目に入りません。かといって、すべてのページにアプリの案内を出すと、記事と関係のないアプリまで勧めることになります。
この記事では、Smart App Bannerの設定方法と、WordPressで記事ごとに出し分ける考え方、表示されないときの確かめ方、効いたかの測り方を説明します。筆者は2026年11月、このサイトでiPhoneアプリを紹介している8本の記事にSmart App Bannerを入れました。そのときの判断を実例として書いています。仕様はAppleの公式ドキュメント「スマートアプリバナーによるアプリのプロモーション」を2026年11月11日に確認しました。
Smart App Bannerとは｜iPhoneのSafariに出るアプリの案内
Smart App Bannerは、Webページの上部に出る、閉じられる小さな帯です。全画面の広告のように読む邪魔をせず、バナーをタップするとApp Storeのアプリのページに移ります。
iPhoneのSafariで虫食い算の記事を開いたときのSmart App Banner（2026年11月11日撮影）
| 読者の状態 | バナーの動き |
|---|---|
| アプリが入っていない | タップするとApp Storeのアプリのページに移る |
| アプリが入っている | タップするとアプリが開く |
| バナーを閉じた | そのWebページに戻っても、バナーは再表示されない |
| 端末がアプリに対応していない・その地域でアプリが配信されていない | バナーは表示されない |
Appleの説明によると、バナーは端末がアプリに対応しているかを自動で判断し、対応していなければ表示されません。表示するかどうかを、サイト側でiPhoneかどうかを見分けて切り替える必要はありません。
Smart App Bannerの設定方法｜metaタグを1行書く
設定は、バナーを出したいページのhead要素に、次のmetaタグを入れるだけです。
<meta name="apple-itunes-app" content="app-id=myAppStoreID, app-argument=myURL">| パラメータ | 必須 | 中身 |
|---|---|---|
| app-id | 必須 | アプリのID（App Storeのアプリのページのリンクで、idのあとに続く数字） |
| app-argument | 任意 | アプリが入っている人に、アプリ内の対応する場所を開かせるためのURL |
app-idは、App Store Connectでアプリを選び「アプリ情報」の「一般情報」に表示されるApple IDでも確かめられます。app-argumentは、アプリの側でURLを受け取って画面を開き分ける作りになっているときだけ意味があります。そうでなければ、app-idだけで十分です。
Smart App Bannerを記事に入れるときの判断
設定そのものは1行ですが、どの記事に出すか、出ないときにどこを見るか、ほかの案内とどう分けるかで効き目が変わります。
WordPressで記事ごとに出し分ける
Smart App Bannerは、そのアプリに関係する記事だけに出すのがおすすめです。Appleの説明も「バナーを表示したい各ページ」にmetaタグを入れる形になっていて、サイト全体に出す前提ではありません。
| 出し方 | 向いている場合 | 気をつけること |
|---|---|---|
| 全ページに同じアプリを出す | サイトとアプリが同じサービス（会員サイトとその公式アプリなど） | アプリと関係のない記事でも、毎回上部に案内が出る |
| 記事ごとに出し分ける | 1つのサイトで複数のアプリや、記事ごとに違うアプリを紹介する | どの記事にどのアプリを出すかの対応を管理する |
筆者のサイトは技術記事が中心で、アプリと関係のある記事は一部だけです。そこで、記事とアプリIDの対応表をテーマに持ち、対応表にある記事のheadにだけmetaタグを出す形にしました。プラグインでも同じことはできますが、出したい記事が数本で、対応を自分で決めたい場合は、テーマで出し分けるほうが余計な機能を入れずに済みます。
対応表に入れたのは、アプリの紹介記事と、アプリと同じ題材を扱う記事です。たとえば痛風管理アプリは、紹介記事と、プリン体の量を一覧にした記事の2本に出しています。
表示されないときの確かめ方
metaタグを入れたのに表示されないときは、まず「出ない条件」に当たっていないかを確かめます。
- iPhoneのSafariで開いているか：Appleの説明はSafari向けで、ほかのブラウザで表示されるとは書かれていない
- 以前にバナーを閉じていないか：閉じたバナーは、そのページに戻っても再表示されない
- シミュレータで見ていないか：Appleの説明に、バナーはiOSシミュレータには表示されないとある。実機で確かめる
- フレームの中で表示していないか：フレーム内ではバナーを表示できない
- アプリが配信されている地域・端末か：配信されていない地域や対応していない端末では表示されない
- metaタグが本当に出ているか：ページのソースを開き、apple-itunes-appのmetaタグとapp-idの数字を確かめる
筆者が入れたときも、確かめはまずページのソースでmetaタグが出ていることを見て、そのあとiPhoneの実機のSafariで表示を見る順にしました。
ボタン・QRコードとの使い分け
Smart App Bannerは、iPhoneのSafariで読んでいる人にだけ出ます。パソコンで読んでいる人や、iPhoneでもほかのブラウザで読んでいる人には届かないので、本文のボタンやQRコードと組み合わせます。
| 読者 | 届く案内 |
|---|---|
| iPhoneのSafari | 上部のSmart App Banner＋本文のボタン |
| iPhoneのほかのブラウザ | 本文のボタン |
| パソコン | 本文のQRコード（iPhoneのカメラで読み取るとApp Storeが開く） |
筆者の記事では、本文のアプリの紹介の節にApp Storeへのボタンを置き、その下にパソコン向けのQRコードを置いています。上部のバナーは、本文まで読み進めない人にも案内が届く入口として使っています。
Smart App Bannerが効いたかの測り方
Smart App Bannerのmetaタグには、どこから来たかを示す値を付けるパラメータがありません。Appleの公式ドキュメントが挙げているパラメータは、app-idとapp-argumentの2つだけです。
そのため、効き目はApp Store Connectのアプリ解析で、流入元の種類から見ます。Appleのヘルプ「Acquisition」では、Webサイトのリンクから来た人は「Web referrer」に数えられ、そのWebサイトが参照元として記録されると説明されています。なお、iOSでSafari以外のブラウザから来た人は、そのブラウザのアプリからの流入（App referrer）に数えられます。
| 案内 | 測り方 |
|---|---|
| 本文のボタン・QRコード | App Storeのリンクにキャンペーンの値（ct）を付け、アプリ解析のキャンペーン別の数字で見る |
| Smart App Banner | アプリ解析の流入元の「Web referrer」で、自分のサイトからの数字を見る |
筆者は、ボタンのリンクを自分のドメインの短縮URLにして、記事から来た人をキャンペーンの値で分けています。バナーから来た人が実際にWeb referrerのどの行に入るかは、入れてから数週間の自社の数字で確かめる予定です。
よくある質問
Q. Smart App BannerはAndroidでも表示されますか？
表示されません。Smart App BannerはAppleの仕組みで、iPhoneのSafari向けです。Androidの読者には、本文のボタンやストアのバッジで案内します。
Q. Smart App Bannerは有料ですか？
無料です。ページのhead要素にmetaタグを1行入れるだけで使えます。広告の出稿や申請は要りません。
Q. バナーを閉じたら、もう表示されませんか？
Appleの説明では、閉じたバナーはそのWebページに戻っても再表示されません。テストで閉じてしまったときは、表示の確かめに別の端末を使うなどの工夫が要ります。
Q. WordPressではプラグインが必要ですか？
必須ではありません。テーマでhead要素にmetaタグを出せば使えます。記事ごとに出し分けたいときは、記事とアプリIDの対応を持たせて、対応する記事にだけ出します。
Q. Smart App Bannerからのダウンロード数は分かりますか？
metaタグに流入元を示す値を付けられないため、App Store Connectのアプリ解析で、流入元のWeb referrer（自分のサイトからの数字）として見ます。本文のボタンと分けて測るには、ボタンのリンクにキャンペーンの値を付けます。
まとめ
- Smart App Bannerは、head要素にapple-itunes-appのmetaタグを1行入れるだけで出せる
- サイト全体ではなく、アプリに関係する記事だけに出し分ける
- 表示されないときは、Safari・閉じた履歴・シミュレータ・フレーム・地域・metaタグの順に確かめる
- iPhoneのSafariにはバナー、パソコンにはQRコード、それ以外には本文のボタンで届ける
- バナーは流入元のWeb referrer、ボタンはキャンペーンの値で、分けて測る
App Storeへのリンクに使うバッジの画像には別のルールがあります。App Store・Google Playバッジの掲載ルールもあわせて確認してください。実際にバナーを入れた記事の例は、虫食い算の解き方などです。