Which metadata fields describe app links in a Twitter app card?

Definition: A Twitter app card is selected with twitter:card set to app. Its platform-specific metadata names the app, identifies it, and can provide a URL that opens an app link for a supported platform.

Key facts

• Next.js's metadata API reference maps twitter.card: 'app' to twitter:card with the value app.
• The same reference maps the nested app.name value to twitter:app:name:iphone, twitter:app:name:ipad, and twitter:app:name:googleplay.
• It maps app.id.iphone, app.id.ipad, and app.id.googleplay to the corresponding twitter:app:id:* tags.
• Its example maps app.url.iphone and app.url.ipad to twitter:app:url:iphone and twitter:app:url:ipad.
• Apple's App Search Programming Guide presents the iPhone name, ID, and URL tags as Twitter Card markup for deep links.

How does Next.js represent the app card?

Next.js puts the card fields under the twitter property of its Metadata object. The app card example sets card to app, then supplies an app object with one shared name, platform-specific IDs, and platform-specific URLs:

twitter: {
  card: 'app',
  app: {
    name: 'twitter_app',
    id: {
      iphone: 'twitter_app://iphone',
      ipad: 'twitter_app://ipad',
      googleplay: 'twitter_app://googleplay',
    },
    url: {
      iphone: 'https://iphone_url',
      ipad: 'https://ipad_url',
    },
  },
}

The reference says that Next.js creates the relevant <head> tags from metadata. It renders the card declaration and the platform fields as follows:

<meta name="twitter:card" content="app" />
<meta name="twitter:app:name:iphone" content="twitter_app" />
<meta name="twitter:app:id:iphone" content="twitter_app://iphone" />
<meta name="twitter:app:id:ipad" content="twitter_app://ipad" />
<meta name="twitter:app:id:googleplay" content="twitter_app://googleplay" />
<meta name="twitter:app:url:iphone" content="https://iphone_url" />
<meta name="twitter:app:url:ipad" content="https://ipad_url" />
<meta name="twitter:app:name:ipad" content="twitter_app" />
<meta name="twitter:app:name:googleplay" content="twitter_app" />

What do the three field families describe?

The twitter:app:name:* fields carry the platform's app name. The twitter:app:id:* fields carry the platform-specific identifier in the Next.js example. The twitter:app:url:* fields carry a URL value for the iPhone and iPad entries shown in that example. The suffix identifies the target platform: iphone, ipad, or googleplay.

Apple's guide gives a parallel iPhone example with myAppName, myAppID, and myURL. It places the three tags in the context of deep links from a website into an app and distinguishes this Twitter Card markup from App Links markup, whose corresponding iOS properties are al:ios:app_name, al:ios:app_store_id, and al:ios:url.

What should a website owner check?

Check the rendered HTML rather than only the framework configuration. The Next.js documentation shows that the input object becomes <meta> elements, so a page inspection should find twitter:card with app and the platform-specific twitter:app:* names, IDs, and URLs that the page is meant to expose. Apple also states that universal links are strongly recommended with deep links instead of a custom URL scheme, and that supported universal links let iOS open the native app with the web URL being viewed.

Related terms

• Which HTML metadata declares a Twitter card with a large image?
• Which Twitter card tag supplies image alternative text?
• How can Twitter card metadata identify a creator and site account?

FAQ

Which value selects an app card?

Set the Next.js twitter.card field to 'app'. Next.js renders that as <meta name="twitter:card" content="app" />.

Which tags identify an iPhone app?

Use twitter:app:name:iphone, twitter:app:id:iphone, and twitter:app:url:iphone. Apple shows these three fields together in its Twitter Card deep-link example.

Does the Next.js example include every platform URL field?

No. Its documented URL object shows iphone and ipad, while its ID object also shows googleplay.

Sources

1. Vercel, "generateMetadata", undated
2. Apple, "App Search Programming Guide: Mark Up Web Content", 15 December 2016

---

Check how a page reads to answer engines. Open the GEO score analyzer