Resolve metadata fields

packages/next/src/lib/metadata/generate/alternate.tsx

@@ -2,17 +2,18 @@ import type { ResolvedMetadata } from '../types/metadata-interface'
 
 import React from 'react'
 
-export function ResolvedAlternatesMetadata({
-  metadata,
+export function AlternatesMetadata({
+  alternates,
 }: {
-  metadata: ResolvedMetadata
+  alternates: ResolvedMetadata['alternates']
 }) {
+  if (!alternates) return null
   return (
     <>
-      {metadata.alternates.canonical ? (
-        <link rel="canonical" href={metadata.alternates.canonical.toString()} />
+      {alternates.canonical ? (
+        <link rel="canonical" href={alternates.canonical.toString()} />
       ) : null}
-      {Object.entries(metadata.alternates.languages).map(([locale, url]) =>
+      {Object.entries(alternates.languages).map(([locale, url]) =>
         url ? (
           <link
             key={locale}
@@ -22,8 +23,8 @@ export function ResolvedAlternatesMetadata({
           />
         ) : null
       )}
-      {metadata.alternates.media
-        ? Object.entries(metadata.alternates.media).map(([media, url]) =>
+      {alternates.media
+        ? Object.entries(alternates.media).map(([media, url]) =>
             url ? (
               <link
                 key={media}
@@ -34,8 +35,8 @@ export function ResolvedAlternatesMetadata({
             ) : null
           )
         : null}
-      {metadata.alternates.types
-        ? Object.entries(metadata.alternates.types).map(([type, url]) =>
+      {alternates.types
+        ? Object.entries(alternates.types).map(([type, url]) =>
             url ? (
               <link
                 key={type}

packages/next/src/lib/metadata/generate/basic.tsx

@@ -3,11 +3,7 @@ import type { ResolvedMetadata } from '../types/metadata-interface'
 import React from 'react'
 import { Meta } from './meta'
 
-export function ResolvedBasicMetadata({
-  metadata,
-}: {
-  metadata: ResolvedMetadata
-}) {
+export function BasicMetadata({ metadata }: { metadata: ResolvedMetadata }) {
   return (
     <>
       <meta charSet="utf-8" />
@@ -25,7 +21,8 @@ export function ResolvedBasicMetadata({
       <Meta name="viewport" content={metadata.viewport} />
       <Meta name="creator" content={metadata.creator} />
       <Meta name="publisher" content={metadata.publisher} />
-      <Meta name="robots" content={metadata.robots} />
+      <Meta name="robots" content={metadata.robots?.basic} />
+      <Meta name="googlebot" content={metadata.robots?.googleBot} />
       <Meta name="abstract" content={metadata.abstract} />
       {metadata.archives
         ? metadata.archives.map((archive) => (
@@ -44,13 +41,84 @@ export function ResolvedBasicMetadata({
         : null}
       <Meta name="category" content={metadata.category} />
       <Meta name="classification" content={metadata.classification} />
-      {Object.entries(metadata.other).map(([name, content]) => (
-        <Meta
-          key={name}
-          name={name}
-          content={Array.isArray(content) ? content.join(',') : content}
+      {metadata.other
+        ? Object.entries(metadata.other).map(([name, content]) => (
+            <Meta
+              key={name}
+              name={name}
+              content={Array.isArray(content) ? content.join(',') : content}
+            />
+          ))
+        : null}
+    </>
+  )
+}
+
+export function ItunesMeta({ itunes }: { itunes: ResolvedMetadata['itunes'] }) {
+  if (!itunes) return null
+  const { appId, appArgument } = itunes
+  let content = `app-id=${appId}`
+  if (appArgument) {
+    content += `, app-argument=${appArgument}`
+  }
+  return <meta name="apple-itunes-app" content={content} />
+}
+
+const formatDetectionKeys = [
+  'telephone',
+  'date',
+  'address',
+  'email',
+  'url',
+] as const
+export function FormatDetectionMeta({
+  formatDetection,
+}: {
+  formatDetection: ResolvedMetadata['formatDetection']
+}) {
+  if (!formatDetection) return null
+  let content = ''
+  for (const key of formatDetectionKeys) {
+    if (formatDetection[key]) {
+      if (content) content += ', '
+      content += `${key}=no`
+    }
+  }
+  return <meta name="format-detection" content={content} />
+}
+
+export function AppleWebAppMeta({
+  appleWebApp,
+}: {
+  appleWebApp: ResolvedMetadata['appleWebApp']
+}) {
+  if (!appleWebApp) return null
+  const { capable, title, startupImage, statusBarStyle } = appleWebApp
+
+  return (
+    <>
+      {capable ? (
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+      ) : null}
+      {title ? (
+        <meta name="apple-mobile-web-app-title" content={title} />
+      ) : null}
+      {startupImage
+        ? startupImage.map((image, index) => (
+            <link
+              key={index}
+              href={image.url}
+              media={image.media}
+              rel="apple-touch-startup-image"
+            />
+          ))
+        : null}
+      {statusBarStyle ? (
+        <meta
+          name="apple-mobile-web-app-status-bar-style"
+          content={statusBarStyle}
         />
-      ))}
+      ) : null}
     </>
   )
 }

packages/next/src/lib/metadata/generate/icons.tsx

@@ -22,11 +22,7 @@ function IconLink({ rel, icon }: { rel?: string; icon: Icon }) {
   }
 }
 
-export function ResolvedIconsMetadata({
-  icons,
-}: {
-  icons: ResolvedMetadata['icons']
-}) {
+export function IconsMetadata({ icons }: { icons: ResolvedMetadata['icons'] }) {
   if (!icons) return null
 
   const shortcutList = icons.shortcut

packages/next/src/lib/metadata/generate/meta.tsx

@@ -20,22 +20,51 @@ export function Meta({
   return null
 }
 
+type ExtendMetaContent = Record<
+  string,
+  undefined | string | URL | number | boolean | null | undefined
+>
+type MultiMetaContent =
+  | (ExtendMetaContent | string | URL | number)[]
+  | null
+  | undefined
+
+export function ExtendMeta({
+  content,
+  namePrefix,
+  propertyPrefix,
+}: {
+  content?: ExtendMetaContent
+  namePrefix?: string
+  propertyPrefix?: string
+}) {
+  const keyPrefix = namePrefix || propertyPrefix
+  if (!content) return null
+  return (
+    <React.Fragment>
+      {Object.entries(content).map(([k, v], index) => {
+        return typeof v === 'undefined' ? null : (
+          <Meta
+            key={keyPrefix + ':' + k + '_' + index}
+            {...(propertyPrefix
+              ? { property: propertyPrefix + ':' + k }
+              : { name: namePrefix + ':' + k })}
+            content={typeof v === 'string' ? v : v?.toString()}
+          />
+        )
+      })}
+    </React.Fragment>
+  )
+}
+
 export function MultiMeta({
   propertyPrefix,
   namePrefix,
   contents,
 }: {
   propertyPrefix?: string
   namePrefix?: string
-  contents:
-    | (
-        | Record<string, undefined | string | URL | number>
-        | string
-        | URL
-        | number
-      )[]
-    | null
-    | undefined
+  contents?: MultiMetaContent | null
 }) {
   if (typeof contents === 'undefined' || contents === null) {
     return null
@@ -61,19 +90,11 @@ export function MultiMeta({
           )
         } else {
           return (
-            <React.Fragment key={keyPrefix + '_' + index}>
-              {Object.entries(content).map(([k, v]) => {
-                return typeof v === 'undefined' ? null : (
-                  <Meta
-                    key={keyPrefix + ':' + k + '_' + index}
-                    {...(propertyPrefix
-                      ? { property: propertyPrefix + ':' + k }
-                      : { name: namePrefix + ':' + k })}
-                    content={typeof v === 'string' ? v : v.toString()}
-                  />
-                )
-              })}
-            </React.Fragment>
+            <ExtendMeta
+              namePrefix={namePrefix}
+              propertyPrefix={propertyPrefix}
+              content={content}
+            />
           )
         }
       })}

packages/next/src/lib/metadata/generate/opengraph.tsx

@@ -1,9 +1,10 @@
 import type { ResolvedMetadata } from '../types/metadata-interface'
 
 import React from 'react'
-import { Meta, MultiMeta } from './meta'
+import { ExtendMeta, Meta, MultiMeta } from './meta'
+import { TwitterAppDescriptor } from '../types/twitter-types'
 
-export function ResolvedOpenGraphMetadata({
+export function OpenGraphMetadata({
   openGraph,
 }: {
   openGraph: ResolvedMetadata['openGraph']
@@ -221,3 +222,97 @@ export function ResolvedOpenGraphMetadata({
     </>
   )
 }
+
+function TwitterAppItem({
+  app,
+  type,
+}: {
+  app: TwitterAppDescriptor
+  type: 'iphone' | 'ipad' | 'googleplay'
+}) {
+  return (
+    <>
+      <Meta name={`twitter:app:name:${type}`} content={app.name} />
+      <ExtendMeta namePrefix="twitter:app:id" content={app.id} />
+      <ExtendMeta namePrefix="twitter:app:url" content={app.url} />
+    </>
+  )
+}
+
+export function TwitterMetadata({
+  twitter,
+}: {
+  twitter: ResolvedMetadata['twitter']
+}) {
+  if (!twitter) return null
+  const { card } = twitter
+
+  return (
+    <>
+      <Meta name="twitter:card" content={card} />
+      <Meta name="twitter:site" content={twitter.site} />
+      <Meta name="twitter:site:id" content={twitter.siteId} />
+      <Meta name="twitter:creator" content={twitter.creator} />
+      <Meta name="twitter:creator:id" content={twitter.creatorId} />
+      <Meta name="twitter:title" content={twitter.title?.absolute} />
+      <Meta name="twitter:description" content={twitter.description} />
+      {twitter.images
+        ? twitter.images.map((image) => (
+            <>
+              <Meta name="twitter:image" content={image.url} />
+              <Meta name="twitter:image:alt" content={image.alt} />
+            </>
+          ))
+        : null}
+      {card === 'player'
+        ? twitter.players.map((player) => (
+            <>
+              <Meta
+                name="twitter:player"
+                content={player.playerUrl.toString()}
+              />
+              <Meta
+                name="twitter:player:stream"
+                content={player.streamUrl.toString()}
+              />
+              <Meta name="twitter:player:width" content={player.width} />
+              <Meta name="twitter:player:height" content={player.height} />
+            </>
+          ))
+        : null}
+      {card === 'app' ? (
+        <>
+          <TwitterAppItem app={twitter.app} type="iphone" />
+          <TwitterAppItem app={twitter.app} type="ipad" />
+          <TwitterAppItem app={twitter.app} type="googleplay" />
+        </>
+      ) : null}
+    </>
+  )
+}
+
+export function AppLinksMeta({
+  appLinks,
+}: {
+  appLinks: ResolvedMetadata['appLinks']
+}) {
+  if (!appLinks) return null
+  return (
+    <>
+      <MultiMeta propertyPrefix="al:ios" contents={appLinks.ios} />
+      <MultiMeta propertyPrefix="al:iphone" contents={appLinks.iphone} />
+      <MultiMeta propertyPrefix="al:ipad" contents={appLinks.ipad} />
+      <MultiMeta propertyPrefix="al:android" contents={appLinks.android} />
+      <MultiMeta
+        propertyPrefix="al:windows_phone"
+        contents={appLinks.windows_phone}
+      />
+      <MultiMeta propertyPrefix="al:windows" contents={appLinks.windows} />
+      <MultiMeta
+        propertyPrefix="al:windows_universal"
+        contents={appLinks.windows_universal}
+      />
+      <MultiMeta propertyPrefix="al:web" contents={appLinks.web} />
+    </>
+  )
+}

packages/next/src/lib/metadata/generate/utils.ts

@@ -1,6 +1,6 @@
-export function resolveAsArrayOrUndefined<T = any>(
-  value: T | T[] | undefined | null
-): undefined | T[] {
+export function resolveAsArrayOrUndefined<
+  T extends unknown | readonly unknown[]
+>(value: T | T[] | undefined | null): undefined | T[] {
   if (typeof value === 'undefined' || value === null) {
     return undefined
   }