Static Metadata in Next.js

Metadata is the foundation of on-page SEO. It tells search engines what your page is about and controls how your content appears in search results. Next.js 13+ provides a powerful Metadata API that makes implementation straightforward.

The Next.js Metadata API

Next.js offers two ways to define metadata: static (config-based) and dynamic (function-based). In this lesson, we'll focus on static metadata.

Defining Static Metadata

Use static metadata when your metadata doesn't depend on dynamic data:

// app/about/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'About Us',
  description: 'Learn about our company, mission, and team.',
}

export default function AboutPage() {
  return <main>...</main>
}

Essential Metadata Fields

Title

The title tag is the most important on-page SEO element. It appears in:

• Browser tabs
• Search engine results
• Social media shares

export const metadata: Metadata = {
  // Simple title
  title: 'SEO Guide for Next.js',
}

Best practices:

• Keep titles under 60 characters
• Include your primary keyword
• Make each page title unique
• Put important words first

Description

The meta description appears in search results below the title. While not a direct ranking factor, it affects click-through rates.

export const metadata: Metadata = {
  description: 'Learn how to implement SEO in Next.js applications. ' +
    'Covers metadata, structured data, sitemaps, and Core Web Vitals.',
}

Best practices:

• Keep descriptions under 160 characters
• Include a call-to-action when appropriate
• Accurately summarize the page content
• Include relevant keywords naturally

Keywords

While Google doesn't use the keywords meta tag for ranking, some other search engines might:

export const metadata: Metadata = {
  keywords: ['Next.js', 'SEO', 'React', 'Web Development'],
}

Using Metadata Templates

Define a template in your root layout to ensure consistent branding:

// app/layout.tsx
export const metadata: Metadata = {
  title: {
    template: '%s | FreeAcademy',
    default: 'FreeAcademy - Free Online Courses',
  },
  description: 'Learn new skills with free online courses',
}

Now child pages automatically get the suffix:

// app/courses/page.tsx
export const metadata: Metadata = {
  title: 'All Courses', // Renders as "All Courses | FreeAcademy"
}

Template Options

export const metadata: Metadata = {
  title: {
    template: '%s | My Site',    // Page title | My Site
    default: 'My Site',          // Used when no title specified
    absolute: 'Override Title',  // Ignores template
  },
}

The metadataBase Property

Set a base URL for resolving relative URLs in metadata:

// app/layout.tsx
export const metadata: Metadata = {
  metadataBase: new URL('https://freeacademy.ai'),
  openGraph: {
    images: '/og-image.png', // Resolves to https://freeacademy.ai/og-image.png
  },
}

This is especially useful for:

• Open Graph images
• Canonical URLs
• Alternate language URLs

Robots Meta Tag

Control how search engines index and follow links on specific pages:

export const metadata: Metadata = {
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
}

Common Robots Directives

// Allow indexing and link following (default)
robots: {
  index: true,
  follow: true,
}

// Prevent indexing but follow links
robots: {
  index: false,
  follow: true,
}

// Prevent indexing and don't follow links
robots: {
  index: false,
  follow: false,
}

// Or use shorthand
robots: 'noindex, nofollow'

Complete Static Metadata Example

// app/about/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'About Us',
  description: 'Learn about our company, mission, and the team behind FreeAcademy.',
  keywords: ['about', 'team', 'mission', 'education'],
  authors: [{ name: 'FreeAcademy Team' }],
  robots: {
    index: true,
    follow: true,
  },
}

export default function AboutPage() {
  return (
    <main>
      <h1>About Us</h1>
      {/* Page content */}
    </main>
  )
}

Summary

In this lesson, you learned:

• How to use static metadata exports in Next.js
• Essential fields: title, description, keywords
• Using templates for consistent branding
• The metadataBase property for URL resolution
• Robots directives to control indexing

In the next lesson, we'll cover dynamic metadata using generateMetadata for pages with route parameters.