16. SEO

16.1 Metadata Management

Metadata provides search engines and social platforms with essential information about a page. In Next.js, the metadata object exported from layout.tsx or page.tsx automatically generates the appropriate <head> tags.

Title Tag

The <title> tag appears in the browser tab and as the headline in search engine results pages (SERPs). Keeping it under 60 characters ensures it displays fully.

export const metadata = { title: "Acme Corp – Next.js Learning Platform", };

Best practice: Place the most important keyword near the beginning, followed by your brand name.

Meta Description

The <meta name="description"> tag offers a concise summary (≤ 160 characters) that influences click‑through rate. It should be compelling and include a call‑to‑action when appropriate.

export const metadata = { description: "Master Next.js from basics to advanced topics with hands‑on projects.", };

Open Graph (OG) Tags

OG tags control how content appears when shared on Facebook, LinkedIn, Twitter/X, etc. The essential properties are og:title, og:description, og:image, og:url, and og:type.

export const metadata = { openGraph: { title: "Next.js Master Roadmap", description: "Learn Next.js step‑by‑step with real‑world projects.", images: [{ url: "/og-image.png", width: 1200, height: 630, alt: "Course banner" }], url: "https://learnnextjs.com/course", type: "website", }, };

Image recommendations: Use a 1200 × 630 px image (ratio 1.91:1) with a file size under 5 MB for optimal loading.

16.2 Technical SEO Assets

Technical SEO ensures search engines can crawl, index, and understand your site efficiently. Next.js integrates well with tools like next-sitemap for automated sitemap and robots.txt generation.

Sitemap.xml

A sitemap is an XML file listing all URLs you want search engines to crawl. It can include optional tags such as <lastmod>, <changefreq>, and <priority>.

Configuration (next-sitemap.config.js)

module.exports = { siteUrl: "https://learnnextjs.com", generateRobotsTxt: true, };

Resulting /sitemap.xml snippet

<url> <loc>https://learnnextjs.com/about</loc> <lastmod>2024-09-26</lastmod> <changefreq>weekly</changefreq> <priority>0.8</priority> </url>

Priority values: Range from 0.0 to 1.0; higher values indicate more important pages relative to others on the same site.

Robots.txt

The robots.txt file instructs web crawlers which paths to allow or disallow. next-sitemap can generate it automatically.

User-agent: * Allow: / Disallow: /admin/ Sitemap: https://learnnextjs.com/sitemap.xml

Common directives:

Allow: / – permits crawling of the entire site.
Disallow: /private/ – blocks access to private directories.
Sitemap: <URL> – points crawlers to your sitemap.

Canonical URLs

Canonical tags prevent duplicate content penalties by specifying the preferred version of a page. In Next.js, you can set the canonical URL via the alternates field.

export const metadata = { alternates: { canonical: "https://learnnextjs.com/blog/post" }, };

Use canonicals when:

Content is accessible via multiple URLs (e.g., with tracking parameters).
You have syndicated content on other domains.
AMP or mobile versions exist alongside the desktop version.

16.3 Structured Data (JSON‑LD & Schema.org)

Structured data helps search engines understand the context of your content, enabling rich snippets, knowledge panels, and other enhanced SERP features. JSON‑LD is the recommended format for embedding Schema.org vocabulary.

Why JSON‑LD?

Separates data from HTML, making it easier to maintain.
Supported by Google, Bing, Yahoo, and Yandex.
Can be injected dynamically via <script type="application/ld+json">.

Article Schema Example

Below is a complete JSON‑LD object for an Article, as shown in the context.

{ "@context": "https://schema.org", "@type": "Article", "headline": "Next.js Performance Tips", "description": "Improve LCP and CLS in Next.js apps.", "image": "https://learnnextjs.com/assets/perf.jpg", "author": { "@type": "Person", "name": "Jane Doe" }, "publisher": { "@type": "Organization", "name": "LearnNextJS", "logo": { "@type": "ImageObject", "url": "https://learnnextjs.com/logo.png" } }, "datePublished": "2024-09-01", "dateModified": "2024-09-20" }

To insert this into a Next.js page:

export const metadata = {}; export default function Page() { return ( <> {/* page content */} ); }

Other Common Schema Types

Schema Type	Typical Use	Key Properties
`FAQPage`	Pages with a list of questions and answers	`mainEntity` (array of `Question` objects)
`Product`	E‑commerce product pages	`name`, `image`, `offers`, `review`
`BreadcrumbList`	Navigation hierarchy	`itemListElement` (ordered list of `ListItem`)
`LocalBusiness`	Physical store or service area	`name`, `address`, `geo`, `telephone`, `openingHours`

Implementing FAQ Schema

FAQ schema can generate expandable Q&A boxes directly in the SERP, improving visibility and click‑through.

{ "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "What is Next.js?", "acceptedAnswer": { "@type": "Answer", "text": "Next.js is a React framework that enables functionality such as server‑side rendering and static site generation." } }, { "@type": "Question", "name": "How do I add metadata in Next.js?", "acceptedAnswer": { "@type": "Answer", "text": "Export a metadata object from layout.tsx or page.tsx with title, description, openGraph, and alternates fields." } } ] }

Place the JSON‑LD inside a <Head> component as shown earlier.

Validating Structured Data

After implementation, validate your JSON‑LD using:

Google’s Rich Results Test ()
Schema Markup Validator ()
Google Search Console > Enhancements section

Common errors to avoid:

Missing required properties (e.g., @type or @context).
Using incorrect data types (e.g., supplying a string where an array is expected).
Providing URLs that are not accessible to crawlers (blocked by robots.txt).
Exceeding the recommended size for inline scripts (keep under ~50 KB).

Putting It All Together: A Complete Next.js SEO Setup

Below is a sample page.tsx for a blog post that demonstrates title, description, Open Graph, canonical URL, and JSON‑LD Article schema.

import type { Metadata } from 'next'; import { Head } from 'next/head'; export const metadata: Metadata = { title: "Next.js Performance Tips – LearnNextJS", description: "Learn how to improve LCP and CLS in Next.js apps with practical examples.", openGraph: { title: "Next.js Performance Tips", description: "Learn how to improve LCP and CLS in Next.js apps with practical examples.", images: [{ url: "/assets/perf-og.png", width: 1200, height: 630, alt: "Performance tips banner" }], url: "https://learnnextjs.com/blog/nextjs-performance-tips", type: "website", }, alternates: { canonical: "https://learnnextjs.com/blog/nextjs-performance-tips" }, }; export default function PerformanceTipsPage() { return ( <> Next.js Performance Tips Optimizing Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) is crucial for user experience and SEO. ); }

Summary of Key Takeaways

Keep title tags ≤ 60 chars and meta descriptions ≤ 160 chars for optimal SERP display.
Use Open Graph tags to control social sharing appearance; prioritize a 1200 × 630 px image.
Generate sitemap.xml and robots.txt automatically with next-sitemap; set appropriate changefreq and priority values.
Specify canonical URLs to avoid duplicate content issues.
Implement JSON‑LD structured data using Schema.org types (Article, FAQ, Product, etc.) to enable rich snippets.
Validate structured data regularly with Google’s testing tools and monitor via Search Console.
Combine these practices to maximize search visibility and social sharing. It covers setting accurate titles, descriptions, and Open Graph tags, configuring sitemaps and robots.txt, defining canonical URLs, and embedding JSON‑LD structured data to enhance visibility and click‑through rates.