SEO
SEO(Search Engine Optimization)는 검색 엔진 최적화를 의미하며, 웹사이트나 웹페이지가 검색 엔진 결과 페이지(SERP)에서 더 높은 순위에 오르도록 하는 다양한 기술과 전략을 말한다.
Next.js에서 SEO 설정 방법
import SearchableLayout from "@/components/searchable-layout";
import { useRouter } from "next/router";
import { ReactNode, useEffect, useState } from "react";
import BookItem from "@/components/book-item";
import fetchbook from "@/lib/fetch-books";
import { BookData } from "@/types";
import Head from "next/head";
export default function Page() {
const [books, setBooks] = useState<BookData[]>();
const router = useRouter();
const q = router.query.q;
const fetchBooks = async () => {
const data = await fetchbook(q as string);
setBooks(data);
};
useEffect(() => {
if (q) {
fetchBooks();
}
}, [q]);
return (
<div>
<Head>
<title>한입 북스 - 검색 결과</title>
<meta property="og:image" content="/thumbnail.png" />
<meta property="og:title" content="한입 북스 -검색 결과" />
<meta property="og:title" content="한입 북스 도서를 만나보세요" />
</Head>
{books?.map((book) => (
<BookItem key={book.id} {...book} />
))}
</div>
);
}
Page.getLayout = (page: ReactNode) => {
return <SearchableLayout>{page}</SearchableLayout>;
};
Head 컴포넌트 활용
next에서 기본적으로 제공하는 Head 컴포넌트를 통해 메타태그를 작성하여 SEO를 설정할 수 있다.
<Head>
<title>한입 북스 - 검색 결과</title>
<meta property="og:image" content="/thumbnail.png" />
<meta property="og:title" content="한입 북스 -검색 결과" />
<meta property="og:title" content="한입 북스 도서를 만나보세요" />
</Head>메타 태그는 웹페이지가 검색 엔진에 어떻게 표시되고 검색 결과에 어떤 정보를 제공할지 결정하는 HTML 태그이다. 메타 태그는 페이지의
<head>섹션에 위치하며, 검색 엔진 최적화와 사용자 경험 개선에 중요한 역할을 한다.
동적 경로에 ssg가 적용된 경우
import { GetStaticPropsContext, InferGetStaticPropsType } from "next";
import style from "./[id].module.css";
import fetchone from "@/lib/fetch-one";
import { useRouter } from "next/router";
import Head from "next/head";
export const getStaticPaths = () => {
return {
paths: [
{ params: { id: "1" } }, // url 파라미터는 반드시 문자열로
{ params: { id: "2" } },
{ params: { id: "3" } },
],
fallback: true,
};
};
export const getStaticProps = async (context: GetStaticPropsContext) => {
const id = context.params!.id; //!로 undefind가 안일어나게 막음
const book = await fetchone(Number(id));
// book이 전달되지 않았으면 404 페이지로 연결시킴
if (!book) {
return {
notFound: true,
};
}
console.log(id);
return {
props: { book },
};
};
export default function Page({
book,
}: InferGetStaticPropsType<typeof getStaticProps>) {
const router = useRouter();
// page 컴포넌트가 아직 서버로부터 데이터를 받지 못한 상태를 fallback상태라고 한다
if (router.isFallback) {
return (
<>
<Head>
<title>한입 북스 </title>
<meta property="og:image" content="/thumbnail.png" />
<meta property="og:title" content="한입 북스 " />
<meta property="og:title" content="한입 북스 도서를 만나보세요" />
</Head>
<div>로딩중</div>
</>
);
} // fallback 상태일때 즉 로딩중일때
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:title" content={description} />
</Head>
<div className={style.container}>
<div
className={style.cover_img_container}
style={{ backgroundImage: `url('${coverImgUrl}')` }}
>
<img src={coverImgUrl} />
</div>
<div className={style.title}>{title}</div>
<div className={style.subTitle}>{subTitle}</div>
<div className={style.author}>
{author} | {publisher}
</div>
<div className={style.description}>{description}</div>
</div>
</>
);
}
- fallback: true로 경로를 지정하지 않은 fallback 상태일때는 아래와 같이 fallback상태에서도 렌더링 되도록 명시한다.
if (router.isFallback) { return ( <> <Head> <title>한입 북스 </title> <meta property="og:image" content="/thumbnail.png" /> <meta property="og:title" content="한입 북스 " /> <meta property="og:title" content="한입 북스 도서를 만나보세요" /> </Head> <div>로딩중</div> </> ); } // fallback 상태일때 즉 로딩중일때
항상 웃어 봅시다