Next.js - SEO 설정

App router SEO 최적화 방법

기본적으로 SEO 설정에 최적화를 하는 방법들은 여러가지가 있다.

1. sitemap 설정

2. rss 발행

3. 시멘틱 태그 설정

4. 메타 데이터 설정

이중에서 메타 데이터설정에 대해 알아보자.

app router 에서 설정하는 메타데이터

export const metadata: Metadata = {
  title: "한입 북스",
  description: "한입 북스에 등록된 도서를 만나보세요",
  openGraph: {
    title: "한입 북스",
    description: "한입 북스에 등록된 도서를 만나보세요",
    images: ["/thumbnail.png"],
  },
};

이런식으로 작성할 수 있으며,

개발자 도구의 element 탭에서 meta태그가 등록된 것을 확인할 수도 있다.
추가적으로, 자동으로 twitter: 태그도 알아서 추가된것을 확인할 수 있다.

만약 동적으로 데이터를 가져와서 작성하고 싶으면,

export function generateMetadata() {}을 예약된 함수의 이름으로 작성하게 되면, page 컴포넌트와 동일한 props들을 받을 수가 있다.

export async function generateMetadata({
  searchParams,
}: {
  searchParams: Promise<{ q?: string }>;
}) {
  const { q } = await searchParams;

  return {
    title: `${q}: 한입 북스 검색`,
    description: `${q}의 검색 결과 입니다`,
    openGraph: {
      title: `${q}: 한입 북스 검색`,
      description: `${q}의 검색 결과 입니다`,
      images: ["/thumbnail.png"],
    },
  };
}

이렇게 잘 적용이 되는것을 확인 할 수가 있다.

또는 외부 데이터를 fetch하여 넣을 수도 있다.

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;

  const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${id}`);
  if (!response.ok) {
    throw new Error(response.statusText);
  }

  const book: BookData = await response.json();
  return {
    title: `${book.title}`,
    description: `${book.description}`,
    openGraph: {
      title: `${book.title}`,
      description: `${book.description}`,
      images: [book.coverImgUrl],
    },
  };
}

이렇게 fetch()를 사용해 호출할 수도 있다.

여기서 만약 이 페이지에서 동일한 fetch api를 호출하는 fetch 메서드가 있다면 그럼 중복된 요청을 보내는것 아닌가? 싶지만, Next.js에서는 자체적으로 리퀘스트 메모이제이션을 사용하기 때문에 하나의 페이지를 렌더링할때 중복된 API 호출이더라도, 한번만 요청하도록 하기 때문에 문제가 없다.