Section 3. Page Router 핵심 정리(8)

OlMinJe·2025년 10월 2일

next.js

Next.js

목록 보기

9/20

인프런 "한 입 크기로 잘라먹는 Next.js" 수강

SEO 설정하기

1. 기본 SEO 설정

Next.js에서는 next/head에서 제공하는 Head 컴포넌트를 불러와서 SEO 설정을 해줄 수. 있다.

import Head from 'next/head';

export default function Home({ allBooks, randomBooks }) {
  return (
    <Head>
      {/* 페이지 이름 */}
      <title>한입북스</title>

      {/* 오픈 그래프 태그 */}
      {/* 썸네일 이미지는 public 폴더 기준 경로 */}
      <meta property="og:image" content="/thumbnail.png" />

      {/* 타이틀 */}
      <meta property="og:title" content="한입북스" />

      {/* 설명 */}
      <meta property="og:description" content="한입북스에 등록된 도서들을 만나보세요" />
    </Head>
  );
}

기본 SEO 설정하기

✅ 요약하면,

<title> : 페이지 제목
<meta property="og:image"> : 미리보기 썸네일
<meta property="og:title"> : 공유될 때 보여줄 제목
<meta property="og:description"> : 공유될 때 보여줄 설명

이렇게만 넣어도 기본적인 SEO는 끝!

2. 상세 페이지에 SEO 반영하기

상세 페이지도 마찬가지다. 다만 책 데이터마다 내용이 다르니 동적으로 바꿔주는게 제일 좋다!

import { useRouter } from 'next/router';

export default function Page({ book }) {
  const router = useRouter();
  if (router.isFallback) return '로딩 중입니다...';

  const { title, description, coverImgUrl } = book;

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

상세 SEO 반영하기

이렇게 하면 서버에서 받아온 데이터로, 책에 맞는 메타태그가 적용됨!

⚠️ 주의할 점: SEO가 반영되지 않는 단점

SSG(동적 경로) + fallback: true 옵션을 사용했을 때는 빌드 타임에 페이지가 미리 만들어지지 않아서, 페이지에 처음 접근하면 SEO 메타 태그가 누락될 수 있다.

즉, 페이지 처음 요청 시엔 "로딩 중입니다..." 같은 상태만 보이고, 메타태그가 적용되지 않음.

이럴 땐 isFallback 상태일 때도 기본 메타태그를 넣어주면 된다.

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>
    </>
  );
}