Sohail SJ | TheZenLabs

Posted on Dec 29, 2024

The Must-Have SEO Checklist for Developers For 2025

#webdev #javascript #nextjs #react

Hey, Devs!

So I have been working on a few SEO Focused projects lately and I thought I would share some of the best practices and strategies I have learned along the way for Next.js developers.

Next.js SEO Checklist For 2025

Table of Contents

Optimize Metadata
URL Structure and Routing
Content Optimization
Page Speed and Core Web Vitals
Image Optimization
Mobile-Friendliness
Sitemap, Robots.txt and Favicons
Internal Linking
Server-Side Rendering (SSR) and Static Site Generation (SSG)
Schema Markup
Canonical Tags and Avoiding Duplicates
Open Graph and Twitter Cards
Error Handling
Performance Optimization
Analytics and Monitoring
General Best SEO Practices for 2025

1. Optimize Metadata

Use the next/head component to include metadata like titles, descriptions, and canonical tags (Next.js Head Documentation).
Optimizing metadata is crucial for SEO as it improves click-through rates, provides search engines with context about the page, and helps rank relevant content higher in search results.

Pages Router Example:

import Head from 'next/head'

export default function Page() {
  return (
    <Head>
      <title>Page Title</title>
      <meta name="description" content="Page Description" />
      <link rel="canonical" href="https://example.com/page" />
    </Head>
  )
}

With Page Router approach is straightforward and easy to implement.

App Router Example:

export const metadata = {
  title: 'Page Title',
  description: 'Page Description',
}

The App Router approach we use the metadata property in the layout or page file (Next.js Metadata API).

2. URL Structure and Routing

Implement clean, descriptive, and hierarchical URLs (e.g., /blog/seo-checklist instead of /blog?id=123).
Clean URLs improve user experience by making them easier to read and remember, and they help search engines understand the site’s structure more effectively, enhancing discoverability.
Use Next.js dynamic routing for better URL control (Dynamic Routing Guide).
Avoid deep nesting in URLs to keep them user-friendly.

# Good URL Structure
| root
|--- app
|------ blog
|--------- seo-checklist

# Bad URL Structure
| root
|--- app
|------ blog
|--------- 2022
|------------ 01
|--------------- 01
|------------------ seo-checklist

3. Content Optimization

Research keywords and include them naturally in content (Google Keyword Planner).
Avoid keyword stuffing; focus on providing value. Keep keywords in a range of 1-3% of the total content.
Regularly update content to keep it fresh and relevant.
Related Refs: Types of Keywords in SEO, Keyword Density Checker.

4. Page Speed and Core Web Vitals

Monitor and improve metrics like LCP, FID, and CLS using tools like Lighthouse or PageSpeed Insights (Google PageSpeed Insights).
Optimize fonts, use preloading, and avoid large layout shifts. Read more about Optimizing Fonts and Images.
Use tools like WebPageTest to analyze performance and identify bottlenecks.

5. Image Optimization

Use the Next.js Image component for automatic image optimization (Image Component Documentation).
Serve responsive images with appropriate sizes and srcSet attributes.
Include descriptive alt text for accessibility and image SEO (W3C Accessibility Guidelines).

6. Mobile-Friendliness

Use responsive design principles ie Responsive Web Design.
Test pages with Google’s Mobile-Friendly Test tool (Mobile-Friendly Test).
Ensure content is easily accessible and readable on mobile devices as more 70% traffic from mobile devices on an avg.

7. Sitemap, Robots.txt and Favicons

Sitemap

A sitemap is a file that lists all the URLs on your site. It helps search engines discover and index your content more efficiently.
Create an XML sitemap and submit it to search engines like Google (Google Search Console Sitemap Submission).

Video on Generate Sitemap Via next-sitemap NPM Package

Video on Generate Dynamic Sitemap For CMS/DB Data

Robots.txt

A robots.txt file tells search engine crawlers which pages or files they can or cannot request from your site. It is important to have a well-structured robots.txt file to guide search engine crawlers.
Configure a robots.txt file to guide search engine crawlers (Robots.txt Guide).

Favicons

You must have seen favicons in the browser tab, bookmarks, and mobile apps. They are website icons that help users identify your site.
Include Favicons for better user experience and branding. Use tool like Favicon IO to generate favicons. This great tool as it provides favicons in different sizes and formats as well as manifest.json file.

# Example of favicon
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />

8. Internal Linking

Use meaningful anchor text for internal links.
Avoid broken links by regularly auditing your site (Broken Link Checker Tool).
Implement breadcrumbs for better navigation and SEO (Breadcrumb Schema Guide).

