chore: set seo

Author: hyochan

app/[lang]/leaderboards/page.tsx

@@ -1,3 +1,4 @@
+import type {Metadata} from 'next';
 import type {ReactElement} from 'react';
 import clsx from 'clsx';
 import {Inter} from 'next/font/google';
@@ -21,6 +22,24 @@ type Props = {
   params: Promise<{lang: string}>;
 };
 
+export async function generateMetadata({params}: Props): Promise<Metadata> {
+  const {lang} = await params;
+  const {leaderboards} = await getTranslates(lang as Locale);
+
+  return {
+    title: leaderboards.title,
+    description:
+      'Discover top GitHub developers ranked by their contributions, achievements, and coding activity.',
+    alternates: {
+      canonical: `/${lang}/leaderboards`,
+      languages: {
+        en: '/en/leaderboards',
+        ko: '/ko/leaderboards',
+      },
+    },
+  };
+}
+
 export default async function Page(props: Props): Promise<ReactElement> {
   const params = await props.params;
   const lang = params.lang as Locale;

app/[lang]/page.tsx

@@ -1,3 +1,4 @@
+import type {Metadata} from 'next';
 import type {ReactElement} from 'react';
 
 import type {StatsInfo} from '../../src/fetches/github';
@@ -10,6 +11,23 @@ type Props = {
   params: Promise<{lang: string}>;
 };
 
+export async function generateMetadata({params}: Props): Promise<Metadata> {
+  const {lang} = await params;
+  const {home} = await getTranslates(lang as Locale);
+
+  return {
+    title: home.developerPowerMeter,
+    description: home.developerPowerMeterDesc,
+    alternates: {
+      canonical: `/${lang}`,
+      languages: {
+        en: '/en',
+        ko: '/ko',
+      },
+    },
+  };
+}
+
 export default async function Page(props: Props): Promise<ReactElement> {
   const params = await props.params;
   const lang = params.lang as Locale;

app/[lang]/stats/[login]/page.tsx

@@ -1,10 +1,12 @@
+import type {Metadata} from 'next';
 import type {ReactElement} from 'react';
 
 import {
   getDoobooStats,
   getMonthlyContribution,
 } from '../../../../server/services/githubService';
 import {getTranslates} from '../../../../src/localization';
+import {siteUrl} from '../../../../src/utils/const';
 import Container from '../Container';
 
 import Scouter from './Scouter';
@@ -18,9 +20,43 @@ export const dynamic = 'force-dynamic';
 
 type Props = {
   params: Promise<{lang: string; login: string}>;
-  searchParams: Promise<{endDate?: string}>;
+  searchParams: Promise<{endDate?: string}>
 };
 
+export async function generateMetadata({params}: Props): Promise<Metadata> {
+  const {lang, login} = await params;
+
+  const title = `${login}'s GitHub Stats`;
+  const description = `Check ${login}'s GitHub contribution stats, achievements, and developer power level.`;
+
+  return {
+    title,
+    description,
+    alternates: {
+      canonical: `/${lang}/stats/${login}`,
+    },
+    openGraph: {
+      title,
+      description,
+      url: `${siteUrl}/${lang}/stats/${login}`,
+      images: [
+        {
+          url: `${siteUrl}/api/github-stats-advanced?login=${login}`,
+          width: 800,
+          height: 400,
+          alt: `${login}'s GitHub Stats`,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title,
+      description,
+      images: [`${siteUrl}/api/github-stats-advanced?login=${login}`],
+    },
+  };
+}
+
 export default async function Page(props: Props): Promise<ReactElement> {
   const params = await props.params;
   const searchParams = await props.searchParams;

app/[lang]/stats/page.tsx

@@ -1,3 +1,4 @@
+import type {Metadata} from 'next';
 import type {ReactElement} from 'react';
 
 import type {Locale} from '../../../src/i18n';
@@ -11,6 +12,23 @@ type Props = {
   params: Promise<{lang: string}>;
 };
 
+export async function generateMetadata({params}: Props): Promise<Metadata> {
+  const {lang} = await params;
+  const {stats} = await getTranslates(lang as Locale);
+
+  return {
+    title: stats.title,
+    description: stats.searchUserHint,
+    alternates: {
+      canonical: `/${lang}/stats`,
+      languages: {
+        en: '/en/stats',
+        ko: '/ko/stats',
+      },
+    },
+  };
+}
+
 export default async function Page(props: Props): Promise<ReactElement> {
   const params = await props.params;
   const lang = params.lang as Locale;

app/layout.tsx

@@ -2,11 +2,68 @@ import '../styles/output.css';
 import type {Metadata} from 'next';
 import type {ReactNode} from 'react';
 
+import {siteUrl} from '../src/utils/const';
+
 export const metadata: Metadata = {
-  title: 'github-stats',
-  description: 'All stats for developers',
+  metadataBase: new URL(siteUrl),
+  title: {
+    default: 'GitHub Stats - Developer Power Meter',
+    template: '%s | GitHub Stats',
+  },
+  description:
+    'Analyze your GitHub contributions and showcase your developer stats. Get detailed insights into your coding activity, contributions, and achievements.',
+  keywords: [
+    'GitHub',
+    'GitHub Stats',
+    'Developer Stats',
+    'GitHub Analytics',
+    'Contribution Graph',
+    'Developer Portfolio',
+    'GitHub Profile',
+    'Coding Stats',
+  ],
+  authors: [{name: 'hyochan', url: 'https://github.com/hyochan'}],
+  creator: 'hyochan',
+  publisher: 'github-stats',
   icons: {
     icon: '/favicon.ico',
+    apple: '/apple-touch-icon.png',
+  },
+  openGraph: {
+    type: 'website',
+    locale: 'en_US',
+    url: siteUrl,
+    siteName: 'GitHub Stats',
+    title: 'GitHub Stats - Developer Power Meter',
+    description:
+      'Analyze your GitHub contributions and showcase your developer stats. Get detailed insights into your coding activity.',
+    images: [
+      {
+        url: '/og-image.png',
+        width: 1200,
+        height: 630,
+        alt: 'GitHub Stats - Developer Power Meter',
+      },
+    ],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'GitHub Stats - Developer Power Meter',
+    description:
+      'Analyze your GitHub contributions and showcase your developer stats.',
+    images: ['/og-image.png'],
+    creator: '@peterCho001',
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      'max-video-preview': -1,
+      'max-image-preview': 'large',
+      'max-snippet': -1,
+    },
   },
 };
 

app/robots.ts

@@ -0,0 +1,16 @@
+import type {MetadataRoute} from 'next';
+
+import {siteUrl} from '../src/utils/const';
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: [
+      {
+        userAgent: '*',
+        allow: '/',
+        disallow: ['/api/', '/sign-in'],
+      },
+    ],
+    sitemap: `${siteUrl}/sitemap.xml`,
+  };
+}

app/sitemap.ts

@@ -0,0 +1,24 @@
+import type {MetadataRoute} from 'next';
+
+import {siteUrl} from '../src/utils/const';
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const locales = ['en', 'ko'];
+
+  const staticPages = ['', '/stats', '/leaderboards', '/sign-in'];
+
+  const sitemapEntries: MetadataRoute.Sitemap = [];
+
+  for (const locale of locales) {
+    for (const page of staticPages) {
+      sitemapEntries.push({
+        url: `${siteUrl}/${locale}${page}`,
+        lastModified: new Date(),
+        changeFrequency: page === '' ? 'daily' : 'weekly',
+        priority: page === '' ? 1 : 0.8,
+      });
+    }
+  }
+
+  return sitemapEntries;
+}

proxy.ts

@@ -78,6 +78,8 @@ export async function proxy(
 }
 
 export const config = {
-  // Matcher ignoring `/_next/`, `/api/`, `/auth/` and `/assets/`
-  matcher: ['/((?!api|auth|assets|_next/static|_next/image|favicon.ico|public).*)'],
+  // Matcher ignoring `/_next/`, `/api/`, `/auth/`, `/assets/`, sitemap.xml, robots.txt
+  matcher: [
+    '/((?!api|auth|assets|_next/static|_next/image|favicon.ico|public|sitemap.xml|robots.txt).*)',
+  ],
 };