앱 라우터의 SEO 설정

---

1.Metadata

App Router에서는 Pages Router의 Head컴포넌트를 대체하는 metadata객체를 이용해 페이지의 메타데이터를 설정할 수 있다.

import { Metadata } from 'next';

export const metadata: Metadata = {
  title: "타이틀",
  description: "설명"
  openGraph: {
    title: "타이틀,
    description: "설명",
    images: ["썸네일 주소"],
  },
};

export default function Page() {
  return (
    // 페이지 컨텐츠
  );
}

1.1 동적 메타데이터 생성

동적 라우트나 검색 페이지와 같이 페이지 내용에 따라 메타 데이터가 변경되어야 하는 경우, generateMetadata함수를 사용할 수 있다.

1.1.1 검색 페이지 예시

아래의 예제는 URL의 검색 파라미터를 사용하여 동적으로 메타데이터를 생성한다.

import { Metadata } from 'next';

type PropsType = {
  searchParams: {
    q?: string;
  };
};

export function generateMetadata({ searchParams }: PropsType): Metadata {
  const query = searchParams.q || '전체';
  return {
    title: `${query} : 검색`,
    description: `${query} 검색 결과입니다.`,
    openGraph: {
      title: `${query} : 검색`,
      description: `${query} 검색 결과입니다.`,
      images: ["/thumbnail.png"],
    },
  };
}

export default function Page({ searchParams }: PropsType) {
  // 검색 결과 렌더링
}

1.1.2 상세 페이지 예시

아래의 예제는 도서 id를 사용하여 서버에서 도서 정보를 가져온 후, 그 정보를 바탕으로 메타데이터를 동적으로 생성한다.

import { Metadata } from 'next';

type PropsType = {
  params: {
    id: string;
  };
};

export async function generateMetadata({
  params,
}: PropsType): Promise<Metadata> {
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${params.id}`
  );

  if (!response.ok) {
    throw new Error('도서 정보를 가져오는데 실패했습니다');
  }

  const book = await response.json();

  return {
    title: `${book.title} - 한입북스`,
    description: book.description,
    openGraph: {
      title: `${book.title} - 한입북스`,
      description: book.description,
      images: [book.coverImgUrl],
    },
  };
}

export default function Page({ params }: PropsType) {
  // 상세 정보 렌더링
}

연관 게시글

---