Get SEO right

Step by step

1. 1

   Server-render everything SEO-critical

   Content that must rank has to be in the initial HTML response, not fetched client-side in a useEffect. Use static generation (SSG/ISR) or server rendering for pages, tables, and text. Confirm by running curl on the URL — if you don't see your headline and body copy in the raw HTML, crawlers don't either.

2. 2

   Give every page unique title, description, and canonical

   Use generateMetadata (or your framework's equivalent) so each page has a distinct title and meta description — no templated duplicates. Set metadataBase once in your root layout, then use relative canonical URLs per page to avoid duplicate-content self-competition (e.g. www vs non-www, trailing slashes, query params).

3. 3

   Add structured data (JSON-LD)

   Inject a schema.org JSON-LD script matching each page type: Article/BlogPosting for posts, Product + Offer for shop items, Organization on your homepage, BreadcrumbList for nav. This is what powers rich results and helps AI engines understand your content. Validate every type with Google's Rich Results Test before shipping.

4. 4

   Ship sitemap.xml and robots.txt

   Generate a sitemap listing all indexable URLs with lastModified dates (Next.js: app/sitemap.ts). Add robots.ts to allow crawling and point to the sitemap. Double-check no leftover noindex or Disallow: / from a staging config is blocking the whole site — this is the single most common way people accidentally deindex themselves.

5. 5

   Generate real Open Graph images

   Social and AI previews need an og:image. Generate them dynamically per page (Next.js opengraph-image.tsx with next/og's ImageResponse) so every share shows the actual title, not a generic banner. Size them 1200x630.

6. 6

   Get Core Web Vitals green

   Ranking and crawl budget both reward fast pages. Target good LCP (largest content paints fast), low INP (interactions feel instant — this replaced FID), and near-zero CLS (no layout shift). Serve next-gen images with explicit width/height, lazy-load below the fold, and check PageSpeed Insights on mobile, which is what Google measures.

7. 7

   Verify, submit, and monitor in Google Search Console

   Add and verify your domain, submit the sitemap, and use URL Inspection to see exactly how Googlebot renders a page. Watch the Coverage/Pages and Core Web Vitals reports weekly for the first month to catch indexing errors early — this is your ground truth, not a third-party tool's estimate.

// app/blog/[slug]/page.tsx — Next.js App Router
// (metadataBase is set once in app/layout.tsx)
import type { Metadata } from "next";
import { getPost } from "@/lib/posts";

type Props = { params: Promise<{ slug: string }> };

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);
  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `/blog/${slug}` },
    openGraph: { type: "article", title: post.title, description: post.excerpt },
  };
}

export default async function Page({ params }: Props) {
  const { slug } = await params;
  const post = await getPost(slug);
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    headline: post.title,
    datePublished: post.publishedAt,
  };
  return (
    <article>
      <script type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      <h1>{post.title}</h1>
      {/* server-rendered body — visible to crawlers in the initial HTML */}
    </article>
  );
}