Seo

LCP Optimization with Next.js Image

// ❌ BAD: Unoptimized image kills LCP
<img src="/hero.jpg" alt="Hero" />

// ✅ GOOD: Next.js Image with priority for LCP
import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={630}
  priority // Preloads, disables lazy loading
  placeholder="blur" // Shows blur during load
  blurDataURL="data:image/..." // Optional blur data
  sizes="(max-width: 768px) 100vw, 50vw"
/>

// ✅ GOOD: Static import auto-generates blur
import heroImage from './hero.jpg';

<Image
  src={heroImage}
  alt="Hero"
  priority
  placeholder="blur" // Blur data automatically provided
/>

INP Optimization (< 200ms)

INP has three phases to optimize:

1. Input Delay - Time until event handler starts 2. Processing Time - Event handler execution 3. Presentation Delay - Time to next frame

// ❌ BAD: Long synchronous task blocks interactions
button.addEventListener("click", () => {
  // Heavy computation blocks UI for 500ms
  const result = expensiveCalculation();
  updateUI(result);
});

// ✅ GOOD: Break up with scheduler.yield()
button.addEventListener("click", async () => {
  const data = await fetchData();

  // Yield to allow interactions to process
  await scheduler.yield();

  processData(data);

  await scheduler.yield();

  updateUI();
});

// ✅ GOOD: Debounce rapid interactions
const debouncedSearch = debounce((query) => {
  performSearch(query);
}, 300);

input.addEventListener("input", (e) => {
  debouncedSearch(e.target.value);
});

Key INP strategies:

• Use scheduler.yield() in long tasks (> 50ms)
• Debounce rapid user inputs
• Lazy load below-fold interactivity
• Avoid large DOM updates on interaction

CLS Optimization

// ❌ BAD: CLS - no dimensions on dynamic content
<div className="product-list">
  {products.map(p => <ProductCard key={p.id} product={p} />)}
</div>

// ✅ GOOD: Reserve space with aspect-ratio or fixed height
<div className="product-list min-h-[400px]">
  {products.map(p => <ProductCard key={p.id} product={p} />)}
</div>

// ✅ GOOD: Always set dimensions on images
<Image
  src="/product.jpg"
  alt="Product"
  width={400}  // Prevents CLS
  height={300}
/>

2. Use Next.js Metadata API Correctly

Root Layout: metadataBase + title.template

Critical: Set metadataBase in your root layout. Without it, relative OG image URLs break.

// app/layout.tsx
import { Metadata } from "next";

export const metadata: Metadata = {
  metadataBase: new URL("https://site.com"), // REQUIRED for OG images
  title: {
    default: "Brand Name",
    template: "%s | Brand Name", // Auto-appends to all pages
  },
  description: "Default site description",
  openGraph: {
    siteName: "Brand Name",
    locale: "en_US",
    type: "website",
  },
};

Why metadataBase matters:

• Without it: images: ['/og.png'] → broken URL
• With it: images: ['/og.png'] → https://site.com/og.png

Page-Level Metadata

// app/products/[slug]/page.tsx
import { Metadata } from "next";

export async function generateMetadata({ params }): Promise<Metadata> {
  const product = await getProduct(params.slug);

  return {
    title: product.name, // Becomes "Product Name | Brand Name" via template
    description: truncate(product.description, 155), // Max 155 chars

    alternates: {
      canonical: `/products/${product.slug}`, // Relative OK with metadataBase
    },

    // OpenGraph - use 'product' for e-commerce
    openGraph: {
      type: "product", // NOT 'website' for products
      title: product.name,
      description: truncate(product.description, 155),
      images: [
        {
          url: product.image,
          width: 1200,
          height: 630,
          alt: product.name,
        },
      ],
    },

    twitter: {
      card: "summary_large_image",
      title: product.name,
      description: truncate(product.description, 155),
      images: [product.image],
    },

    robots: {
      index: true,
      follow: true,
    },
  };
}

3. Product Structured Data for Rich Snippets

Google shows price, availability, and reviews in search results. You MUST include:

// Minimum required fields for Product rich snippet
const productJsonLd = {
  "@context": "https://schema.org",
  "@type": "Product",
  name: product.name,
  image: product.images,
  description: product.description,
  sku: product.sku,
  brand: {
    "@type": "Brand",
    name: product.brand,
  },
  offers: {
    "@type": "Offer",
    url: `https://site.com/products/${product.slug}`,
    price: product.price,
    priceCurrency: "USD",
    availability: "https://schema.org/InStock", // or OutOfStock
    priceValidUntil: "2025-12-31", // Required for validity
  },
  // Optional but highly recommended:
  aggregateRating: product.rating
    ? {
        "@type": "AggregateRating",
        ratingValue: product.rating.value,
        reviewCount: product.rating.count,
      }
    : undefined,
};

4. JSON-LD Rendering Pattern

Use the Next.js recommended pattern for safe JSON-LD rendering:

// NOTE: This pattern is safe because JSON.stringify escapes content
// and the replace() prevents script tag injection
function JsonLd({ data }: { data: object }) {
  const safeJson = JSON.stringify(data).replace(/</g, '\\u003c');
  return (
    <script
      type="application/ld+json"
      // eslint-disable-next-line react/no-danger
      dangerouslySetInnerHTML={{ __html: safeJson }}
    />
  );
}

5. Essential Structured Data Types

Article Schema

