1. 왜 SEO가 중요할까?
지난 글에서 설명했듯이
-
사용자가 내 웹사이트를 찾기 쉬워지기 때문
-
검색 엔진(예: Google)은 콘텐츠를 크롤링해 적절한 키워드를 가진 페이지를 상단에 노출
-
웹사이트 방문자 수, 제품 판매, 콘텐츠 노출 등에 직결됨
2. next-seo란 무엇인가?
Next.js의 페이지별 SEO 설정을 간단하게 관리할 수 있게 해주는 라이브러리
title, description, openGraph, twitter 메타 태그를 props 기반으로 설정 가능
npm install next-seo로 간단하게 다운받을 수 있다.
3. 기본 설정 방법
// next-seo.config.js
const defaultSEO = {
title: "Linktory - 북마크 공유 플랫폼",
description: "유저가 공유한 유용한 링크를 모아보세요.",
openGraph: {
type: "website",
locale: "ko_KR",
url: "https://linktory.vercel.app",
site_name: "Linktory",
images: [
{
url: "https://linktory.vercel.app/og-image.png",
width: 1200,
height: 630,
alt: "Linktory 대표 이미지",
},
],
},
twitter: {
handle: "@linktory",
site: "@linktory",
cardType: "summary_large_image",
},
};
export default defaultSEO;// app/layout.tsx
import "./globals.css";
import { DefaultSeo } from "next-seo";
import defaultSEO from "../next-seo.config";
export const metadata = {
title: "Linktory",
description: "북마크 공유 플랫폼",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ko">
<head>
<DefaultSeo {...defaultSEO} />
</head>
<body>{children}</body>
</html>
);
}위와 같이 config파일에서 정의한 defaultSeo를 layout파일에서 import 하여 사용한다.
//수정 08-07
nextjs에서 layout은 서버컴포넌트이므로 defaultSeo를 직접 import하여 사용할 수 없다!!
4. 특정 페이지 설정
// app/about/page.tsx
import { NextSeo } from "next-seo";
export default function AboutPage() {
return (
<>
<NextSeo
title="Linktory 소개"
description="Linktory는 북마크를 공유하는 플랫폼입니다."
openGraph={{
url: "https://linktory.vercel.app/about",
title: "Linktory 소개",
images: [
{
url: "https://linktory.vercel.app/og-about.png",
width: 1200,
height: 630,
alt: "소개 페이지 썸네일",
},
],
}}
/>
<main>소개 페이지 콘텐츠</main>
</>
);
}특정 페이지에서 덮어쓰며 사용할때는 next-seo의 NextSeo를 import하여 사용하면 된다.
개발자가 될거야