Next.js에서 SEO 최적화 기술

18 Oct 2023

nextjs

SEO(검색 엔진 최적화)는 웹 페이지가 검색 엔진에서 잘 검색되도록 하는 프로세스입니다. 이는 웹 사이트의 가시성을 높이고, 트래픽을 증가시켜 사용자 앞에 노출시키는 데 도움을 줍니다.

Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)을 제공하여 웹 사이트의 성능과 SEO를 개선하는 데 도움이 됩니다. Next.js는 기본적으로 SEO를 고려하고 구축되어 있지만 몇 가지 추가적인 기술을 사용하여 SEO를 최적화할 수 있습니다.

1. 메타 태그 사용

메타 태그는 웹 페이지의 정보를 설명하는데 사용되는 HTML 요소입니다. 웹 페이지의 제목, 설명, 키워드 등을 메타 태그를 통해 제공하면 검색 엔진이 해당 정보를 쉽게 인식할 수 있습니다. Next.js에서는 next/head 모듈을 사용하여 메타 태그를 쉽게 추가할 수 있습니다.

import Head from 'next/head';

function MyPage() {
  return (
    <>
      <Head>
        <title>페이지 제목</title>
        <meta name="description" content="페이지 설명" />
        <meta name="keywords" content="키워드1, 키워드2, 키워드3" />
        {/* 추가적인 메타 태그들 */}
      </Head>
      {/* 페이지 내용 */}
    </>
  );
}

2. 컴포넌트 분할

Next.js는 동적 라우팅과 코드 분할 기능을 제공하여 페이지 별로 필요한 컴포넌트들을 독립적으로 로드할 수 있습니다. 이를 통해 초기 페이지 로딩 속도를 개선하고 사용자 경험을 향상시킬 수 있습니다. 또한, 검색 엔진 크롤러는 동적으로 로드되는 컴포넌트들도 인식할 수 있기 때문에 SEO에도 도움이 됩니다.

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/DynamicComponent'));

function MyPage() {
  return (
    <>
      {/* 고정 컴포넌트 */}
      <DynamicComponent />
      {/* 동적으로 로드되는 컴포넌트 */}
    </>
  );
}

3. Sitemap 생성

Sitemap은 웹 사이트의 구조와 페이지를 검색 엔진에 알려주는 역할을 합니다. 이를 통해 검색 엔진은 웹 사이트를 효율적으로 크롤링하고 인덱싱할 수 있습니다. Next.js에서는 next-sitemap 모듈을 사용하여 간편하게 sitemap을 생성할 수 있습니다.

npm install next-sitemap

next.config.js 파일을 생성하여 sitemap 설정을 추가합니다.

module.exports = {
  // 기존 설정
  // ...
  sitemap: {
    hostname: 'https://example.com',
    exclude: ['/admin'],
    // 추가적인 설정들
  },
};

4. URL 구조 최적화

URL 구조는 SEO에 큰 영향을 미칩니다. 짧고 명확한 URL 구조를 유지하고, 키워드를 포함시키는 것이 좋습니다. Next.js에서는 동적 라우팅을 통해 URL 구조를 자유롭게 설계할 수 있으므로, SEO에 맞는 URL 구조를 유지할 수 있습니다.

// 동적 라우팅 예시
// pages/blog/[slug].jsx
function BlogPost({ post }) {
  // 블로그 포스트 내용
}

export async function getStaticPaths() {
  // 블로그 포스트 목록 가져오기
  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));

  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params }) {
  // slug에 해당하는 블로그 포스트 가져오기
  const post = findPostBySlug(params.slug);

  return {
    props: {
      post,
    },
  };
}

위의 예제에서 [slug]는 동적으로 변경되는 부분을 나타냅니다.

위에서 소개한 기술들을 활용하여 Next.js 웹 사이트의 SEO를 최적화할 수 있습니다. 이러한 SEO 최적화는 검색 엔진에서 높은 순위로 웹 사이트를 노출시키고, 트래픽을 증가시키는 데 도움을 줄 것입니다.

더 자세한 정보를 원하시면 Next.js 공식 문서를 참고하시기 바랍니다.