1. 개요

검색엔진 결과 페이지(SERP)에서 더 높은 순위에 표시되도록 최적화하는 과정

방법

1) 메타 태그 설정

1. Metadata를 설치해준다.

import { Metadata } from "next";

2. index 컴포넌트(page) 위에 metadata를 아래와 같이 작성해준다.

export const metadata : Metadata = {
  title: "타이틀",
  description : "내용",
  openGraph: {
    title: "타이틀",
    description : "내용",
    images : ["/thumbnail.png"]
  },
}

그러면 메타 태그를 내용에 맞게 채워넣어준다. 여기서 openGraph는 sns에 들어가는 메타태그도 포함시킨다.

동적인 값을 통해 메타데이터 설정

동적인 페이지를 데이터가 계속 바뀌기 때문에 그에 맞게 설정해주어야한다.

export async function generateMetadata({
  searchParams,
}: {
  searchParams: Promise<{q?:string}>;
}): Promise<Metadata> {
  //현재 페이지의 메타 데이이터를 동적으로 생성하는 역할
  const { q } = await searchParams;

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

export default function Page({
  searchParams,
}: {
  searchParams: {
    q?: string;
  };
}) {
  return (
    <Suspense
      key={searchParams.q || ""}
      fallback={<BookListSkeleton count={3} />}
    >
      <SearchResult q={searchParams.q || ""} />
    </Suspense>
  );
}

기존 페이지의 데이터를 받아 오는 것과 같이 함수를 작성하고 데이터를 같이 받아와 return에 작성한다.

• generateMetadata라는 함수를 사용해야한다.
• Promise<Metadata> 로 타입정의
• api를 불러 올 수 도 있다.

2) favicon 설정

app 폴더 내 favicon.ico 파일을 바꿔준다.