Nextjs Seo Best Practices In Nextjs Complete Guide

Last Update:2025-06-22T00:00:00 .NET School AI Teacher - SELECT ANY TEXT TO EXPLANATION. 11 mins read Difficulty-Level: beginner

Online Code run

🔔 Note: Select your programming language to check or run code at

💻 Run Code Compiler

Step-by-Step Guide: How to Implement Nextjs SEO Best Practices in Nextjs

Setting Up Your Next.js Project

First, create a new Next.js project if you haven't already:

npx create-next-app@latest my-nextjs-seo-app
cd my-nextjs-seo-app

Then start your development server:

npm run dev

Installing Required Packages

For SEO in Next.js, we'll use the next-seo package which simplifies adding meta tags, Open Graph tags, Twitter Card tags, Google Search Console tags, schema.org JSON LD, and more.

Install the next-seo package:

npm install next-seo

Global SEO Settings

We can set global SEO settings like default title, default description, etc., in _app.js. If it doesn't exist, create one inside the pages directory.

Here’s an example of setting up global SEO using _app.js:

// pages/_app.js
import { DefaultSeo } from 'next-seo';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <DefaultSeo
        titleTemplate='%s | My Next.js App'
        defaultTitle='My Next.js App'
        description='This is my Next.js app which is SEO optimized.'
        canonical='https://www.mynextjsapp.com'
        openGraph={{
          url: 'https://www.mynextjsapp.com',
          title: 'My Next.js App',
          description: 'This is my Next.js app which is SEO optimized.',
          images: [
            {
              url: 'https://www.mynextjsapp.com/images/profile.jpg',
              width: 800,
              height: 600,
              alt: 'My Next.js App',
              type: 'image/jpeg',
            },
          ],
          site_name: 'My Next.js App',
        }}
        twitter={{
          handle: '@handle',
          site: '@site',
          cardType: 'summary_large_image',
        }}
      />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

Page-Specific SEO Settings

You can also set page-specific SEO settings directly within each page component using the NextSeo component. Here's an example for a home page (index.js):

// pages/index.js
import Head from 'next/head';
import { NextSeo } from 'next-seo';

const Home = () => {
  return (
    <>
      <NextSeo
        title='Welcome to My Next.js App'
        description='Discover the best features in our Next.js application.'
        canonical='https://www.mynextjsapp.com/'
        openGraph={{
          url: 'https://www.mynextjsapp.com/',
          title: 'Welcome to My Next.js App',
          description: 'Discover the best features in our Next.js application.',
          images: [
            {
              url: 'https://www.url.ie/images/post.jpg',
              width: 800,
              height: 600,
              alt: 'Welcome to My Next.js App',
            },
          ],
          site_name: 'Welcome to My Next.js App',
        }}
        twitter={{
          handle: '@handle',
          site: '@site',
          cardType: 'summary_large_image',
        }}
      />
      <Head>
        <title>Welcome to My Next.js App</title>
        <meta name='description' content='Discover the best features in our Next.js application.' />
      </Head>

      <main>
        <h1>Welcome to My Next.js App</h1>
        <p>Discover the best features in our Next.js application.</p>
      </main>
    </>
  );
};

export default Home;

Customizing Dynamic Pages

For dynamic pages, like blog posts or product pages, ensure that your SEO settings are dynamic too. Here’s an example for a blog post page:

// pages/posts/[slug].js
import { NextSeo } from 'next-seo';

const PostPage = ({ post }) => {
  return (
    <>
      <NextSeo
        title={post.title}
        description={post.excerpt}
        canonical={`https://www.mynextjsapp.com/posts/${post.slug}`}
        openGraph={{
          url: `https://www.mynextjsapp.com/posts/${post.slug}`,
          title: post.title,
          description: post.excerpt,
          images: [
            {
              url: post.featuredImage,
              width: 800,
              height: 600,
              alt: post.title,
            },
          ],
          site_name: 'My Next.js App',
        }}
        twitter={{
          handle: '@handle',
          site: '@site',
          cardType: 'summary_large_image',
        }}
      />
      <main>
        <h1>{post.title}</h1>
        <p>{post.excerpt}</p>
        {/* Render other post details here */}
      </main>
    </>
  );
};

PostPage.getInitialProps = async (context) => {
  // Fetch data for the post based on its slug
  const response = await fetch(`https://api.mydata.com/posts/${context.query.slug}`);
  const post = await response.json();

  return { post };
};

export default PostPage;

Server-Side Rendering (SSR)

