Next.js SEO Checklist

Overview

This SEO checklist is designed specifically for Next.js applications, covering everything from on-page essentials to advanced technical optimizations.

In today's digital landscape, simply having a website isn't enough. If you're building with Next.js, you already have a powerful framework for creating fast, dynamic, and optimized web applications. But to effectively reach your target audience and improve web traffic, SEO optimization is pivotal.

Here are 7 key categories covered by the complete checklist:

1. On-Page SEO Basics
2. Technical SEO
3. Performance Optimization
4. User Experience/Navigation
5. Off-Page SEO
6. Local SEO
7. SEO Tools and Analytics

1. On-Page SEO Basics

On-page SEO is the cornerstone of any successful SEO strategy. These fundamental practices are crucial for ensuring that your content is both discoverable and relevant.

Project Setup

Use Next.js 15 or the latest stable version. Newer versions often include performance improvements, bug fixes, and potentially new SEO-friendly features. Ensure your package.json has the latest stable version of Next.js. You can update using npm install next@latest or yarn add next@latest.

Metadata

Ensure every page has optimized meta tags. Utilize Next.js's metadata object or generateMetadata function for managing these tags dynamically. These are crucial for click-through rates (CTR) from search engine result pages (SERPs). They tell users and search engines what your page is about.

Use the metadata component to manage title and meta tags, typically placed in your app/layout.tsx or within specific page.tsx components for page-specific metadata.

Title Tags:

• The ideal length for the meta title is 50-60 characters (including spaces). Google typically starts to cut off the title tag after 60 characters.
• Include primary keywords naturally.
• Make titles compelling and accurate to the page content.
• Example: Next.js 15 App Router SEO Checklist.

Meta Descriptions:

• Keep the description under 160 characters (including spaces).
• Write compelling and benefit-driven descriptions that encourage clicks.
• Include relevant keywords.
• Example: The complete Next.js SEO checklist to outrank your competitors.

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: "Next.js 15 App Router SEO Checklist",
  description: "The complete Next.js SEO checklist to outrank your competitors."
}

The title template can be used to add a prefix/suffix to titles. Set a template in your layout.tsx and a title in your page.tsx components.

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: {
    template: '%s | YourSite',
    default: 'YourSite', // a default is required when creating a template
  },
}

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'Home',
}
 

This outputs the title Home | YourSite. You can then use title in metadata for other pages, and it will apply the template to those too.

Dynamic Titles & Descriptions: Use dynamic titles and descriptions based on page content within your Server Components, especially for blog posts, product pages, etc. Dynamic metadata can be set by exporting a generateMetadata function. See Next.js metadata docs.

Social Media Metadata

The opengraph-image and twitter-image file conventions allow you to set Open Graph and Twitter images for a route segment. They are useful for setting the images that appear on social networks and messaging apps when a user shares a link to your site.

Add the opengraph and twitter image files to root of your app directory. Supported file types include .jpg, .jpeg, .png, and .gif. The images must be smaller than 8MB and 5MB respectively.

In your metadata, you can define the opengraph field

export const metadata = {
  openGraph: {
    title: 'YourSite',
    description: 'YourSite Description',
    url: 'https://yoursite.com',
    images: [
      {
        url: 'https://yoursite.com/opengraph-image.png', // Must be an absolute URL
        width: 800,
        height: 600,
      },
    ],
  },
}

The same applies for the twitter image.

export const metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'YourSite',
    description: 'YourSite Description',
    siteId: '000000000000', // @ username of website
    image: 'https://yoursite.com/twitter-image.png', // Must be an absolute URL
  },
}

Canonical Tags

Prevent duplicate content issues by using proper canonical tags. When you have duplicate content that is accessible on different URLs, a canonical tag tells the search engine which URL is the main/original page that should be shown on search results. This prevents search engines from randomly choosing which page to prioritize.

For example, let's imagine that our E-commerce store sells phones at example.com/products/phone and example.com/phones. Both are valid URLs, but we use canonical tags to tell the search engine which URL should be considered for search rankings.

We can a canonical tag for example.com/products/phones with the Next.js metadata object in the layout or page file:

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: "Browse phones",
  description: "View our latest range of phones on sale!",
  alternates: {
    canonical: '/products/phones',
    },
  }, 

Head output:

<link rel="canonical" href="example.com/products/phones" />

Content Quality

High-quality, unique, and valuable content is the foundation of SEO. Regularly update your content to maintain relevance and credibility in your niche.

Some tips for optimizing content:

• Keyword Research: Identify relevant keywords your target audience uses. Use tools like Google Keyword Planner, Ahrefs, SEMrush, etc.
• User Intent: Understand the search intent behind keywords and create content that satisfies that intent.
• Unique & Original: Avoid duplicate content. Create original content that provides value.
• Comprehensive & In-depth: Cover topics thoroughly. Aim to be the best resource for a given topic.
• Readable & Engaging: Use clear language, headings, and visuals to make content easy to read and engaging.

404 and Custom Error Pages

Design clear and branded error pages to enhance user experience and minimize bounce rates. Avoid showing any error details that are irrelevant and too technical for general users. Provide common reasons for the error encountered and how to resolve it.

