Skip to content
Eminence Astro Suite

AppleItunesApp

AppleItunesApp renders the <meta name="apple-itunes-app"> tag that iOS Safari uses to display a Smart App Banner at the top of the browser, linking visitors to an App Store application.

Props

Section titled “Props”

Use either content OR id/argument, not both.

Option 1: Direct content

Section titled “Option 1: Direct content”
proptypedefaultrequireddescription
contentstring-NoDirect content string for the meta tag. When provided, id and argument are ignored.

Option 2: Build from ID and argument

Section titled “Option 2: Build from ID and argument”
proptypedefaultrequireddescription
idstring-NoThe App Store application ID. No tag is rendered when omitted.
argumentstring-NoA URL or deep-link argument passed to the app when the banner is tapped.

Examples

Section titled “Examples”

Basic

Section titled “Basic”

Input:

<AppleItunesApp id="123456789" />

Output:

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

Automatic (using integration settings)

Section titled “Automatic (using integration settings)”

Uses the integration headTags.appleItunesApp value when no prop is provided.

Input:

// in astro.config.mjs integration config
eminence({
  headTags: {
    appleItunesApp: {
      id: "123456789",
      argument: "myapp://open",
    },
  },
});
<AppleItunesApp />

Output:

<meta
  name="apple-itunes-app"
  content="app-id=123456789, app-argument=myapp://open"
/>

Complete

Section titled “Complete”

Input:

<AppleItunesApp id="123456789" argument="myapp://open" />

Output:

<meta
  name="apple-itunes-app"
  content="app-id=123456789, app-argument=myapp://open"
/>

Direct content

Section titled “Direct content”

Input:

<AppleItunesApp content="app-id=123456789, app-argument=myapp://open" />

Output:

<meta
  name="apple-itunes-app"
  content="app-id=123456789, app-argument=myapp://open"
/>

Decisions Made

Section titled “Decisions Made”

Two mutually exclusive prop patterns

Section titled “Two mutually exclusive prop patterns”

The component accepts either a content prop or id/argument props. Mixing both patterns is intentionally disallowed so there is a single source of truth for the generated content value.

Only the itunes tag is rendered

Section titled “Only the itunes tag is rendered”

This component intentionally renders only apple-itunes-app. Related Apple tags (for example apple-mobile-web-app-capable and startup/status-bar tags) are intentionally excluded. See unsupported tags for more information. You should probably use a manifest instead for those.

Source code

Section titled “Source code”
---
import config from "virtual:eminence-astro-suite/head-tags";


import { hasAnyProp } from "../utils";


type Props =
  | {
      /**
       * Use when you already have a fully built Smart App Banner content string.
       * Prefer this for custom ordering/values; do not combine with `id` or `argument`.
       */
      content: string;
      id?: never;
      argument?: never;
    }
  | {
      /**
       * App Store application ID used to build `app-id=<id>`.
       * Required when not using `content`.
       */
      id: string;
      /**
       * Optional deep-link/URL appended as `app-argument=<argument>`.
       * Use when opening a specific in-app route is desired.
       */
      argument?: string;
      content?: never;
    }
  | { content?: never; id?: never; argument?: never };


const { id, argument, content } = (
  hasAnyProp(Astro.props) ? Astro.props : (config.appleItunesApp ?? {})
) as Props;
---


{content && <meta name="apple-itunes-app" content={content} />}


{
  id && (
    <meta
      name="apple-itunes-app"
      content={[`app-id=${id}`, argument && `app-argument=${argument}`]
        .filter(Boolean)
        .join(", ")}
    />
  )
}

Reference

Section titled “Reference”