Pro Advice I use linkMap to manage internal links in my projects. It is a simple key value pair object that I use to manage all the internal links in my project. This way I can easily update the links in one place and it will reflect across the entire project.

// linkMap.js
export const linkMap = {
  home: '/',
  about: '/about',
  services: '/services',
  contact: '/contact',
}

9. Server-Side Rendering (SSR) and Static Site Generation (SSG)

Choose the appropriate rendering method (getServerSideProps, getStaticProps, or ISR) based on content requirements (Next.js Data Fetching).
Use SSR for dynamic content that changes frequently.
Use SSG or ISR for pages with static or semi-static content for better performance and SEO.

Video on App Router SSR and SSG

Video on Page Router SSR and SSG

10. Schema Markup

Add structured data using JSON-LD format for rich results (Google’s Structured Data Testing Tool).
Include schema types like Breadcrumb, Article, Product, or FAQ depending on your content (Schema.org Documentation).
Use NPM Packages like next-seo or schema-dts for easy schema implementation. Read more about Next-SEO and Schema DTS for JSON-LD schema.

11. Canonical Tags and Avoiding Duplicates

What is a canonical tag? A canonical tag is a meta tag that tells search engines which version of a URL you want to be treated as the primary version. This helps prevent duplicate content issues.
Like your home page can be accessed from multiple URLs like https://example.com, https://example.com/index.html, https://example.com/home, etc.
You can use a canonical tag to tell search engines that https://example.com is the primary URL. Read more about Canonical URL Guide.
Dynamically set canonical URLs in the <head> section based on the current route.

<link rel="canonical" href="https://example.com/page" />

12. Open Graph and Twitter Cards

Add Open Graph tags (og:title, og:description, og:image) for social sharing (Open Graph Protocol).

Pages Router Example

import Head from 'next/head'

export default function Page() {
  return (
    <Head>
      <meta property="og:title" content="Page Title" />
      <meta property="og:description" content="Page Description" />
      <meta property="og:image" content="https://example.com/image.jpg" />
      <meta property="og:type" content="website" />
      <meta property="og:url" content="https://example.com/page" />
      <meta name="twitter:card" content="summary_large_image" />
    </Head>
  )
}

App Router Example

export const metadata = {
  openGraph: {
    title: 'Page Title',
    description: 'Page Description',
    images: [
      {
        url: 'https://example.com/image.jpg',
        width: 800,
        height: 600,
        alt: 'Image description',
      },
    ],
    type: 'website',
    url: 'https://example.com/page',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Page Title',
    description: 'Page Description',
    images: ['https://example.com/image.jpg'],
  },
}

Include Twitter Card metadata for better link previews on Twitter (Twitter Cards Documentation).

13. Error Handling

Create custom 404 and 500 pages using pages/404.js and pages/500.js (Next.js Error Pages Documentation).
Ensure they are informative and guide users back to functional pages.
Also checkout this awesome Not Found Page Collection By Awwwards.

// pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>
}

// pages/500.js
export default function Custom500() {
  return <h1>500 - Server-Side Error</h1>
}

14. Performance Optimization

Use CDN for serving static files (Vercel Edge Network).
Minimize and bundle JavaScript with code-splitting and tree-shaking (Webpack Optimization Guide).
Implement lazy loading for images and components.
Enable next.config.js settings like compression and reactStrictMode (Next.js Configuration).
These settings contribute to faster page loads and better user experiences.

Example Configuration

// next.config.js
module.exports = {
  reactStrictMode: true,
  compress: true,
  images: {
    domains: ['example.com'], // Add domains for optimized images
  },
}

15. Analytics and Monitoring

Integrate Google Analytics or other tracking tools (Next.js Analytics Integration).
Use Google Search Console to monitor indexing, search performance, and errors (Search Console Guide).
These tools help monitor user behavior and identify potential areas for SEO improvement, such as high bounce rates or underperforming pages.

If you want a lite setup use these

UMAMI - A simple, easy-to-use, self-hosted web analytics tool.
Google Web Master Tools - Google Search Console is a free service offered by Google that helps you monitor and maintain your site's presence in Google Search results.

I prefer using Umami + Google Web Master Tools for my personal projects such (Chakra Framer)

16. General Best SEO Practices for 2025

Focus on Search Intent: Understand and address the user’s needs and queries. Align your content with the questions and needs your audience is searching for.
Voice Search Optimization: Optimize for long-tail, conversational queries by incorporating structured FAQs and direct answers on pages.
A/B Testing for SEO: Regularly A/B test meta descriptions, titles, or content variations to identify what resonates with users and drives traffic.

I hope these tips help you build your next Billion Dollar App. Happy Coding!