Making your Next JS site SEO Friendly

Introduction

SEO (Search Engine Optimization) helps your website appear in Google search results when people search for topics related to your content. Next.js provides built-in SEO improvements with server components and faster loading speeds.

Step 1: Use Server Components

Server Components are React components that run on the server instead of the user's browser. This means search engines can see your content immediately. Next.js 14 uses server components by default, which is automatically good for SEO.

Step 2: Add Basic Metadata

Metadata is information about your webpage that doesn't appear on the page itself but tells search engines what your page is about. Every page needs at least a title (under 60 characters) and description (under 160 characters). This is what shows up in Google search results.

export const metadata = {
  title: "Your Site Name",
  description: "What your site is about in 150 characters or less",
}
export const metadata = {
  title: "Your Site Name",
  description: "What your site is about in 150 characters or less",
}

Step 3: Create Different Titles for Each Page

Each page should have a unique title and description. For blog posts or dynamic content, create titles that combine the post title with your site name. This helps search engines understand what makes each page different.

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug)
  return {
    title: `${post.title} - Your Site Name`,
    description: post.excerpt,
  }
}
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug)
  return {
    title: `${post.title} - Your Site Name`,
    description: post.excerpt,
  }
}

Step 4: Create a Sitemap

A sitemap is like a map of your website that tells search engines about all your pages. It helps Google find and index your pages faster. Create a sitemap.ts file that lists all your pages with their URLs and last modified dates.

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

Step 5: Create a Robots File

A robots.txt file gives instructions to search engine crawlers about which parts of your website they can look at. It protects private areas (like admin panels) and tells search engines where to find your sitemap. Create a robots.ts file for this.

export default function robots() {
  return {
    rules: { userAgent: '*', allow: '/', disallow: '/admin/' },
    sitemap: 'https://yoursite.com/sitemap.xml',
  }
}
export default function robots() {
  return {
    rules: { userAgent: '*', allow: '/', disallow: '/admin/' },
    sitemap: 'https://yoursite.com/sitemap.xml',
  }
}

Step 6: Use Proper HTML Structure

Use semantic HTML tags properly: one H1 tag per page for the main title, H2 for major sections, H3 for subsections. Use tags like <article>, <section>, and <main> to help search engines understand your content structure.

Step 7: Optimize Images

Always use the Next.js Image component with alt text. Alt text describes what the image shows and helps search engines understand your images. The Image component automatically optimizes images for faster loading.

import Image from 'next/image'

<Image
  src="/your-image.jpg"
  alt="Description of what the image shows"
  width={800}
  height={600}
/>
import Image from 'next/image'

<Image
  src="/your-image.jpg"
  alt="Description of what the image shows"
  width={800}
  height={600}
/>

Step 8: Optimize Fonts

Use Next.js font optimization to load fonts faster. Faster loading improves your SEO rankings since Google considers page speed as a ranking factor.

Step 9: Add Social Media Cards

Open Graph images are what appear when someone shares your website link on social media. Add an opengraph-image.jpg file to create attractive previews with your brand colors and logo.

Step 10: Add Structured Data

Structured data provides additional information about your content to search engines using a standardized format. It can create rich snippets in search results (like star ratings, prices, or cooking times) that make your listings more attractive.

Step 11: Make Your Site Fast

Core Web Vitals are Google's measurements of how fast and responsive your site is. Use Next.js built-in optimizations like the Image component, server components, and font optimization to improve your scores.

Step 12: Check for Common Mistakes

Avoid multiple H1 tags per page, missing alt text on images, duplicate titles, slow loading times, and non-mobile-friendly designs. These hurt your SEO rankings.

Step 13: Monitor Your Performance

Use Google PageSpeed Insights and Lighthouse to check your site's speed and Core Web Vitals. These tools show you exactly what needs improvement.

Step 14: Add Your Site to Google Search Console

Google Search Console is a free tool that shows you how Google sees your website. Add your domain, verify ownership, and submit your sitemap. This is crucial for getting your site noticed by Google.

Method 1: Domain Property (Recommended)

1. Go to Google Search Console
2. Click "Add Property"
3. Select "Domain" option
4. Enter your domain name (example.com)
5. Google will give you a DNS TXT record
6. Add this TXT record to your domain's DNS settings through your domain registrar
7. Wait a few minutes and click "Verify"

Method 2: HTML Tag Verification

1. Go to Google Search Console
2. Click "Add Property"
3. Select "URL prefix" option
4. Enter your full website URL (https://yoursite.com)
5. Choose "HTML tag" verification method
6. Copy the verification code
7. Add it to your Next.js metadata:

export const metadata = {
  verification: {
    google: 'your-verification-code-here',
  },
}
export const metadata = {
  verification: {
    google: 'your-verification-code-here',
  },
}

8. Deploy your changes and click "Verify"

After Verification

1. Submit your sitemap by going to "Sitemaps" in the left menu
2. Enter "sitemap.xml" and click "Submit"
3. Wait a few days for Google to crawl your site
4. Check the "Coverage" report to see which pages are indexed

Quick Checklist

• Metadata on all pages with unique titles
• Sitemap and robots.txt files created
• Images optimized with alt text
• Proper HTML structure with semantic tags
• Site added to Google Search Console
• Fast loading on mobile devices

For code examples, refer to the official Next.js documentation.