For a 404, you can add a custom 404-not-found page in the app root:

import Link from 'next/link'
 
export default function NotFound() {
  return (
    <div>
      <h1>Not Found</h1>
      <p>Could not find the requested resource.</p>
      <Link href="/">Return Home</Link>
    </div>
  )
}

Optimizing Headers

Header tags structure content and signal importance to search engines. H1 is typically the main topic, with H2-H6 for subheadings.

• Use H1 tag for the main heading of each page (usually page title).
• Use H2-H6 tags to structure subtopics and sections logically.
• Include relevant keywords in header tags naturally.
• Maintain a hierarchical structure (H1 -> H2 -> H3, etc.).
• Avoid using header tags solely for styling; use CSS for styling.

HTML Semantic Elements

Elements like <div> or <span> don't imply any additional information about their content so they are general, non-semantic elements. On the other hand, elements like <nav>, <footer>, <article>, etc. have a specific role in the overall document structure so they are semantic elements.

Semantic elements help search engine bots and screen-readers to understand the content.

2. Technical SEO

Technical SEO is essential for ensuring search engines can effectively crawl and index your website.

Schema Data Markup

Structured data helps search engines understand the content of your pages more deeply. It can enable rich results in SERPs (e.g., review stars, opening hours, event listings), improving visibility and CTR.

• Implement structured data using JSON-LD format (recommended by Google).
• Use Schema.org vocabulary to markup different types of content (Articles, Products, Events, LocalBusiness, etc.).
• Test your Schema using Google's Rich Results Test.

export default async function Page({ params }) {
  const { id } = await params
  const product = await getProduct(id)
 
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: product.name,
    image: product.image,
    description: product.description,
  }
 
  return (
    <section>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(jsonLd).replace(/</g, '\\u003c'),
        }}
      />
      {/* page content */}
    </section>
  )
}

Robots.txt

A robots.txt controls how a search engine crawler has access to your website. This is important for directing crawlers and preventing certain pages from being crawled or indexed. Place the robots.txt in the root of the app directory.

Static:

User-Agent: *
Allow: /
Disallow: /private/
Sitemap: https://yoursite.com/sitemap.xml

Generate with Next.js:

import type { MetadataRoute } from 'next'
 
export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: '/private/',
    },
    sitemap: 'https://yoursite.com/sitemap.xml',
  }
}

XML Sitemap

Sitemaps help search engines discover and index all important pages on your site, especially for large websites or newly launched sites.

Static Sitemap: Generate a sitemap.xml using libraries like next-sitemap or manually if your site is relatively static. Place it in the root of your app directory.

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://yoursite.com</loc>
    <lastmod>2025-04-06T15:02:24.021Z</lastmod>
    <priority>1</priority>
  </url>
  <url>
    <loc>https://yoursite.com/about</loc>
    <lastmod>2025-04-06T15:02:24.021Z</lastmod>
    <priority>0.8</priority>
  </url>
</urlset>

Generate with Next.js:

import type { MetadataRoute } from 'next'
 
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://yoursite.com',
      lastModified: new Date(),
      priority: 1,
    },
    {
      url: 'https://yoursite.com/about',
      lastModified: new Date(),
      priority: 0.8,
    },
  ]
}

Dynamic Sitemap: Create a server route to generate sitemap.xml dynamically, fetching URLs from your database or CMS using App Router route handlers.

Submit your sitemap to search engines through Google Search Console for faster and more accurate indexing.

SSR and SSG

Next.js's SSR and SSG are foundational for performance and SEO. Search engines can easily crawl and index fully rendered HTML content. Choose the appropriate strategy based on content dynamism (how often the content needs to update or change). By default, Next.js App Router uses Server Components which are rendered on the server.

Mobile Optimization

Ensure your site is fully functional and optimized for mobile devices. Mobile-first indexing is a standard for search engines including Google.

Next.js is inherently responsive by default. Ensure your styling and components are dynamically designed for different screen sizes. Test responsiveness using browser developer tools and mobile testing tools.

Semantic URL Structure

Clear, readable URLs are user-friendly and SEO-friendly. They help search engines understand the page's content. Adopt a clean, SEO-friendly URL structure using Next.js's App Router folder structure.

• Use hyphens - instead of underscores _ or spaces.
• Use lowercase letters.
• Include relevant keywords.
• Keep URLs concise and descriptive.
• Group child pages under their relevant parent routes. For example, place product details at yoursite.com/shop/electronics/iphone-15-pro, not at the root like yoursite.com/iphone-15-pro.

Good semantic URL: /snippets/nextjs-seo-checklist.

Poor semantic URL: /snippets/POST_ID=wqlmb02isl30kan9.

Internal Linking

Internal links help search engines discover and understand the structure of your website. They also distribute link equity and improve user navigation within the website.

• Link relevant pages within your website to each other.
• Use descriptive anchor text (the clickable text of the link) that includes relevant keywords.
• Create a logical site structure and navigation using the folder structure in the app directory.
• Use Next.js link component from next/link for client-side navigation and SEO-friendly links.
• Example: <Link href="/blog/another-post">Read more about internal linking</Link>.

