Next.js에서 SEO 최적화하는 방법 (SSR, SSG, ISR, 동적 경로 포함)

2025. 3. 5. 21:28ㆍ프론트엔드/Next JS

728x90

📌 Next.js에서 SEO 최적화하는 방법 (SSR, SSG, ISR, 동적 경로 포함)

✅ 1. SEO란?

**SEO(Search Engine Optimization, 검색 엔진 최적화)**는 구글, 네이버, 다음 같은 검색 엔진에서 웹페이지의 순위를 높이기 위해 필요한 최적화 기법입니다.

✅ SEO가 중요한 이유

검색 엔진 결과에서 더 높은 순위에 노출됨
트래픽 증가 → 더 많은 사용자가 웹사이트를 방문
SNS에서 공유할 때 미리보기(OG 메타 태그) 제공 가능

📌 Next.js에서는 SEO 최적화를 위해 next/head를 사용하여 메타 태그를 설정할 수 있습니다.

✅ 2. Next.js에서 SEO 적용 방법

📌 기본 SEO 설정 (next/head 활용)

Next.js에서 SEO 설정을 하려면 next/head 컴포넌트를 사용해야 합니다.

import Head from "next/head";

export default function Home() {
  return (
    <>
      <Head>
        <title>한입북스 | 도서 목록</title>
        <meta name="description" content="한입북스에서 다양한 도서를 만나보세요!" />
        <meta name="keywords" content="도서, 책, 한입북스, 책 추천" />
        <meta name="author" content="한입북스" />
      </Head>
      <h1>한입북스</h1>
    </>
  );
}

🔹 설정된 SEO 메타 태그 설명

<title>: 브라우저 탭 제목 & 검색 엔진 타이틀
<meta name="description">: 검색 엔진에 표시될 설명
<meta name="keywords">: 페이지의 키워드 (Google에서는 무시되지만 일부 검색 엔진에서 활용)
<meta name="author">: 저작자 정보

✅ 3. Next.js에서 SEO 최적화 방식 (SSG vs SSR vs ISR)

Next.js에서 SEO를 최적화하려면 정적 생성(SSG), 서버 사이드 렌더링(SSR), ISR 중 어떤 방식을 사용할지 결정하는 것이 중요합니다.

🔹 1) SSG(Static Site Generation)에서 SEO 적용

✅ getStaticProps를 사용하여 SEO에 최적화된 정적 HTML을 미리 생성
→ 정적인 블로그, 제품 상세 페이지, 도서 페이지 등에 적합

import { GetStaticProps } from "next";
import Head from "next/head";

export const getStaticProps: GetStaticProps = async () => {
  const book = await fetchBook(); // 도서 정보 가져오기
  return { props: { book } };
};

export default function BookPage({ book }) {
  return (
    <>
      <Head>
        <title>{book.title} | 한입북스</title>
        <meta name="description" content={book.description} />
        <meta property="og:image" content={book.coverImgUrl} />
      </Head>
      <h1>{book.title}</h1>
    </>
  );
}

✅ SEO 장점: 정적 HTML이 이미 생성되어 있어 검색 엔진이 쉽게 크롤링 가능
✅ 사용 예시: 블로그, 제품 상세 페이지

🔹 2) SSR(Server Side Rendering)에서 SEO 적용

✅ getServerSideProps를 사용하여 요청마다 서버에서 SEO 최적화된 HTML을 생성
→ 사용자 맞춤 페이지, 실시간 변경이 필요한 데이터에 적합

import { GetServerSideProps } from "next";
import Head from "next/head";

export const getServerSideProps: GetServerSideProps = async () => {
  const book = await fetchBook(); // 서버에서 데이터 가져오기
  return { props: { book } };
};

export default function BookPage({ book }) {
  return (
    <>
      <Head>
        <title>{book.title} | 한입북스</title>
        <meta name="description" content={book.description} />
        <meta property="og:image" content={book.coverImgUrl} />
      </Head>
      <h1>{book.title}</h1>
    </>
  );
}

✅ SEO 장점: 최신 데이터를 반영하면서도 검색 엔진이 크롤링 가능
✅ 사용 예시: 사용자별 맞춤 페이지, 뉴스 사이트

🔹 3) ISR(Incremental Static Regeneration)에서 SEO 적용

✅ revalidate를 설정하여 최신 데이터를 일정 시간마다 갱신
→ 정적인 페이지지만 자주 업데이트가 필요한 경우

export const getStaticProps = async () => {
  const book = await fetchBook();
  return {
    props: { book },
    revalidate: 10, // 10초마다 최신 데이터로 갱신
  };
};

✅ SEO 장점: 정적 페이지처럼 빠르면서도 최신 데이터를 유지 가능
✅ 사용 예시: 뉴스, 이벤트, 상품 목록

✅ 4. 동적 경로에서 SEO 최적화 (fallback 처리)

Next.js에서 동적 경로(getStaticPaths)를 사용하면 SEO에 중요한 메타 태그를 페이지마다 다르게 설정할 수 있습니다.

📌 문제: router.isFallback일 때 메타 태그가 적용되지 않음

router.isFallback 상태일 때 메타 태그가 적용되지 않는 문제가 발생할 수 있습니다.
→ 해결 방법: 로딩 화면에도 기본 메타 태그를 설정

import { useRouter } from "next/router";
import Head from "next/head";

export default function Page({ book }) {
  const router = useRouter();

  if (router.isFallback) {
    return (
      <>
        <Head>
          <title>한입북스</title>
          <meta property="og:image" content="/thumbnail.png" />
          <meta property="og:title" content="한입북스" />
          <meta
            property="og:description"
            content="한입 북스에 등록된 도서들을 만나보세요"
          />
        </Head>
        <div>로딩중입니다...</div>
      </>
    );
  }

  return (
    <>
      <Head>
        <title>{book.title}</title>
        <meta property="og:image" content={book.coverImgUrl} />
        <meta property="og:title" content={book.title} />
        <meta property="og:description" content={book.description} />
      </Head>
      <h1>{book.title}</h1>
    </>
  );
}

✅ SEO 해결: router.isFallback 상태에서도 기본 SEO 메타 태그 제공

✅ 5. Open Graph (OG) 메타 태그 활용 (SNS 공유 최적화)

SNS에서 공유될 때 페이지의 미리보기를 최적화하려면 OG(Open Graph) 메타 태그를 설정해야 합니다.

✅ SNS에서 링크를 공유할 때 썸네일과 설명이 자동으로 표시됨

✅ 최종 정리

✔️ SEO 최적화를 위해 next/head를 활용
✔️ SSG(정적 생성) 방식이 SEO에 가장 유리하지만, 실시간 데이터 반영이 필요하면 SSR 또는 ISR을 고려
✔️ 동적 경로(getStaticPaths)에서 fallback 처리를 주의해야 함
✔️ Open Graph 메타 태그를 설정하면 SNS 공유 시 최적화된 미리보기를 제공할 수 있음

🚀 Next.js에서 SEO를 최적화하여 검색 엔진과 SNS에서 더 많은 트래픽을 유도하세요! 🔥