Important SEO Points for a Next.js Website

Search Engine Optimization (SEO) is an essential part of modern web development. Proper SEO helps search engines understand the content of a website and improves its visibility in search engine results such as Google.

In modern frameworks like Next.js, implementing SEO is easier because the framework provides built-in features such as metadata configuration, structured data support, sitemap generation, and performance optimization.

This guide explains how to implement complete SEO for a Next.js website, including metadata configuration, OpenGraph tags, Twitter cards, structured data, sitemap generation, robots configuration, and other important optimization practices.

1. Introduction to SEO

Search Engine Optimization (SEO) is the process of optimizing a website so that it appears higher in search engine results.

The main goals of SEO are:

• Improve search engine visibility

• Increase organic traffic

• Help search engines understand website structure and content

SEO generally includes the following areas:

Technical SEO focuses on the website’s technical structure such as crawling, indexing, and performance.

On-page SEO focuses on optimizing page titles, descriptions, headings, and content.

Content optimization ensures that the information provided is relevant and structured.

Performance optimization improves loading speed and responsiveness.

Modern frameworks like Next.js help developers implement these optimizations easily.

2. Metadata Configuration

Metadata provides important information about a webpage to search engines and browsers.

In Next.js App Router, metadata is defined inside the layout.tsx file.

File Location

app/layout.tsx

Code Example

import type { Metadata } from "next";

export const metadata: Metadata = {
  metadataBase: new URL("https://example.com"),

  title: {
    default: "Example Developer Portfolio",
    template: "%s | Example Portfolio",
  },

  description:
    "A developer portfolio showcasing projects, blogs, and development work.",

  keywords: [
    "developer portfolio",
    "full stack developer",
    "Next.js developer",
    "React developer"
  ],

  authors: [{ name: "Example Developer" }],

  alternates: {
    canonical: "https://example.com",
  },
};

Metadata defines the title, description, keywords, author, and canonical URL of the website. This information helps search engines understand the page and display correct results.

3. OpenGraph Metadata

OpenGraph metadata controls how a website appears when shared on social media platforms.

Platforms that use OpenGraph include:

• LinkedIn

• Facebook

• WhatsApp

• Discord

Implementation

Add the OpenGraph configuration inside the metadata object.

openGraph: {
  title: "Example Developer Portfolio",
  description:
    "Portfolio showcasing projects and development work.",
  url: "https://example.com",
  siteName: "Example Portfolio",
  type: "website",
  images: [
    {
      url: "/og-image.png",
      width: 1200,
      height: 630,
      alt: "Example Portfolio",
    },
  ],
},

OpenGraph Image

Create the image file in the public directory.

public/og-image.png

Recommended image size:

1200 × 630 pixels

This image appears whenever the website link is shared on social media.

4. Twitter Card Metadata

Twitter cards control how links appear when shared on Twitter (X).

Implementation

twitter: {
  card: "summary_large_image",
  title: "Example Developer Portfolio",
  description:
    "Portfolio showcasing projects and development work.",
  images: ["/og-image.png"],
},

The summary_large_image card type displays a large preview image along with the title and description.

5. Favicon Setup

Favicons represent the website icon displayed in browser tabs and bookmarks.

Place the following files inside the app folder.

app/favicon.ico
app/icon.png
app/apple-icon.png

Next.js automatically detects these icons.

6. Structured Data (Schema Markup)

Structured data helps search engines understand the content and structure of a website.

In Next.js, structured data can be added using JSON-LD scripts.

First import the script component.

import Script from "next/script";

Person Schema

The Person schema defines the website owner.

<Script
 id="person-schema"
 type="application/ld+json"
 strategy="beforeInteractive"
 dangerouslySetInnerHTML={{
  __html: JSON.stringify({
   "@context": "https://schema.org",
   "@type": "Person",
   name: "Example Developer",
   url: "https://example.com",
   jobTitle: "Full Stack Developer",
   sameAs: [
     "https://github.com/example",
     "https://linkedin.com/in/example"
   ]
  }),
 }}
/>

This schema helps search engines identify the website owner and connect their social profiles.

Website Schema

The WebSite schema describes the website itself.

<Script
 id="website-schema"
 type="application/ld+json"
 strategy="beforeInteractive"
 dangerouslySetInnerHTML={{
  __html: JSON.stringify({
   "@context": "https://schema.org",
   "@type": "WebSite",
   name: "Example Portfolio",
   url: "https://example.com"
  }),
 }}
/>

This helps search engines understand the purpose and structure of the website.

7. Sitemap Generation

A sitemap lists all important pages of a website so that search engines can crawl them easily.

File Location

app/sitemap.ts

Code Example

import { MetadataRoute } from "next";

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: "https://example.com",
      lastModified: new Date(),
    },
  ];
}

The sitemap becomes available at:

https://example.com/sitemap.xml

8. Robots.txt Configuration

Robots.txt provides instructions to search engine crawlers.

File Location

app/robots.ts

Code Example

import { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
    },
    sitemap: "https://example.com/sitemap.xml",
  };
}

9. Google Search Console Verification

Google Search Console is used to monitor indexing and search performance.

Steps to verify a website:

1. Open Google Search Console

2. Add the website property

3. Verify ownership

4. Copy the verification code

5. Add the code to metadata

Example:

verification: {
  google: "verification-code"
}

10. Website Performance Optimization

Website speed is an important ranking factor.

Performance optimization techniques include:

• Image optimization

• Lazy loading

• CDN hosting

• Faster server response

• Code splitting

Next.js automatically improves performance using server-side rendering and optimized assets.

11. Mobile Optimization

Google uses mobile-first indexing, meaning the mobile version of a website is prioritized.

Important practices include:

• Responsive layouts

• Mobile-friendly navigation

• Fast loading pages

• Readable typography

12. Internal Linking

Internal linking connects different pages within the website.

Example structure:

Home → Projects
Home → Blog
Blog → Individual Posts

Internal links help search engines crawl the website and improve navigation.

13. Image SEO

All images should include descriptive alt attributes.

Example:

<img src="/project.png" alt="Portfolio project preview" />

Alt attributes improve accessibility and help search engines understand images.

14. Semantic HTML Structure

Search engines understand website structure through semantic HTML elements.

Important tags include:

• header

• nav

• main

• section

• article

• footer

Using semantic HTML improves accessibility and SEO.

15. Heading Structure

Headings help organize page content.

Best practices include:

• Only one <h1> per page

• Use <h2> for sections

• Use <h3> for subsections

Example:

<h1>Developer Portfolio</h1>
<h2>Projects</h2>
<h2>Blog</h2>

16. URL Structure

SEO-friendly URLs should be clean and readable.

Good example:

/projects
/blog
/contact

Avoid dynamic query URLs when possible.

17. Analytics Integration

Analytics tools help track user behavior and website performance.

Example tool: Vercel Analytics

Installation:

npm install @vercel/analytics

Usage:

<Analytics />

Analytics helps monitor traffic, visitor behavior, and engagement.

Final SEO Checklist

A properly optimized Next.js website should include metadata configuration, canonical URLs, descriptive titles and descriptions, OpenGraph metadata, Twitter card metadata, structured data using schema markup, sitemap generation, robots.txt configuration, favicon setup, OpenGraph preview images, Google Search Console verification, analytics integration, mobile optimization, internal linking, semantic HTML structure, and image alt attributes.

Implementing these practices ensures that the website is well-structured, easily crawlable, and optimized for search engine visibility.