Next.js로 SEO 최적화하기: next-seo 패키지를 사용한 동적 SEO 설정

SEO 최적화를 위한 Next.js 설정 방법

안녕하세요! 오늘은 Next.js에서 SEO를 최적화하는 방법을 단계별로 설명해드릴게요. SEO, 즉 검색 엔진 최적화는 웹사이트가 검색 엔진 결과 페이지에서 더 높은 순위에 오를 수 있도록 하는 중요한 기술이죠. Next.js는 React 기반의 프레임워크로, SEO를 손쉽게 최적화할 수 있는 다양한 기능을 제공해요. 이 포스팅에서는 next-seo 패키지를 사용하여 meta 태그 설정, 동적 제목 설정, Open Graph 설정 등을 다룰 거예요.

1. 프로젝트 설정

먼저 Next.js 프로젝트를 설정해야겠죠? 새로운 Next.js 프로젝트를 생성하려면 다음 명령어를 사용하세요:

npx create-next-app my-seo-optimized-app
cd my-seo-optimized-app

이제 SEO 최적화를 위한 설정을 시작할 준비가 되었어요.

2. next-seo 설치

next-seo 패키지를 사용하면 SEO 설정을 더 간편하게 할 수 있어요. 먼저 next-seo 패키지를 설치해야해요:

npm install next-seo

3. 기본 SEO 설정

프로젝트 루트에 next-seo.config.js 파일을 생성하고, 기본 SEO 설정을 추가하세요:

// next-seo.config.js
export default {
  title: 'Default Title',
  description: 'This is the default description',
  openGraph: {
    type: 'website',
    locale: 'en_IE',
    url: 'https://www.example.com/',
    site_name: 'SiteName',
  },
  twitter: {
    handle: '@handle',
    site: '@site',
    cardType: 'summary_large_image',
  },
}

이제 _app.js 파일에서 이 설정을 불러와서 사용해요:

// pages/_app.js
import { DefaultSeo } from 'next-seo'
import SEO from '../next-seo.config'
 
function MyApp({ Component, pageProps }) {
  return (
    <>
      <DefaultSeo {...SEO} />
      <Component {...pageProps} />
    </>
  )
}
 
export default MyApp

이렇게 하면 기본 SEO 설정이 모든 페이지에 적용돼요.

4. 동적 SEO 설정

특정 페이지에서 동적으로 SEO를 설정하고 싶을 때는 NextSeo 컴포넌트를 사용하면 돼요. 예를 들어, 블로그 포스트 페이지에서 다음과 같이 설정할 수 있어요:

// pages/posts/[id].js
import { NextSeo } from 'next-seo'
 
const BlogPost = ({ post }) => (
  <>
    <NextSeo
      title={post?.title}
      description={post?.description}
      openGraph={{
        type: 'website',
        url: `https://www.example.com/posts/${post?.id}`,
        title: post?.title,
        description: post?.description,
        images: [
          {
            url: post?.thumbnail,
            width: 800,
            height: 600,
            alt: 'Thumbnail image'
          }
        ]
      }}
    />
    <h1>{post?.title}</h1>
    <p>{post?.content}</p>
  </>
)
 
export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`)
  const post = await res.json()
 
  return {
    props: {
      post,
    },
  }
}
 
export default BlogPost

위 예제에서 NextSeo 컴포넌트를 사용해 페이지마다 고유한 제목, 설명, Open Graph 데이터를 설정했어요. 이렇게 하면 각 페이지의 SEO를 동적으로 설정할 수 있답니다.

5. 기타 설정

next-seo를 사용하면 다양한 SEO 관련 설정을 쉽게 추가할 수 있어요. 예를 들어, Twitter Cards 설정을 추가하려면 다음과 같이 하면 돼요:

import { NextSeo } from 'next-seo'
 
const BlogPost = ({ post }) => (
  <>
    <NextSeo
      title={post?.title}
      description={post?.description}
      openGraph={{
        type: 'website',
        url: `https://www.example.com/posts/${post?.id}`,
        title: post?.title,
        description: post?.description,
        images: [
          {
            url: post?.thumbnail,
            width: 800,
            height: 600,
            alt: 'Thumbnail image'
          }
        ]
      }}
      twitter={{
        handle: '@handle',
        site: '@site',
        cardType: 'summary_large_image',
        title: post?.title,
        description: post?.description,
        image: post?.thumbnail
      }}
    />
    <h1>{post?.title}</h1>
    <p>{post?.content}</p>
  </>
)

이렇게 하면 Twitter Cards 설정도 동적으로 적용돼요.

마무리

오늘은 Next.js에서 next-seo 패키지를 사용해 SEO를 최적화하는 방법을 설명해봤어요. meta 태그 설정, 동적 제목 설정, Open Graph 설정, Twitter Cards 설정까지 다양한 방법을 다뤘어요. next-seo를 사용하면 더 간편하게 SEO를 설정할 수 있어서, Next.js를 사용해 쉽게 SEO 최적화된 웹사이트를 만들 수 있어요.

그럼20000

Vite: 차세대 프론트엔드 빌드 도구 NextJS를 왜 사용할까