Next.js uses SSR out-of-the-box, but it's good practice to ensure your pages render the necessary SEO tags on the server side. The above examples already demonstrate this.

Adding Structured Data (Schema)

Structured data provides information about web pages to search engines in a format that helps them understand and display information more effectively. For example, let's add structured data for a blog post:

// pages/posts/[slug].js
import { NextSeo } from 'next-seo';

const PostPage = ({ post }) => {
  return (
    <>
      <NextSeo
        title={post.title}
        description={post.excerpt}
        canonical={`https://www.mynextjsapp.com/posts/${post.slug}`}
        openGraph={{
          url: `https://www.mynextjsapp.com/posts/${post.slug}`,
          title: post.title,
          description: post.excerpt,
          images: [
            {
              url: post.featuredImage,
              width: 800,
              height: 600,
              alt: post.title,
            },
          ],
          site_name: 'My Next.js App',
        }}
        twitter={{
          handle: '@handle',
          site: '@site',
          cardType: 'summary_large_image',
        }}
        additionalMetaTags={[
          {
            property: 'article:published_time',
            content: post.publishedDate,
          },
          {
            property: 'article:modified_time',
            content: post.modifiedDate,
          },
          {
            property: 'article:tag',
            content: 'SEO',
          },
        ]}
        additionalLinkTags={[
          {
            rel: 'author',
            href: '/humans.txt',
          },
        ]}
        article={{
          authors: ['https://www.example.com'],
          tags: ['SEO', 'Next.js'],
        }}
        structuredData={{
          "@context": "https://schema.org",
          "@type": "Article",
          mainEntityOfPage: {
            "@type": "WebPage",
            "@id": `https://www.mynextjsapp.com/posts/${post.slug}`
          },
          headline: post.title,
          image: [post.featuredImage],
          datePublished: post.publishedDate,
          dateModified: post.modifiedDate,
          author: {
            "@type": "Person",
            name: "Author Name"
          },
          publisher: {
            "@type": "Organization",
            name: "My Organization",
            logo: {
              "@type": "ImageObject",
              url: "https://www.mynextjsapp.com/images/logo.png"
            }
          },
          description: post.excerpt
        }}
      />
      <main>
        <h1>{post.title}</h1>
        <p>{post.excerpt}</p>
        {/* Render other post details here */}
      </main>
    </>
  );
};

PostPage.getInitialProps = async (context) => {
  // Fetch data for the post based on its slug
  const response = await fetch(`https://api.mydata.com/posts/${context.query.slug}`);
  const post = await response.json();

  return { post };
};

export default PostPage;

Using Breadcrumbs for Navigation

Breadcrumbs help users navigate your site by providing links back to previous sections. You can use them by adding JSON-LD schema to your pages.

Here’s an implementation for a blog post with breadcrumbs:

// pages/posts/[slug].js
import { NextSeo } from 'next-seo';

const PostPage = ({ post }) => {
  const breadcrumbList = [
    {
      position: 1,
      name: 'Home',
      item: 'https://www.mynextjsapp.com/',
    },
    {
      position: 2,
      name: 'Blog',
      item: 'https://www.mynextjsapp.com/blog',
    },
    {
      position: 3,
      name: post.title,
      item: `https://www.mynextjsapp.com/posts/${post.slug}`,
    },
  ];

  return (
    <>
      <NextSeo
        title={post.title}
        description={post.excerpt}
        canonical={`https://www.mynextjsapp.com/posts/${post.slug}`}
        openGraph={{
          url: `https://www.mynextjsapp.com/posts/${post.slug}`,
          title: post.title,
          description: post.excerpt,
          images: [
            {
              url: post.featuredImage,
              width: 800,
              height: 600,
              alt: post.title,
            },
          ],
          site_name: 'My Next.js App',
        }}
        twitter={{
          handle: '@handle',
          site: '@site',
          cardType: 'summary_large_image',
        }}
        structuredData={{
          "@context": "https://schema.org",
          "@type": "Article",
          mainEntityOfPage: {
            "@type": "WebPage",
            "@id": `https://www.mynextjsapp.com/posts/${post.slug}`
          },
          headline: post.title,
          image: [post.featuredImage],
          datePublished: post.publishedDate,
          dateModified: post.modifiedDate,
          author: {
            "@type": "Person",
            name: "Author Name"
          },
          publisher: {
            "@type": "Organization",
            name: "My Organization",
            logo: {
              "@type": "ImageObject",
              url: "https://www.mynextjsapp.com/images/logo.png"
            }
          },
          description: post.excerpt,
          breadcrumb: {
            "@context": "https://schema.org",
            "@type": "BreadcrumbList",
            itemListElement: breadcrumbList,
          }
        }}
      />
      <main>
        <h1>{post.title}</h1>
        <p>{post.excerpt}</p>
        {/* Render breadrumbs and other post details here */}
        <div className="breadcrumbs">
          {breadcrumbList.map((crumb, index) => (
            <span key={index}>
              <a href={crumb.item}>{crumb.name}</a>
              {index !== breadcrumbList.length - 1 && " > "}
            </span>
          ))}
        </div>
      </main>
    </>
  );
};