const articleJsonLd = {
  "@context": "https://schema.org",
  "@type": "Article",
  headline: post.title,
  image: post.coverImage,
  datePublished: post.publishedAt,
  dateModified: post.updatedAt,
  author: {
    "@type": "Person",
    name: post.author.name,
    url: `https://site.com/authors/${post.author.slug}`,
  },
  publisher: {
    "@type": "Organization",
    name: "Brand Name",
    logo: {
      "@type": "ImageObject",
      url: "https://site.com/logo.png",
    },
  },
};

FAQPage Schema

const faqJsonLd = {
  "@context": "https://schema.org",
  "@type": "FAQPage",
  mainEntity: faqs.map((faq) => ({
    "@type": "Question",
    name: faq.question,
    acceptedAnswer: {
      "@type": "Answer",
      text: faq.answer,
    },
  })),
};

BreadcrumbList Schema

Shows breadcrumb trail in search results:

const breadcrumbJsonLd = {
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  itemListElement: [
    {
      "@type": "ListItem",
      position: 1,
      name: "Home",
      item: "https://site.com",
    },
    {
      "@type": "ListItem",
      position: 2,
      name: "Products",
      item: "https://site.com/products",
    },
    {
      "@type": "ListItem",
      position: 3,
      name: product.name,
      item: `https://site.com/products/${product.slug}`,
    },
  ],
};

6. Answer Engine Optimization (AEO)

AI search engines (ChatGPT, Perplexity, Claude) are becoming traffic sources. Optimize for them:

Key AEO strategies:

// ✅ GOOD: Content structure for AI search
function ProductPage({ product }) {
  return (
    <>
      {/* Direct answer for AI to extract */}
      <p className="lead">
        The {product.name} is a {product.category} that {product.keyBenefit}.
        Priced at ${product.price}, it's ideal for {product.targetAudience}.
      </p>

      {/* FAQ section with schema */}
      <section>
        <h2>Frequently Asked Questions</h2>
        {product.faqs.map(faq => (
          <details key={faq.id}>
            <summary>{faq.question}</summary>
            <p>{faq.answer}</p>
          </details>
        ))}
      </section>

      {/* Structured data for both Google and AI */}
      <JsonLd data={productJsonLd} />
      <JsonLd data={faqJsonLd} />
    </>
  );
}

Why AEO matters:

• 40% of Gen Z uses TikTok/AI for search over Google
• AI search engines cite well-structured content
• FAQ sections appear in AI answers
• Structured data = machine-readable = AI-friendly

Sitemap & Robots

Dynamic Sitemap Generation

// app/sitemap.ts
import { MetadataRoute } from "next";

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const products = await db.product.findMany({
    select: { slug: true, updatedAt: true },
  });

  const productUrls = products.map((product) => ({
    url: `https://site.com/products/${product.slug}`,
    lastModified: product.updatedAt,
    changeFrequency: "weekly" as const,
    priority: 0.8,
  }));

  return [
    {
      url: "https://site.com",
      lastModified: new Date(),
      changeFrequency: "daily",
      priority: 1,
    },
    ...productUrls,
  ];
}

Robots.txt

// app/robots.ts
import { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      {
        userAgent: "*",
        allow: "/",
        disallow: ["/admin/", "/api/"],
      },
      {
        userAgent: "Googlebot",
        allow: "/",
        crawlDelay: 0,
      },
    ],
    sitemap: "https://site.com/sitemap.xml",
  };
}

Quick Reference: Metadata Checklist

Every page needs:

• title - Unique, < 60 chars, includes primary keyword
• description - Compelling, < 155 chars, includes CTA
• canonical URL - Prevents duplicate content
• openGraph - For social sharing (1200x630 images)
• twitter card - For Twitter/X sharing
• robots - index/noindex directive

For e-commerce:

• OpenGraph type: 'product' (not 'website')
• Product JSON-LD with offers
• Breadcrumb JSON-LD

Testing & Measurement

Validation Tools (Before Deploy)

Test structured data BEFORE deploying:

• Rich Results Test - Google's official tool
• Schema Markup Validator - schema.org validator
• Chrome DevTools → Lighthouse → SEO audit

Performance Measurement

Critical: Only Field Data (real users) affects Google rankings. Lab data helps debug but doesn't count for SEO.

Core Web Vitals Testing Strategy

// Measure INP in production
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.entryType === "event") {
      const inp = entry.processingStart - entry.startTime;
      if (inp > 200) {
        console.warn("Slow INP:", {
          duration: inp,
          name: entry.name,
          target: entry.target,
        });
      }
    }
  }
}).observe({ type: "event", buffered: true });

// Log slow LCP
new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lcp = entries[entries.length - 1];
  if (lcp.renderTime > 2500) {
    console.warn("Slow LCP:", {
      duration: lcp.renderTime,
      element: lcp.element,
      url: lcp.url,
    });
  }
}).observe({ type: "largest-contentful-paint", buffered: true });

References

• Core Web Vitals INP Guide - Official INP optimization patterns
• Optimize INP - Three-phase optimization approach
• Next.js Image Component - priority, placeholder, sizes
• Next.js Metadata API - generateMetadata, metadataBase
• Schema.org - Structured data vocabulary
• Rich Results Test - Validate structured data

Version Notes:

• INP replaced FID as Core Web Vital (March 2024)
• Next.js 15: Enhanced Image component, metadataBase required for OG
• Good INP: < 200ms (improving from 500ms → 200ms = 22% engagement boost)
• AEO emerging: AI search engines (ChatGPT, Perplexity) use structured data

Red Flags - STOP and Fix

Common Mistakes