ServicesProjectsTechnologiesSolutions
Back to Tools

Next.js SEO Metadata Generator

Instantly generate the perfect export const metadata object for your Next.js 13+ App Router projects. Fully typed and optimized for Open Graph and Twitter Cards.

layout.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  metadataBase: new URL('https://example.com'),
  title: {
    default: 'My Awesome Next.js App',
    template: '%s | My Awesome Next.js App'
  },
  description: 'Built with Next.js 13+ App Router, TailwindCSS, and TypeScript.',
  keywords: ['nextjs', 'react', 'tailwindcss'],
  authors: [{ name: 'John Doe' }],
  creator: 'John Doe',
  alternates: {
    canonical: '/',
  },
  openGraph: {
    type: 'website',
    locale: 'en_US',
    url: 'https://example.com',
    siteName: 'My Awesome Next.js App',
    title: 'My Awesome Next.js App',
    description: 'Built with Next.js 13+ App Router, TailwindCSS, and TypeScript.',
    images: [
      {
        url: '/og-image.png', // Place og-image.png in your public folder
        width: 1200,
        height: 630,
        alt: 'My Awesome Next.js App',
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'My Awesome Next.js App',
    description: 'Built with Next.js 13+ App Router, TailwindCSS, and TypeScript.',
    images: ['/og-image.png'],
    creator: '@my_handle',
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}