1. Metadata Configuration in app/layout.tsx
In Next.js 15, the generateMetadata function allows you to dynamically generate SEO metadata for each page.
1export const metadata = {
2 title: "Your Name | Portfolio",
3 description:
4 "Discover the portfolio of [Your Name], a Frontend Engineer specializing in React, Next.js, and modern web technologies.",
5 keywords: [
6 "Frontend Engineer",
7 "React Developer",
8 "Next.js Portfolio",
9 "Web Developer",
10 "JavaScript",
11 "TypeScript",
12 ],
13 authors: [{ name: "Your Name", url: "https://yourwebsite.com" }],
14 creator: "Your Name",
15 openGraph: {
16 title: "Your Name | Portfolio",
17 description:
18 "Explore projects, blog posts, and case studies from [Your Name], a web developer focused on modern technologies.",
19 url: "https://yourwebsite.com",
20 siteName: "Your Name's Portfolio",
21 images: [
22 {
23 url: "https://yourwebsite.com/images/og-image.jpg",
24 width: 1200,
25 height: 630,
26 alt: "Your Name's Portfolio",
27 },
28 ],
29 type: "website",
30 },
31 twitter: {
32 card: "summary_large_image",
33 title: "Your Name | Portfolio",
34 description:
35 "Explore projects, blog posts, and case studies from [Your Name], a web developer focused on modern technologies.",
36 images: ["https://yourwebsite.com/images/og-image.jpg"],
37 creator: "@yourTwitterHandle",
38 },
39 alternates: {
40 canonical: "https://yourwebsite.com",
41 },
42};
432. Generating a Dynamic Sitemap (sitemap.ts)
A sitemap helps search engines index your website efficiently.
Create a sitemap.ts file inside the app directory:
1import { MetadataRoute } from "next";
2
3export default function sitemap(): MetadataRoute.Sitemap {
4 return [
5 {
6 url: "https://yourwebsite.com",
7 lastModified: new Date().toISOString(),
8 changeFrequency: "monthly",
9 priority: 1.0,
10 },
11 {
12 url: "https://yourwebsite.com/projects",
13 lastModified: new Date().toISOString(),
14 changeFrequency: "monthly",
15 priority: 0.8,
16 },
17 {
18 url: "https://yourwebsite.com/blog",
19 lastModified: new Date().toISOString(),
20 changeFrequency: "weekly",
21 priority: 0.9,
22 },
23 ];
24}
253. Robots.txt for SEO Optimization
A robots.txt file controls how search engines crawl your site. Add robots.ts inside the app directory:
1import { MetadataRoute } from "next";
2
3export default function robots(): MetadataRoute.Robots {
4 return {
5 rules: [
6 {
7 userAgent: "*",
8 allow: "/",
9 disallow: ["/admin", "/private"],
10 },
11 ],
12 sitemap: "https://yourwebsite.com/sitemap.xml",
13 };
14}
154. Adding Structured Data (JSON-LD for Rich Results)
Google recommends structured data to enhance search rankings. Add this inside your layout.tsx:
1export const metadata = {
2 other: {
3 "application/ld+json": JSON.stringify({
4 "@context": "https://schema.org",
5 "@type": "Person",
6 name: "Your Name",
7 url: "https://yourwebsite.com",
8 sameAs: [
9 "https://twitter.com/yourTwitterHandle",
10 "https://github.com/yourGithubHandle",
11 "https://linkedin.com/in/yourLinkedInHandle",
12 ],
13 jobTitle: "Frontend Engineer",
14 worksFor: {
15 "@type": "Organization",
16 name: "Your Company Name",
17 },
18 }),
19 },
20};
21Final Notes
✅ Metadata API ensures best SEO practices with Open Graph, Twitter cards, and JSON-LD.
✅ Dynamic sitemap allows search engines to discover your content.
✅ Robots.txt manages crawl permissions for search engines.
✅ JSON-LD structured data improves rich snippets and search ranking.
This setup ensures your Next.js portfolio website is optimized for search engines. 🚀 Let me know if you need refinements!
