> ## Documentation Index
> Fetch the complete documentation index at: https://base-a060aa97-danc-alpha-docs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Add Frame Metadata

> Define fc:frame metadata to render rich embeds with launch buttons

Metadata is critical for your app to be discovered. It enables rich embeds shared in the social feed and allows it to be properly indexed.Add `fc:frame` metadata so shared links render an embed with a launch button.

<Frame caption="Metadata enables rich embeds and discovery">
  <img src="https://mintcdn.com/base-a060aa97-danc-alpha-docs/DQxkmvFFVOfBEqAY/images/minikit/social_finding.gif?fit=max&auto=format&n=DQxkmvFFVOfBEqAY&q=85&s=58d73c247ce59bc307c181a434ebee1a" alt="Image of social feed with Mini Apps" width="640" height="480" data-path="images/minikit/social_finding.gif" />
</Frame>

<Warning>
  Place the meta tag in `<head>` and ensure all referenced assets use HTTPS.
</Warning>

### Next.js (generateMetadata)

```ts app/layout.tsx
export async function generateMetadata(): Promise<Metadata> {
  const URL = process.env.NEXT_PUBLIC_URL as string;
  return {
    title: process.env.NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME,
    description: 'Generated by `create-onchain --mini`',
    other: {
      'fc:frame': JSON.stringify({
        version: 'next',
        imageUrl: process.env.NEXT_PUBLIC_APP_HERO_IMAGE,
        button: {
          title: `Launch ${process.env.NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME}`,
          action: {
            type: 'launch_frame',
            name: process.env.NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME,
            url: URL,
            splashImageUrl: process.env.NEXT_PUBLIC_SPLASH_IMAGE,
            splashBackgroundColor: process.env.NEXT_PUBLIC_SPLASH_BACKGROUND_COLOR,
          },
        },
      }),
    },
  };
}
```