Prefetching Links

Prefetching makes navigating between different routes in your application faster. When navigating between routes, the browser requests assets for the page like HTML and JavaScript files. Prefetching is the process of fetching these resources ahead of time, before you navigate to a new route.

Next.js tries to intelligently prefetch when you use next/link in your application code. By default, links that are in the viewport get prefetched automatically. Alternatively, you can prefetch on intent (when the user hovers over the link) to reduce resource consumption.

'use client'
 
import Link from 'next/link'
import { useState } from 'react'
 
export function HoverPrefetchLink({
  href,
}: {
  href: string
  children: React.ReactNode
}) {
  const [active, setActive] = useState(false);
 
  return (
    <Link
      href={href}
      prefetch={active ? null : false}
      onMouseEnter={() => setActive(true)}
    >
    {children}
    </Link>
  )
}

SSL and HTTPS

Ensure your site uses HTTPS, signaling to Google that your site is secure and trustworthy. Most hosting providers offer free SSL certificates. Configure your hosting and CDN to enforce HTTPS, and check for mixed content issues (loading HTTP resources on HTTPS pages).

WWW Subdomain

Usually, you can access your website in two ways - entering the www. subdomain or without it. It's a matter of preference which one to be the primary one, but you must choose between them.

So if you choose the primary one to be the shorter version of your domain (non-www), then you must redirect (301) all requests to that primary domain. You can do this on Vercel or your hosting provider.

Otherwise, search engine bots will find the same content on two separate URL addresses and flag it as "duplicate content", which is terrible for your SEO.

3. Performance Optimization

Performance is a critical SEO factor. Websites that load faster offer better user experiences, which Google rewards.

Image Optimization

Compress and convert images to modern formats like WebP to improve loading times without compromising quality. Use next/image components for optimized image delivery. See my Next.js image optimization snippet.

Core Web Vitals

Core Web Vitals (Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS)) are crucial metrics for user experience and SEO ranking.

• LCP: Optimize image loading (use next/image), server response time, and rendering blocking resources.
• FID: Minimize JavaScript execution time in Client Components, break up long tasks.
• CLS: Reserve space for images and ads, avoid layout shifts caused by dynamically loaded content.

Use tools like PageSpeed Insights, Chrome DevTools, and Google Search Console to monitor and improve Core Web Vitals.

Performance Audits

Regularly audit your site using tools like Google Lighthouse to track and improve load times. Keep an eye on the LCP.

Lazy Loading of Media

Implement lazy loading for low-priority images and videos, improving page load time and reducing unnecessary resource loading. Read more about lazy loading.

Optimized Third-Party Scripts

Defer non-essential scripts or load them asynchronously to avoid performance bottlenecks.

4. User Experience/Nagivation

A seamless user experience is critical not only for retaining visitors but also for improving SEO.

Clear Navigation

Make sure your site's navigation is intuitive, ensuring visitors can find content easily. You should ensure that internal links are placed to assist user navigation and consider implementing breadcrumbs for larger websites.

Mobile-Friendliness

As of May 2025, mobile devices account for roughly 64% of web traffic. Ensure your website is fully responsive, as Google's ranking algorithm favors mobile-friendly sites.

5. Off-Page SEO

Off-page SEO is about building your site's reputation and authority through external factors like backlinks. Backlinks can have large impacts on the ranking of your website, particularly for new and unestablished businesses/brands.

High-Quality Backlinks

Focus on earning backlinks from authoritative websites within your niche.

Social Media Engagement

Promote your content on social media to drive traffic and build brand awareness.

6. Local SEO

For businesses targeting a local audience, local SEO is crucial for appearing in local search results.

Google Business Optimization

Claim and optimize your Google Business Profile listing. Ensure NAP (Name, Address, Phone Number) consistency. This enables better local visibility of your local business.

Local References and Reviews

List your business in relevant online directories and collaborate with local media. Encourage customer reviews on Google and other platforms to build credibility and digital presence.

Local Keyword Targeting

Use geo-targeted keywords to help your business rank in local search results.

Local Business Schema Markup

Add structured data for local businesses to improve your chances of appearing in relevant local searches with relavent business information. You can preview the results with the Rich Results Test. Schema data includes:

• Business type
• Address
• Business name
• Menu URL
• Opening hours
• Price range
• Telephone
• URL (website)

7. SEO Tools and Analytics

To ensure your SEO strategy is effective, it's essential to track progress and measure key metrics.

Google Search Console

Once your website is deployed, setup Google Search Console to monitor how Google sees your site, track errors, and optimize your presence.

Google/Vercel Analytics

Leverage Google or Vercel Analytics to track user behavior, traffic, and conversions.

SEO Auditing Tools

Use tools like SEMrush or Ahrefs to perform regular SEO audits, identify weaknesses, and track keyword rankings.

Wrapping up

By following this comprehensive SEO checklist, your Next.js app is sure to dominate search rankings, outrank competitors, and provide exceptional user experiences.