Technical SEO guide for developers — meta tags, structured data, sitemap generation, Core Web Vitals optimization, and Next.js-specific patterns for maximum search visibility.
Next.js 16 makes meta tags declarative with the Metadata API:
// app/layout.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: {
default: "Hardik Kanajariya | Full Stack Developer",
template: "%s | Hardik Kanajariya",
},
description: "Full Stack Developer specializing in Next.js, React, and TypeScript. Premium templates, SaaS tools, and custom development."
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
const post = await getPostBySlug(params.slug);
return {
title: post.title,
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
type: "article",
publishedTime: post.publishedAt.toISOString(),
authors: ["Hardik Kanajariya"],
images: [{ url: post.thumbnail, width: 1200, height: 630 }],
},
twitter: {
card: "summary_large_image",
title: post.title,
description: post.excerpt,
images: [post.thumbnail],
},
};
}
Add structured data for rich search results:
// Blog post with Article schema
function BlogPost({ post }) {
const jsonLd = {
"@context": "https://schema.org",
"@type": "Article",
headline: post.title,
description: post.excerpt,
image: post.thumbnail,
author: {
"@type": "Person",
name: "Hardik Kanajariya",
url: "https://hardikkanajariya.in",
sameAs: [
"https://www.linkedin.com/in/hardik-kanajariya/",
"https://x.com/hardik_web",
"https://www.instagram.com/kanajariyahardik/",
],
},
publisher: {
"@type": "Organization",
name: "Hardik Kanajariya",
},
datePublished: post.publishedAt,
dateModified: post.updatedAt,
};
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<article>{/* Post content */}</article>
</>
);
}
// Product with Product schema
function ProductPage({ product }) {
const jsonLd = {
"@context": "https://schema.org",
"@type": "Product",
name: product.name,
description: product.description,
image: product.images[0],
offers: {
"@type": "Offer",
price: product.price,
priceCurrency: "USD",
availability: "https://schema.org/InStock",
},
};
return (
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
);
}
// app/sitemap.ts
import type { MetadataRoute } from "next";
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
const posts = await prisma.post.findMany({
where: { published: true, deletedAt: null },
select: { slug: true, updatedAt: true },
});
const products = await prisma.product.findMany({
where: { published: true, deletedAt: null },
select: { slug: true, updatedAt: true },
});
return [
{ url: "https://hardikkanajariya.in", lastModified: new Date(), priority: 1 },
{ url: "https://hardikkanajariya.in/blog", lastModified: new Date(), priority: 0.8 },
{ url: "https://hardikkanajariya.in/store", lastModified: new Date(), priority: 0.8 },
...posts.map((post) => ({
url: `https://hardikkanajariya.in/blog/${post.slug}`,
lastModified: post.updatedAt,
priority: 0.6,
})),
...products.map((product) => ({
url: `https://hardikkanajariya.in/store/${product.slug}`,
lastModified: product.updatedAt,
priority: 0.7,
})),
];
}
Google uses Core Web Vitals as a ranking signal:
| Metric | Target | Our Platform Score | How |
|---|---|---|---|
| LCP | < 2.5s | 1.1s | Server Components, Image optimization |
| FID/INP | < 100ms | 12ms | Minimal client JS, efficient hydration |
| CLS | < 0.1 | 0.02 | Static dimensions, font optimization |
Key implementation details in our React 19 Performance Optimization guide.
import Image from "next/image";
<Image
src="/uploads/2026/02/project-screenshot.webp"
alt="Developer Portfolio SaaS Platform dashboard showing analytics"
width={1200}
height={630}
priority={isAboveFold}
loading={isAboveFold ? undefined : "lazy"}
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>
Always include:
alt text — tell search engines what the image showssaveOptimizedImage()sizes attribute — responsive loadingLink between related content to build topical authority:
All of these SEO patterns are implemented in our Developer Portfolio & SaaS Platform. You get:
Related articles:
SEO-optimized from the ground up. Our Developer Portfolio & SaaS Platform handles technical SEO so you can focus on content — starting at $299.
Get the latest articles, tutorials, and updates delivered straight to your inbox. No spam, unsubscribe at any time.