반응형
Next 앱 SEO 설정하기
Next 에서는 React와 달리 각 페이지별로 메타 태그를 별도로 설정할 수가 있다.
import Head from "next/head";
(...)
export default function Home({
allBooks, recoBooks
}: InferGetStaticPropsType<typeof getStaticProps>) {
return (
<>
<Head>
<title>한입북스</title>
<meta property="og:image" content="/thumbnail.png" />
<meta property="og:title" content="한입북스" />
<meta
property="og:description"
content="한입 북스에 등록된 도서들을 만들어 보세요"
/>
</Head>
<div className={style.container}>
<section>
<h3>지금 추천하는 도서</h3>
{recoBooks.map((book) => (
<BookItem key={book.id} {...book} />
))}
</section>
<section>
<h3>등록된 모든 도서</h3>
{allBooks.map((book) => (
<BookItem key={book.id} {...book} />
))}
</section>
</div>
</>
)
}
이런 식으로 Next 에서는 Head 라는 추가적인 컴포넌트를 이용해서 페이지별로 필요한 타이틀이나 메타 태그를 별도로 설정할 수 있다.
import Head from "next/head";
export const getStaticPaths = () => {
return {
paths: [
{ params: { id: "1" } },
{ params: { id: "2" } },
{ params: { id: "3" } },
],
fallback: true,
}
}
export const getStaticProps = async (
(...)
}
export default function Page({
book
}: InferGetStaticPropsType<typeof getStaticProps>) {
const router = useRouter();
if (router.isFallback) {
return (
<>
<Head>
<title>한입북스</title>
<meta property="qg: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>
<div className={style.container}>
(...)
</div>
</>
)
}
이런식으로 fallback 이 설정된 동적인 경로를 갖는 페이지는 fallback 상태일때 보여줄 SEO 설정을 따로 해두어야한다
반응형
'Next.js' 카테고리의 다른 글
| NextJS : 리액트서버 컴포넌트 이해하기 (2) | 2024.09.24 |
|---|---|
| NextJS : App Router & Layout (0) | 2024.09.23 |
| NextJs : ISR 사전 렌더링 (0) | 2024.09.20 |
| NextJs : SSG 사전 렌더링 (0) | 2024.09.19 |
| NextJs : 사전 렌더링과 데이터 페칭(SSR) (1) | 2024.09.17 |
