[next.js] SEO 최적화 과정

SEO 최적화는 어떻게 하는 것일까?

우선, 메타데이터 부터 어떻게 처리했는지 확인해보자

1. Metadata 설정 파일 (`metadata.ts`)

SEO 최적화를 위해 Next.js에서는 metadata.ts를 생성하고, 해당 파일에서 전역 메타데이터를 관리합니다.

📌 `metadata.ts` 파일 내용

import { Metadata, Viewport } from 'next';

export const metadata: Metadata = {
  title: {
    template: '%s | Urdego?!',
    default: 'Urdego?!',
  },
  description: 'Where am I? Urdego!',
  icons: {
    icon: '/favicon.svg',
  },
  openGraph: {
    title: 'Urdego?! - Discover Places!',
    description: 'Guess places with friends and have fun!',
    images: [
      {
        url: '/thumbnail.jpg',
        width: 800,
        height: 600,
        alt: 'Urdego Thumbnail',
      },
    ],
    url: '<https://urdego.com>',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Urdego?! - Discover Places!',
    description: 'Guess places with friends and have fun!',
    images: ['/thumbnail.jpg'],
  },
  alternates: {
    canonical: '<https://urdego.com>',
  },
};

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  maximumScale: 1,
};

2. `RootLayout.tsx`에서 Metadata 적용

Next.js의 RootLayout.tsx에서 metadata.ts를 가져와 SEO 메타데이터를 글로벌하게 설정합니다.

📌 `RootLayout.tsx` 파일

import StyledComponentsRegistry from '@/lib/registry';
import { ReactNode } from 'react';
import { metadata, viewport } from '@/app/metadata';
import ClientLayout from './clientLayout';

export { metadata };
export { viewport };

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="ko">
      <body suppressHydrationWarning>
        <StyledComponentsRegistry>
          <ClientLayout>{children}</ClientLayout>
        </StyledComponentsRegistry>
      </body>
    </html>
  );
}

📌 주요 역할

✅ metadata.ts에서 가져온 metadata를 export하여 Next.js가 <head> 태그를 자동 생성하도록 설정. ✅ viewport 설정을 함께 적용하여 모바일 UX 최적화. ✅ <html lang="ko"> 속성을 추가하여 한국어 페이지임을 검색 엔진에 명확히 전달.

3. Metadata가 자동으로 적용되는 방식

Next.js에서는 metadata.ts에서 정의한 값을 RootLayout.tsx에서 export하면, Next.js가 이를 자동으로 <head> 태그에 추가합니다.

📌 자동 생성되는 `<head>` 태그 예시

<head>
  <title>Home | Urdego?!</title>
  <meta name="description" content="Where am I? Urdego!" />
  <link rel="icon" href="/favicon.svg" />
  <meta property="og:title" content="Urdego?! - Discover Places!" />
  <meta property="og:description" content="Guess places with friends and have fun!" />
  <meta property="og:image" content="/thumbnail.jpg" />
  <meta property="og:url" content="<https://urdego.com>" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>

1. Metadata 설정 파일 (metadata.ts)

📌 metadata.ts 파일 내용

2. RootLayout.tsx에서 Metadata 적용

📌 RootLayout.tsx 파일