Add Frame Metadata

Add fc:frame metadata so shared links render an embed with a launch button.

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

Next.js (generateMetadata)

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,
          },
        },
      }),
    },
  };
}

Test & deploy

Validate configuration and ship

Embeds & Previews

Minimal metadata and validation steps

⌘I

Introduction

Quickstart

Get Featured

Design & UX Standards

Growth Playbook

Mini App Features

Troubleshooting

Technical Reference

Next.js (generateMetadata)

Test & deploy

Embeds & Previews

​Next.js (generateMetadata)

Test & deploy

Embeds & Previews

Next.js (generateMetadata)