March 9, 20251 min

Next.js SEO: Setting up meta tags for SEO of my portfolio website

This article covers the best SEO meta tags setup using Next.js 15's Metadata API, along with a sitemap and robots.txt for my portfolio website.

nextjs · seo · web development · personal website · portfolio

Next.js SEO: Setting up meta tags for SEO of my portfolio website

1. Metadata Configuration in app/layout.tsx

In Next.js 15, the generateMetadata function allows you to dynamically generate SEO metadata for each page.

tsx
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};
43

2. Generating a Dynamic Sitemap (sitemap.ts)

A sitemap helps search engines index your website efficiently.

Create a sitemap.ts file inside the app directory:

tsx
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}
25

3. Robots.txt for SEO Optimization

A robots.txt file controls how search engines crawl your site. Add robots.ts inside the app directory:

tsx
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}
15

4. Adding Structured Data (JSON-LD for Rich Results)

Google recommends structured data to enhance search rankings. Add this inside your layout.tsx:

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};
21

Final 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!

More on Nextjs SEO

Share this note

Comments

responses

0/2000

Loading comments…