넥스트 Next.js
7. Next.js 15에서 SEO 최적화 (Head, Open Graph, meta 태그)
안녕하세요! 태마입니다.
Next.js 기초 강좌입니다.
강좌의 경우
1. 주제 간단 정리
2. 상세 주제 정리
으로 이루어져 있습니다.
넥스트 Next.js
포스팅 시작하겠습니다 :)
1. 주제 간단 정리
1. Next.js 15에서 SEO(Search Engine Optimization)가 중요한 이유
Next.js는 기본적으로 서버 사이드 렌더링(SSR) 및 **정적 사이트 생성(SSG)**을 지원하여 SEO에 유리하다.
하지만, 제대로 된 meta 태그 설정과 Open Graph 적용이 없으면 검색 엔진이 페이지를 올바르게 인식하지 못할 수 있다.
📌 Next.js 15에서 SEO 최적화가 중요한 이유
✔ 검색 엔진에서 페이지를 더 쉽게 크롤링하도록 도움
✔ SNS에서 공유할 때 올바른 미리보기(썸네일, 제목, 설명 등)를 표시
✔ 웹사이트의 검색 순위를 높이고 트래픽 증가
✅ SEO 최적화를 위한 주요 태그 정리
태그설명
| <title> | 페이지 제목 설정 (검색 엔진 결과에 표시됨) |
| <meta name="description"> | 페이지 설명 (SEO 및 미리보기 카드에서 사용됨) |
| <meta name="keywords"> | 페이지의 주요 키워드 (최근 검색 엔진에서는 영향 적음) |
| <meta property="og:title"> | Open Graph 제목 (SNS 공유 시 사용) |
| <meta property="og:description"> | Open Graph 설명 (SNS 공유 시 사용) |
| <meta property="og:image"> | Open Graph 썸네일 이미지 |
| <meta name="robots"> | 검색 엔진이 페이지를 크롤링할지 결정 (index, follow or noindex, nofollow) |
📌 Next.js 15에서는 metadata 객체를 사용하여 SEO 설정을 더욱 쉽게 할 수 있다!
2. Next.js 15에서 SEO 설정하기 (metadata API 활용)
✅ 1) 기본적인 SEO 설정 (app/layout.tsx)
export const metadata = {
title: "Next.js 15 SEO 최적화 가이드",
description: "Next.js 15에서 SEO를 최적화하는 방법을 배워봅시다!",
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ko">
<body>{children}</body>
</html>
);
}📌 metadata 객체를 사용하면 title, description을 자동으로 설정할 수 있음!
✅ 2) 페이지별 SEO 설정 (app/about/page.tsx)
export const metadata = {
title: "Next.js 15 소개 페이지",
description: "Next.js 15의 기능과 장점을 소개합니다.",
};
export default function AboutPage() {
return (
<main>
<h1>📄 Next.js 15 소개</h1>
<p>이 페이지는 Next.js 15의 주요 기능을 설명하는 페이지입니다.</p>
</main>
);
}📌 페이지마다 다른 SEO 정보를 설정할 수 있음!
✅ 3) Open Graph (OG) 및 Twitter 카드 설정 (app/page.tsx)
export const metadata = {
title: "Next.js 15 SEO 가이드",
description: "SEO 최적화를 위한 Next.js 15의 다양한 기능을 배워보세요.",
openGraph: {
title: "Next.js 15 SEO 가이드",
description: "SEO 최적화를 위한 Next.js 15의 다양한 기능을 배워보세요.",
url: "https://example.com",
siteName: "Next.js Guide",
images: [
{
url: "https://example.com/og-image.jpg",
width: 1200,
height: 630,
},
],
locale: "ko_KR",
type: "website",
},
twitter: {
card: "summary_large_image",
title: "Next.js 15 SEO 가이드",
description: "SEO 최적화를 위한 Next.js 15의 다양한 기능을 배워보세요.",
images: ["https://example.com/twitter-image.jpg"],
},
};
export default function Home() {
return (
<main>
<h1>🚀 Next.js 15 SEO 최적화</h1>
<p>SEO 최적화를 위한 다양한 방법을 적용해 봅시다.</p>
</main>
);
}📌 Open Graph 및 Twitter 카드 정보를 설정하면 SNS 공유 시 미리보기가 올바르게 표시됨!
✅ 4) robots.txt 및 sitemap.xml 자동 생성 (next.config.js)
module.exports = {
experimental: {
sitemap: {
baseUrl: "https://example.com",
include: ["/", "/about"],
},
robots: {
rules: [
{
userAgent: "*",
allow: "/",
},
],
},
},
};📌 검색 엔진이 사이트 구조를 쉽게 파악할 수 있도록 robots.txt와 sitemap.xml을 자동 생성!
✅ 여기까지 Next.js 15에서 metadata API를 활용한 SEO 최적화 방법을 배웠습니다!
👉 "그렇다면, Next.js 15에서 SEO 성능을 더욱 높이려면 어떻게 해야 할까?"
✅ 2부에서 성능 최적화와 함께 SEO를 더욱 강화하는 방법을 배워봅시다!
2. 상세 주제 정리
1. Next.js 15에서 SEO 성능 최적화하는 방법
SEO는 단순히 title과 meta 태그를 설정하는 것뿐만 아니라, 페이지 로딩 속도와 사용자 경험(UX)도 중요한 요소이다.
📌 SEO 성능 최적화를 위한 주요 기법
✔ 이미지 최적화 (next/image) → 이미지 로딩 속도를 개선하여 SEO 점수 상승
✔ 코드 스플리팅 (Code Splitting) → 불필요한 코드 로딩을 방지하여 속도 최적화
✔ Lazy Loading → 필요할 때만 콘텐츠를 로드하여 페이지 로딩 속도 개선
✔ 구글 Lighthouse 점수 체크 → SEO, 성능, 접근성 점수 분석
2. Next.js 15에서 이미지 최적화 (next/image)
✅ 1) next/image 사용하여 이미지 최적화 (app/components/ImageExample.tsx)
import Image from "next/image";
export default function ImageExample() {
return (
<div>
<h2>📸 Next.js 15 이미지 최적화</h2>
<Image src="/images/example.jpg" alt="Example" width={800} height={600} priority />
</div>
);
}📌 next/image는 자동으로 이미지 크기 최적화 및 Lazy Loading을 지원!
3. Next.js 15에서 코드 스플리팅 (Code Splitting) 적용하기
✅ 1) 동적 import 사용 (app/components/DynamicComponent.tsx)
import dynamic from "next/dynamic";
const HeavyComponent = dynamic(() => import("./HeavyComponent"), { ssr: false });
export default function Home() {
return (
<main>
<h1>🚀 Next.js 15 SEO 성능 최적화</h1>
<HeavyComponent />
</main>
);
}📌 필요한 컴포넌트만 로드하여 페이지 로딩 속도를 줄일 수 있음!
4. 구글 Lighthouse를 활용한 SEO 점수 분석
✅ SEO 점수를 측정하려면 구글 Lighthouse를 사용하면 된다.
1️⃣ Chrome DevTools에서 Lighthouse 실행
2️⃣ SEO, 성능, 접근성 점수를 확인하고 개선 필요 사항 확인
3️⃣ 불필요한 JavaScript, CSS 파일 최적화
📌 Lighthouse에서 높은 점수를 받을수록 구글 검색 순위에서 유리해진다!
✅ 여기까지 Next.js 15에서 SEO 최적화를 위한 실전 방법과 성능 개선 기법을 배웠습니다!
👉 "그렇다면, Next.js 15에서 데이터베이스 연동은 어떻게 할까?"
✅ 다음 회차에서 Next.js 15와 데이터베이스 연동 (MongoDB, PostgreSQL, Prisma)을 배워봅시다!