Published on: Sun Feb 22 2026

Ultimate Next.js SEO Guide (2026 Edition)

Next.js App Router provides built-in SEO tools that are far superior to the old <Head> approach. Using the metadata, sitemap, robots, and manifest correctly ensures faster indexing, higher ranking, and better Google compatibility.

This guide shows the best production-ready setup.

1. Global Metadata (layout.js) — Most Important

Create config/site.js file in root of the project and import in app/layout.js

import { SITE_NAME, SITE_DESC, SITE_URL, META_TAGS, OWNER, GSC_VERIFICATION } from "@/config/site";

export const metadata = {
  metadataBase: new URL(SITE_URL),

  alternates: {
    canonical: SITE_URL,
  },

  title: {
    default: `${SITE_NAME} - ${SITE_DESC}`,
    template: `%s - ${SITE_NAME}`,
  },

  description: SITE_DESC,

  keywords: META_TAGS,

  authors: [
    {
      name: OWNER.name,
      url: SITE_URL,
    },
  ],

  creator: OWNER.name,
  publisher: OWNER.name,

  category: "technology",

  verification: {
    google: GSC_VERIFICATION,
  },

  robots: {
    index: true,
    follow: true,
    nocache: true,
    googleBot: {
      index: true,
      follow: true,
      noimageindex: false,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },

  icons: {
    icon: "/favicon.ico",
    shortcut: "/favicon.ico",
    apple: "/favicon.ico",
  },

  openGraph: {
    title: `${SITE_NAME} - ${SITE_DESC}`,
    description: SITE_DESC,
    url: SITE_URL,
    siteName: SITE_NAME,
    type: "website",
    locale: "en_US",
    images: [
      {
        url: `${SITE_URL}/og-image.png`, // absolute URL required
        width: 1200,
        height: 630,
        alt: `${SITE_NAME} preview image`,
      },
    ],
  },

  twitter: {
    card: "summary_large_image",
    title: `${SITE_NAME} - ${SITE_DESC}`,
    description: SITE_DESC,

    images: [`${SITE_URL}/og-image.png`],
  },
};

2. Sitemap (CRITICAL for indexing)

Create: sitemap.js

import { SITE_URL, PAGES } from "@/config/site";

export default function sitemap() {
  const base = SITE_URL.replace(/\/$/, "");

  const staticPages = [
    {
      url: base,
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 1,
    },
  ];

  const toolPages = PAGES.map((page) => ({
    url: `${base}${page.path}`,
    lastModified: new Date(),
    changeFrequency: "monthly",
    priority: 0.9,
  }));

  return [...staticPages, ...toolPages];
}

Output:

/sitemap.xml

Submit to Google Search Console.

3. Robots.txt (CRITICAL)

Create: app/robots.js

import { SITE_URL } from "@/config/site";

export default function robots() {
  return {
    rules: [
      {
        userAgent: "*",
        allow: "/",
      },
    ],
    sitemap: `${SITE_URL}/sitemap.xml`,
  };
}

4. Manifest (for PWA + SEO)

Create: app/manifest.js

import { SITE_NAME, SITE_URL } from "@/config/site";

export default function manifest() {
  return {
    name: SITE_NAME,
    short_name: SITE_NAME,
    description: SITE_NAME,
    start_url: "/",
    display: "standalone",
    background_color: "#ffffff",
    theme_color: "#000000",

    icons: [
      {
        src: "/favicon.ico",
        sizes: "192x192",
        type: "image/x-icon",
      },
    ],
  };
}

5. Structured Data (Advanced SEO)

Add inside page:

export default function Page() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "WebSite",
    name: "Pixform",
    url: "https://pixform.oreographer.com",
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
    </>
  );
}

6. Google Search Console setup

https://oreographer.com/sitemap.xml
https://pixform.oreographer.com/sitemap.xml

7. OpenGraph Image (Very important for sharing + ranking)

Create file: /app/opengraph-image.js

import { ImageResponse } from "next/server";

export const runtime = "edge";

export const size = {
  width: 1200,
  height: 630,
};

export default function Image() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 80,
          background: "black",
          color: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        Site Name
      </div>
    )
  );
}

This auto-creates OG image dynamically.

URL: https://oreographer.com/opengraph-image

Final Perfect SEO structure

app/
 layout.js
 sitemap.js
 robots.js
 manifest.js
 opengraph-image.png

 compress-image/
   page.js

Result you get

Fast indexing (hours)
Better ranking
Higher SEO score (95-100)
Google optimized metadata
Best performance

Published on: Sun Feb 22 2026

Author - Himanshu Sharma

seo nextjs

Ultimate Next.js SEO Guide (2026 Edition)

This guide shows the best production-ready setup.

1. Global Metadata (layout.js) — Most Important

Create config/site.js file in root of the project and import in app/layout.js

import { SITE_NAME, SITE_DESC, SITE_URL, META_TAGS, OWNER, GSC_VERIFICATION } from "@/config/site";

