nextjs-seo-performance

Next.js SEO & Performance

Priority: SEO correctness → Core Web Vitals → Bundle size → Runtime perf. A fast page that isn't indexed is worthless. An indexed page that's slow loses rankings.

---

Quick SEO Audit

curl https://your-site.com/robots.txt
curl https://your-site.com/sitemap.xml
curl -s https://your-site.com | grep -E '<title|<meta name="description|og:image|og:title'
curl -s https://your-site.com | grep 'application/ld+json'
# Core Web Vitals (field data): https://pagespeed.web.dev
# Lighthouse is lab-only — CANNOT measure INP (most failed metric)

---

1. Metadata API

Root Layout

// app/layout.tsx
import type { Metadata, Viewport } from 'next';

// viewport MUST be a separate export — not inside metadata object
export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 5,
  themeColor: [
    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
    { media: '(prefers-color-scheme: dark)', color: '#0a0a0a' },
  ],
};

export const metadata: Metadata = {
  metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL ?? 'https://your-site.com'),
  title: {
    default: 'Site Name — Main Keyword',
    template: '%s | Site Name',
  },
  description: 'Compelling 150–160 char description with primary keyword.',
  openGraph: {
    type: 'website',
    locale: 'en_US',
    siteName: 'Site Name',
    images: [{ url: '/og-image.png', width: 1200, height: 630, alt: 'Site preview' }],
  },
  twitter: { card: 'summary_large_image', images: ['/og-image.png'] },
  alternates: { canonical: '/' },
  robots: {
    index: true,
    follow: true,
    googleBot: { index: true, follow: true, 'max-image-preview': 'large' },
  },
};

Dynamic Metadata (per page)

// app/products/[slug]/page.tsx
type Props = { params: Promise<{ slug: string }> };  // Promise in Next.js 15+

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const product = await getProduct(slug);
  if (!product) return { title: 'Not Found' };
  return {
    title: product.name,               // template in layout applies automatically
    description: product.description.slice(0, 160),
    openGraph: {
      title: product.name,
      images: [{ url: product.image, width: 1200, height: 630, alt: product.name }],
    },
    alternates: { canonical: `/products/${slug}` },
  };
}