SEO in Next.js: Metadata, Open Graph & Social Sharing (Complete Guide)
I'm a Senior Front-End Engineer with 12+ years of experience in JavaScript-based technologies, UI architecture, and platform modernization. I have strong expertise in React.js, Next.js, TypeScript, and WordPress headless systems.
Search Engine Optimization (SEO) in modern web applications is no longer just about meta tags. With Next.js App Router, SEO has become declarative, dynamic, and extremely powerful — if implemented correctly.
In this article, I’ll walk through:
How SEO works in Next.js (App Router)
Using the Metadata API correctly
Open Graph & Twitter cards for social sharing
Common mistakes developers still make
How I implemented SEO for my portfolio & blog
🚀 Why SEO Matters for Frontend Developers
SEO is not just a marketing concern anymore.
As frontend developers, we control:
Page structure
Metadata
Performance (Core Web Vitals)
Social preview cards
Crawlability
A well-optimized Next.js site:
Ranks better
Gets higher LinkedIn / WhatsApp CTR
Looks professional when shared
Improves perceived quality of your portfolio
🧩 SEO in Next.js App Router (Quick Overview)
Next.js provides a Metadata API that allows you to define SEO at:
Global level (
layout.tsx)Page level (
page.tsx)Dynamic routes (
[slug]/page.tsx)
This metadata is server-rendered and visible to search engines and social crawlers.
🌍 Global SEO Setup (layout.tsx)
This is where you define default SEO for your entire website.
export const metadata = {
title: {
default: "Gulshan Kumar - Senior React.js / UI Developer",
template: "%s | Gulshan Kumar",
},
description: "Senior React.js developer with 12+ years of experience.",
metadataBase: new URL("https://gulashan.vercel.app"),
openGraph: {
type: "website",
title: "Gulshan Kumar Portfolio",
description: "Modern frontend portfolio with blogs and tools",
images: [
{
url: "/gulshan.png",
width: 1200,
height: 630,
},
],
},
twitter: {
card: "summary_large_image",
creator: "@gulshankumar",
},
};
✅ This ensures every page has SEO fallback values.
📰 Page-Level SEO (page.tsx)
For static pages like /blog or /speed-test, you can override metadata:
export const metadata = {
title: "Blog",
description: "Frontend engineering blogs on React and Next.js",
};
🔥 Dynamic SEO for Blog Posts ([slug]/page.tsx)
This is where Next.js really shines.
export async function generateMetadata({ params }) {
const post = await fetchPost(params.slug);
return {
title: post.title,
description: post.brief,
openGraph: {
title: post.title,
description: post.brief,
images: [
{
url: post.coverImage.url,
width: 1200,
height: 630,
},
],
},
twitter: {
card: "summary_large_image",
title: post.title,
description: post.brief,
images: [post.coverImage.url],
},
};
}
💡 This ensures:
Each blog post has unique SEO
Social platforms show the correct image & title
Better CTR when shared on LinkedIn, WhatsApp, X
🖼 Open Graph Images (Most Common Mistake)
❌ Mistake developers make:
Using relative URLs
Small images
Missing OG tags
✅ Best practices:
Use absolute URLs
Image size: 1200 × 630
Use
summary_large_imagefor Twitter
🔗 Social Sharing: How Cards Are Generated
Important clarification:
Social cards are NOT controlled by your share buttons.
Platforms like:
LinkedIn
Facebook
WhatsApp
X
👉 Fetch your page URL
👉 Read HTML <head>
👉 Extract OG & Twitter meta
👉 Cache aggressively
That’s why SEO metadata matters more than UI code.
🧠 Structured Data (JSON-LD)
To improve discoverability, add structured data:
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Gulshan Kumar",
"jobTitle": "Senior React.js Developer",
"url": "https://gulashan.vercel.app"
}
This helps Google understand who you are, not just what your site is.
🛑 Common SEO Mistakes in Next.js
❌ Relying on <Head> manually
❌ Forgetting metadataBase
❌ Using client components for SEO
❌ Testing only on localhost
❌ Ignoring social preview testing tools
✅ Tools to Test Your SEO
LinkedIn Post Inspector
Facebook Sharing Debugger
Twitter Card Validator
Google Rich Results Test
Lighthouse SEO Audit
🎯 Final Thoughts
SEO in Next.js is no longer complex — but it does require discipline.
If you:
Use Metadata API correctly
Generate dynamic SEO for blogs
Add proper Open Graph images
Structure your content well
You’ll get:
✅ Better rankings
✅ Higher social reach
✅ Professional-grade portfolio