export const metadata = {
  metadataBase: new URL(SITE_URL),

  alternates: {
    canonical: SITE_URL,
  },

  title: {
    default: `${SITE_NAME} - ${SITE_DESC}`,
    template: `%s - ${SITE_NAME}`,
  },

  description: SITE_DESC,

  keywords: META_TAGS,

  authors: [
    {
      name: OWNER.name,
      url: SITE_URL,
    },
  ],

  creator: OWNER.name,
  publisher: OWNER.name,

  category: "technology",

  verification: {
    google: GSC_VERIFICATION,
  },

  robots: {
    index: true,
    follow: true,
    nocache: true,
    googleBot: {
      index: true,
      follow: true,
      noimageindex: false,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },

  icons: {
    icon: "/favicon.ico",
    shortcut: "/favicon.ico",
    apple: "/favicon.ico",
  },

  openGraph: {
    title: `${SITE_NAME} - ${SITE_DESC}`,
    description: SITE_DESC,
    url: SITE_URL,
    siteName: SITE_NAME,
    type: "website",
    locale: "en_US",
    images: [
      {
        url: `${SITE_URL}/og-image.png`, // absolute URL required
        width: 1200,
        height: 630,
        alt: `${SITE_NAME} preview image`,
      },
    ],
  },

  twitter: {
    card: "summary_large_image",
    title: `${SITE_NAME} - ${SITE_DESC}`,
    description: SITE_DESC,

    images: [`${SITE_URL}/og-image.png`],
  },
};

2. Sitemap (CRITICAL for indexing)

Create: sitemap.js

import { SITE_URL, PAGES } from "@/config/site";

export default function sitemap() {
  const base = SITE_URL.replace(/\/$/, "");

  const staticPages = [
    {
      url: base,
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 1,
    },
  ];

  const toolPages = PAGES.map((page) => ({
    url: `${base}${page.path}`,
    lastModified: new Date(),
    changeFrequency: "monthly",
    priority: 0.9,
  }));

  return [...staticPages, ...toolPages];
}

Output:

/sitemap.xml

Submit to Google Search Console.

3. Robots.txt (CRITICAL)

Create: app/robots.js

import { SITE_URL } from "@/config/site";

export default function robots() {
  return {
    rules: [
      {
        userAgent: "*",
        allow: "/",
      },
    ],
    sitemap: `${SITE_URL}/sitemap.xml`,
  };
}

4. Manifest (for PWA + SEO)

Create: app/manifest.js

import { SITE_NAME, SITE_URL } from "@/config/site";

export default function manifest() {
  return {
    name: SITE_NAME,
    short_name: SITE_NAME,
    description: SITE_NAME,
    start_url: "/",
    display: "standalone",
    background_color: "#ffffff",
    theme_color: "#000000",

    icons: [
      {
        src: "/favicon.ico",
        sizes: "192x192",
        type: "image/x-icon",
      },
    ],
  };
}

5. Structured Data (Advanced SEO)

Add inside page:

export default function Page() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "WebSite",
    name: "Pixform",
    url: "https://pixform.oreographer.com",
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
    </>
  );
}

6. Google Search Console setup

https://oreographer.com/sitemap.xml
https://pixform.oreographer.com/sitemap.xml

7. OpenGraph Image (Very important for sharing + ranking)

Create file: /app/opengraph-image.js

import { ImageResponse } from "next/server";

export const runtime = "edge";

export const size = {
  width: 1200,
  height: 630,
};

export default function Image() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 80,
          background: "black",
          color: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        Site Name
      </div>
    )
  );
}

This auto-creates OG image dynamically.

URL: https://oreographer.com/opengraph-image

Final Perfect SEO structure

app/
 layout.js
 sitemap.js
 robots.js
 manifest.js
 opengraph-image.png

 compress-image/
   page.js

Result you get

Fast indexing (hours)
Better ranking
Higher SEO score (95-100)
Google optimized metadata
Best performance

OreoGrapher © 2026

Developer & Designer

OreoGrapher © 2026

Developer & Designer

Ultimate Next.js SEO Guide (2026 Edition)

1. Global Metadata (layout.js) — Most Important

2. Sitemap (CRITICAL for indexing)

3. Robots.txt (CRITICAL)

4. Manifest (for PWA + SEO)

5. Structured Data (Advanced SEO)

6. Google Search Console setup

7. OpenGraph Image (Very important for sharing + ranking)

Final Perfect SEO structure

Result you get

Leave a Comment

Similar Articles

Ultimate Next.js SEO Guide (2026 Edition)

1. Global Metadata (layout.js) — Most Important

2. Sitemap (CRITICAL for indexing)

3. Robots.txt (CRITICAL)

4. Manifest (for PWA + SEO)

5. Structured Data (Advanced SEO)

6. Google Search Console setup

7. OpenGraph Image (Very important for sharing + ranking)

Final Perfect SEO structure

Result you get

Leave a Comment

Similar Articles