정적 메타데이터 설정

Next.js에서 정적 메타데이터를 설정하는 것은 SEO(검색 엔진 최적화)와 소셜 미디어 공유를 위해 중요합니다.

이 절에서는 Next.js 애플리케이션에서 정적 메타데이터를 설정하는 방법, 그 영향, 그리고 best practices에 대해 알아보겠습니다.

메타데이터 파일 사용법

Next.js 13.2 버전부터는 app 디렉토리 내에 layout.js 또는 page.js 파일에서 메타데이터를 정의할 수 있습니다.

// app/layout.js
export const metadata = {
  title: 'My Next.js App',
  description: 'This is a Next.js app with static metadata',
}
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

기본 메타 태그 설정

기본적인 메타 태그는 다음과 같이 설정할 수 있습니다.

export const metadata = {
  title: 'My Next.js App',
  description: 'This is a Next.js app with static metadata',
  keywords: ['Next.js', 'React', 'JavaScript'],
  author: 'Your Name',
  viewport: 'width=device-width, initial-scale=1',
}

Open Graph 프로토콜 활용

Open Graph 프로토콜을 사용하면 소셜 미디어에서 웹페이지가 더 풍부하게 표시됩니다.

export const metadata = {
  openGraph: {
    title: 'My Next.js App',
    description: 'This is a Next.js app with Open Graph metadata',
    images: [
      {
        url: 'https://example.com/og-image.jpg',
        width: 1200,
        height: 630,
        alt: 'My custom Open Graph image',
      },
    ],
    type: 'website',
  },
}

Favicon 및 기타 링크 태그 설정

Favicon과 기타 링크 태그는 다음과 같이 설정할 수 있습니다.

export const metadata = {
  icons: {
    icon: '/favicon.ico',
    apple: '/apple-icon.png',
  },
  manifest: '/site.webmanifest',
}

3장 페이지 생성하기와의 연결

13장의 정적 메타데이터 설정은 3장에서 다룬 페이지 생성과 밀접하게 연관됩니다. 각 페이지나 레이아웃에서 메타데이터를 설정함으로써, 생성된 각 페이지에 대해 고유하고 관련성 있는 메타데이터를 제공할 수 있습니다. 이는 SEO를 향상시키고 각 페이지의 내용을 더 잘 표현할 수 있게 해줍니다.

예를 들어, 블로그 포스트 페이지를 만들 때 다음과 같이 동적 메타데이터를 설정할 수 있습니다.

// app/blog/[slug]/page.js
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug)
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.featuredImage],
    },
  }
}
 
export default function BlogPost({ params }) {
  // 블로그 포스트 컴포넌트 내용
}

실습 : 블로그 홈페이지 정적 메타데이터 구성

블로그 홈페이지에 대한 완전한 정적 메타데이터 세트를 구성해보겠습니다.

// app/page.js
export const metadata = {
  title: 'My Tech Blog',
  description: 'Exploring the latest in web development and technology',
  keywords: ['web development', 'technology', 'programming', 'Next.js'],
  author: 'Your Name',
  openGraph: {
    title: 'My Tech Blog',
    description: 'Exploring the latest in web development and technology',
    url: 'https://myblog.com',
    siteName: 'My Tech Blog',
    images: [
      {
        url: 'https://myblog.com/og-image.jpg',
        width: 1200,
        height: 630,
        alt: 'My Tech Blog',
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'My Tech Blog',
    description: 'Exploring the latest in web development and technology',
    creator: '@yourtwitterhandle',
    images: ['https://myblog.com/twitter-image.jpg'],
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
  icons: {
    icon: '/favicon.ico',
    shortcut: '/shortcut-icon.png',
    apple: '/apple-icon.png',
    other: {
      rel: 'apple-touch-icon-precomposed',
      url: '/apple-touch-icon-precomposed.png',
    },
  },
  manifest: '/site.webmanifest',
  verification: {
    google: 'google-site-verification-code',
    yandex: 'yandex-verification-code',
  },
}
 
export default function HomePage() {
  return (
    <main>
      <h1>Welcome to My Tech Blog</h1>
      {/* 블로그 홈페이지 내용 */}
    </main>
  )
}

이 실습에서는 다음과 같은 메타데이터를 설정했습니다.

기본 메타 태그 (title, description, keywords, author)
Open Graph 메타데이터
Twitter 카드 메타데이터
로봇 메타 태그
Favicon 및 기타 아이콘
웹 앱 매니페스트
사이트 확인 메타 태그

이러한 포괄적인 메타데이터 설정은 SEO를 향상시키고, 소셜 미디어에서의 공유를 개선하며, 다양한 플랫폼과 디바이스에서 웹사이트의 표현을 최적화합니다.

Next.js의 정적 메타데이터 설정 기능을 활용하면 검색 엔진과 소셜 미디어 플랫폼에서 웹사이트의 가시성과 표현을 크게 개선할 수 있습니다. 각 페이지나 레이아웃에 맞는 적절한 메타데이터를 설정하고, Open Graph와 Twitter 카드 메타데이터를 포함하여 소셜 미디어 공유를 최적화하는 것이 중요합니다. 또한, favicon과 웹 앱 매니페스트를 설정하여 다양한 환경에서 일관된 브랜드 이미지를 제공할 수 있습니다.

메모이제이션 및 리렌더링 최적화 동적 메타데이터 생성