페이지 라우터의 SEO 설정

1.Head

페이지 별로 Head컴포넌트 안에 작성하여 SEO 관련 메타 데이터를 설정할 수 있다.

import Head from "next/head";

export default Page() {
  return (
    <>
      <Head>
        <title>타이틀</title>
        <meata property="og:image" content={썸네일 주소} />
        <meata property="og:title" content={타이틀} />
        <meata property="og:description" content={설명} />
      </Head>
      <div>
        // ...
      </div>
    </>
  );
}

1.1 Fallbak 상태에서의 SEO 처리

동적 라우팅을 사용하는 페이지(예: book 상세 페이지)에서 fallback: true를 설정했을 때, 지정하지 않은 경로에 대해 SSR과 유사하게 동작한다.

이때 초기 HTML에 SEO 관련 메타 데이터가 포함되지 않는 문제가 발생할 수 있는데, 이를 방지하기 위해 fallback 상태에서도 기본적인 SEO 설정을 제공하는 것이 중요하다.

import { GetStaticPropsContext, InferGetStaticPropsType } from "next";
import Head from "next/head";
import { useRouter } from "next/router";
import fetchOneBook from "@/lib/fetch-one-book";
import styles from "./[id].module.css";

export const getStaticPaths = async () => {
  return {
    paths: [
      { params: { id: "1" } },
      { params: { id: "2" } },
      { params: { id: "3" } },
    ],
    fallback: true,
  };
};

export const getStaticProps = async (context: GetStaticPropsContext) => {
  const { id } = context.params!;
  const book = await fetchOneBook(Number(id));

  if (!book) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      book,
    },
  };
};

export default function Page({
  book,
}: InferGetStaticPropsType<typeof getStaticProps>) {
  const router = useRouter();

  // fallback 상태일 때, 기본적인 SEO 메타 데이터를 설정
  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>
      </>
    );
  }

  if (!book) return "문제가 발생했습니다. 다시 시도하세요.";

  const { title, subTitle, description, author, publisher, 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>
      {/* 페이지 내용 */}
    </>
  );
}

연관 게시글

https://woodstock.hashnode.dev/app-router-seo

[Pages Router] 검색 엔진 최적화(SEO)

Table of contents

페이지 라우터의 SEO 설정

1.Head

1.1 Fallbak 상태에서의 SEO 처리

연관 게시글

Subscribe to my newsletter

woodstock

woodstock