PostPage.getInitialProps = async (context) => {
  // Fetch data for the post based on its slug
  const response = await fetch(`https://api.mydata.com/posts/${context.query.slug}`);
  const post = await response.json();

  return { post };
};

export default PostPage;

Creating sitemap.xml

A sitemap helps search engines learn about the pages on your website and how they should be crawled. We can easily generate a sitemap using the next-sitemap package.

First, install the package:

npm install next-sitemap

Next, create a next-sitemap.js file at the root of your project:

// next-sitemap.js
module.exports = {
  siteUrl: 'https://www.mynextjsapp.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
};

Add build command to package.json:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build && next-sitemap",
    "start": "next start"
  }
}

Run the build script:

npm run build

This will generate sitemap.xml and robots.txt files automatically.

Optimizing Images

Using optimized images improves loading speed and helps improve SEO scores. In Next.js, you can use the built-in Image component from next/image.

Example usage:

// pages/posts/[slug].js
import { Image } from 'next/image'

const PostPage = ({ post }) => {
  return (
    <>
      <NextSeo
        {/* Other SEO tags here */}
      />
      <main>
        <h1>{post.title}</h1>
        <p>{post.excerpt}</p>
        <Image
          src={post.featuredImage}
          alt={post.title}
          width={800}
          height={600}
        />
        {/* Render other post details here */}
      </main>
    </>
  )
}

// getInitialProps or other fetching logic here...

Replace the <img> tags with <Image> tags.

Ensuring Accessibility

Accessibility is important for SEO as well. Make sure your HTML elements have proper attributes:

Use <title> element.
Use alt attribute for images.
Use headings in order (<h1> to <h6>).
Ensure links have descriptive text.

In the examples above, make sure to follow these guidelines:

Top 10 Interview Questions & Answers on Nextjs SEO Best Practices in Nextjs

1. How does Next.js handle SEO out of the box compared to traditional React applications?

Answer: Next.js provides several SEO benefits out of the box compared to traditional React applications. Key features include server-side rendering (SSR) that generates HTML content on the server and sends it to the browser, which Google and other search engines can read immediately. Static site generation (SSG) offers pre-rendered HTML files, making page load times faster and SEO-friendly. Additionally, Next.js automatically generates meta tags and supports dynamic content rendering, making it more favorable compared to client-side rendered React apps.

2. What are the best ways to include dynamic meta tags in Next.js?

Answer: Dynamic meta tags can be included in Next.js using the next/head component. You can pass dynamic content via props to this component to generate meta tags for each page. Utilize getInitialProps, getServerSideProps, or getStaticProps to fetch data needed for meta tags dynamically. For example:

import Head from 'next/head';

const Page = ({ title, description }) => (
  <>
    <Head>
      <title>{title}</title>
      <meta name="description" content={description} />
    </Head>
    <main>...</main>
  </>
);

export async function getServerSideProps(context) {
  // fetch data here
  return { props: { title: 'Dynamic Title', description: 'Dynamic description' } };
}

export default Page;

3. How can I implement structured data in Next.js?

Answer: Structured data can be implemented in Next.js using the next/head component to add JSON-LD scripts to your pages. JSON-LD (JavaScript Object Notation for Linked Data) helps search engines understand the structure of your content and display rich snippets in search results. Here's an example of adding a breadcrumb schema:

import Head from 'next/head';

const HomePage = () => (
  <>
    <Head>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "BreadcrumbList",
            itemListElement: [
              {
                "@type": "ListItem",
                position: 1,
                name: "Home",
                item: `https://example.com/`
              },
              {
                "@type": "ListItem",
                position: 2,
                name: "Products",
                item: `https://example.com/products`
              }
            ]
          })
        }}
      />
    </Head>
    <main>...</main>
  </>
);

export default HomePage;

4. What are some strategies to improve page load times in Next.js for better SEO?

Answer: Several strategies to improve page load times include:

Using Static Site Generation (SSG) whenever possible, as it pre-renders pages into static HTML, offering fast load times.
Optimizing images by using the built-in next/image component, which supports lazy loading, image formats (e.g., WebP), and responsive images.
Leveraging Webpack optimization techniques such as code splitting, which splits your application into smaller chunks that are loaded on demand.
Minifying CSS, JavaScript, and HTML files to reduce file size.
Implementing HTTP/2 for efficient multiplexing and parallel loading of assets.
Using a Content Delivery Network (CDN) to serve content from locations closer to users.

5. How can I ensure that my Next.js site is mobile-friendly for SEO?

Answer: Ensuring mobile-friendliness involves:

Responsive Design: Building your site with a responsive design so that it adjusts well to different screen sizes and resolutions.
Viewport Meta Tag: Including a viewport meta tag in your pages to control the zoom level and dimensions of the viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Touch-Friendly UI: Designing buttons and interactive elements with sufficient tap areas.
Performance: Ensuring fast load times and optimizing resources to prevent slow mobile performance.
Testing: Regularly testing your site on different devices using tools like Google Mobile-Friendly Test.

6. What are the benefits of using Server-Side Rendering (SSR) in Next.js for SEO?

Answer: Server-Side Rendering (SSR) offers several benefits for SEO:

Immediate Indexing: Content is rendered on the server and sent to the browser as complete HTML, making it immediately accessible to web crawlers.
Improved Performance: Reduces the amount of work the browser has to do, leading to faster load times.
Seo-Friendly URLs: Facilitates the use of URL parameters and query strings that can improve user experience and SEO.
Better User Experience: Users see the content faster compared to client-side rendering because the initial HTML load is minimal.

7. How can I handle internationalization (i18n) and localization in Next.js SEO?

Answer: Handling internationalization and localization in Next.js involves configuring the i18n routing feature:

Using Next.js i18n Routing: By adding the i18n object in the next.config.js file, you can set up routes for different languages. This makes URLs more descriptive and search engines can easily distinguish between different locales.
Dynamic Meta Tags: Ensure that dynamic meta tags reflect the correct language and localized content.
Language Attributes: Properly set the lang attribute in the HTML tag to help search engines understand the language of the content.
Hreflang Tags: Include hreflang tags in your pages to indicate which URL serves the content for each locale, improving multilingual SEO.

8. What are the steps to set up SEO-friendly routing in Next.js?

Answer: Setting up SEO-friendly routing in Next.js includes:

Using Nested Routes: Create a logical URL structure that mirrors the content hierarchy, making it easier for users and search engines to understand the site.
Dynamic Routes: Utilize dynamic routing features to generate SEO-friendly URLs based on data (e.g., blog/[slug]).
Customizing Link Component: Use the next/link component to navigate between routes while ensuring optimal performance and SEO.
Redirects: Implement redirects to handle old or broken URLs and improve user experience, benefiting SEO.
Sitemap Generation: Automatically generate sitemaps with the help of libraries like next-sitemap for better visibility in search engine results.

9. How can I analyze and monitor the SEO performance of my Next.js site?

Answer: Analyzing and monitoring SEO performance involves:

Google Search Console: Submit your site to Google Search Console to track indexation, backlinks, and crawl issues.
Analytics Tools: Use tools like Google Analytics to monitor user behavior, traffic sources, and conversions.
Core Web Vitals: Monitor Core Web Vitals (e.g., Largest Contentful Paint, First Input Delay, Cumulative Layout Shift) to ensure a good user experience.
SEO Audits: Conduct regular SEO audits using tools like SEMrush, Ahrefs, or Moz to identify areas for improvement.
Performance Monitoring: Regularly check site performance using tools like Lighthouse, WebPageTest, or GTmetrix.

10. What are the common SEO pitfalls to avoid when building a Next.js application?

Answer: Common SEO pitfalls to avoid include:

Dynamic Content Rendering Issues: Ensure that all dynamic content is rendered on the server or pre-rendered when using SSG.
Duplicate Content: Avoid duplicate URLs or content, as this can dilute your site's SEO value.
Missing Meta Tags: Ensure that every page has unique meta tags, including titles and descriptions.
Too Many Redirects: Minimize the number of redirects, as they can slow down page load times and reduce SEO effectiveness.
Ignoring Mobile Optimization: Always prioritize mobile optimization to cater to the majority of internet users and comply with Google's mobile-first indexing.
Neglecting Technical SEO: Focus on technical SEO aspects such as site structure, XML sitemaps, and robots.txt files to ensure proper crawling and indexing.