SEO in Next.js: Metadata, Open Graph Images, and Canonical URLs

Introduction

Good SEO starts with the little things: a clear title, a compelling description, the right social image, and a single preferred URL. For small business owners, founders, and marketers using Next.js, getting these pieces right means better search visibility, cleaner social previews, and more clicks from the channels that matter.

This guide explains the practical steps you should take in a Next.js project — in plain language, with decisions you can act on today.

What matters most for SEO in Next.js

Search engines and social sites read the HTML your server returns. That makes server-rendered metadata (title, description, Open Graph, canonical link) the most reliable way to control how pages appear in search results and social previews.

Essential tags every important page should include: - title (what shows in search results and browser tabs) - meta description (short summary for search snippets) - rel="canonical" (your preferred URL) - Open Graph: og:title, og:description, og:image, og:url, og:type - Twitter card: twitter:card, twitter:title, twitter:description, twitter:image

Next.js: where to put metadata

Next.js gives you two common approaches: the pages router (older) and the app router (recommended).

• If you use pages/, add tags with next/head and ensure pages are prerendered (SSG or SSR) so bots see them.
• If you use app/, prefer the built-in metadata API (export metadata or generateMetadata). It produces server-rendered tags that social scrapers and search engines can read immediately.

Tip: Make server-rendered metadata the default for SEO-critical pages so previews and indexing are predictable.

Open Graph images — pick a practical strategy

A social preview image makes a big difference in click-through rates. Choose one of these approaches based on your scale and budget:

1. Static images stored in public/ or CDN
2. Pros: simple, fast, cheap

3. Cons: not personalized per article or product

4. On-the-fly generation (edge functions or image API)

5. Pros: dynamic text/branding, one template, consistent style

6. Cons: needs caching and can add complexity

7. Third-party or headless-browser rendering (Puppeteer)

8. Pros: pixel-perfect control
9. Cons: heavier infra and cost

Quick best practices for OG images: - Use 1200×630 px (1.91:1) for consistent previews. - Keep file sizes small (<200 KB) and serve from a CDN. - Provide a stable, absolute URL for og:image so scrapers can fetch it.

Canonical URLs: keep link equity focused

Canonical links tell search engines which URL you want indexed when the same content appears multiple times (filters, query strings, localized pages).

Simple rules: - Always use absolute URLs (https://yourdomain/path). - Store a single SITE_URL env var and build canonicals from it. - For paginated lists, either: - canonicalize to page 1 (if each page is thin), or - use self-referential canonicals plus rel="prev"/rel="next" (if pages have unique value).

Avoid canonical chains and do not rely solely on robots.txt to hide low-value URLs.

Handling dynamic pages and scale

Dynamic routes (blog posts, product pages) need unique metadata per resource. In Next.js app router, use generateMetadata to fetch the item and return metadata with openGraph and alternates.canonical set to the absolute product or post URL.

When generating OG images for dynamic content: - Create a stable, cacheable URL (e.g., /api/og/slug.png). - Cache aggressively at the CDN and warm the cache on publish if possible. - Provide a branded fallback image for failures.

Quick checklist before you publish

• [ ] Server-rendered title and meta description are present and unique.
• [ ] rel="canonical" is absolute and resolves to 200.
• [ ] Open Graph and Twitter tags exist and reference reachable images.
• [ ] OG images use recommended dimensions and are CDN-served.
• [ ] Pagination and filter pages have a clear canonical strategy.
• [ ] Use platform debuggers (Facebook Sharing Debugger, Twitter Card Validator) to force re-scrapes after updates.

Where to get help and examples

For hands-on support, templates, and a detailed walkthrough tailored to business sites, check out our resources at https://prateeksha.com and the blog at https://prateeksha.com/blog. If you want the exact tutorial that inspired this checklist, read https://prateeksha.com/blog/seo-nextjs-metadata-og-canonical for a deeper implementation guide.

Conclusion — what to do next

Start by auditing your most important pages (home, product pages, top blog posts). Make sure metadata is server-rendered, canonical URLs are absolute and consistent, and OG images are reachable by social scrapers. These three fixes often produce the biggest immediate uplift in how your site looks in search and social — and they’re quick wins for traffic and leads.

Ready to move faster? Use the checklist above on your next deploy and reach out through https://prateeksha.com for implementation help.