들어가며

SEO(검색 엔진 최적화)의 중요성은 그 어느때보다 강조되고 있다. React에서 Next.js로 기술스택을 이전하는 주요한 이유도 SEO일테다. 하지만 막상 SEO를 제대로 관리구현하려면 "뭘 어떻게 설정해야 하지?"라는 막연함이 있다. 이 글에서는 실제 운영 중인 Nex layout.tsxt.js 프로젝트의 SEO 설정을 A부터 Z까지 뜯어보며, robots.txt, sitemap, JSON-LD 등 헷갈리는 개념들을 명확히 정리해보겠다.

1. SEO 설정 전체 구조 파악하기

검색엔진과 대화하려면 4가지 설정을 알아야 한다.

📁 Next.js 프로젝트
├── 🎯 메타데이터 (app/layout.tsx)
├── 🚫 접근 제어 (robots.txt)
├── 🗺️ 페이지 목록 (sitemap.xml
└── 📊 구조화 데이터 (JSON-LD)

하나씩 풀어서 설명하겠다.

🎯 메타데이터 - 검색 결과 미리보기

구글에서 검색했을 때 보이는 정보다. 페이지의 layout.tsx에서 아래와 같이 설정한다.

// src/app/layout.tsx
export const metadata = {
title: "A서비스 | 블로그 마케팅 도구",
description: "무료로 블로그 분석부터 AI 글쓰기까지",
keywords: ["블로그", "마케팅", "SEO"],
};

실제 구글 검색결과로는 이렇게 보인다:

A서비스 | 블로그 마케팅 도구
https://mysite.com
무료로 블로그 분석부터 AI 글쓰기까지. 지금 바로 시작하세요!

제목이 "무제 문서"이고 설명이 없다면, 아무도 클릭하지 않는다. 메타데이터는 검색 결과에서의 첫인상이다.

기본 중의 기본이니 제대로 설정해야한다.

openGraph는 카카오톡이나 페이스북에 링크 공유할 때 나오는 카드형 미리보기다.

openGraph: {
title: "엔비디아 젠슨 황 회장도 ...",
description: "#젠슨황 #엔비디아 #바나나맛우유",
images: ["/thumbnail.png"], // 이 이미지가 나옵니다
}

카톡에서 이렇게 보인다:

🚫 robots.txt - 출입증

**"여기는 들어와도 되고, 여기는 들어오면 안 돼"**를 정해주는 파일이다.

모든 페이지를 검색 결과에 보여주고 싶지는 않기 위해서 설정한다. 실제로 노출되면 안 되는 페이지여서 그런 것도 있고,

실제로 비즈니스 상 노출되면 안 되는 페이지여서 차단하기도 하지만,

별 의미없는 페이지를 애써서 노출시켜봤자 클릭전환률을 낮춰서 마케팅 분석에 도움이 되지 않기도 하니 차단해버리는 경우도 많다.

보여주고 싶은 페이지:

메인 페이지 /

가이드 /guide

블로그 글들 /blog/*

숨기고 싶은 페이지:

로그인 /login

회원가입 /signup

결제 /payment

관리자 페이지 /admin/*

내부 API /api/*

# public/robots.txt

User-agent: * # 모든 검색엔진에게
Allow: / # 기본적으로 허용하되
Allow: /guide

Disallow: /login # 이건 오지 마
Disallow: /payment
Disallow: /admin/
Disallow: /api/

Sitemap: https://mysite.com/sitemap.xml

User-agent는 검색엔진 종류이다:

* = 모든 검색엔진

Googlebot = 구글만

Yeti = 네이버만

검색엔진은 하루에 크롤링할 수 있는 페이지 수가 정해져 있다.

작은 사이트는 하루 100~1000페이지 정도이다.다. 불필요한 페이지를 차단하면, 중요한 페이지를 더 자주 확인할 수 있다.

비유하자면:

검색엔진: "하루에 100페이지까지만 볼 수 있어요"

우리: "그럼 중요한 것만 보세요. 로그인 페이지는 볼 필요 없어요"

robots.txt는 권장사항일 뿐이다. 착한 검색엔진(구글, 네이버)은 지키지만, 악의적인 봇은 무시할 수 있다.(얼마 전 내 vercel 트래픽을 폭파시켜버린 Amazonbot처럼..) 진짜 보안이 필요하면 로그인을 걸거나 next.js 미들웨어에서 악성봇들에 쓰로틀링을 걸어버리면 된다.

🗺️ sitemap.xml - 사이트 지도

**"우리 사이트에는 이런 페이지들이 있어요"**라고 목록으로 알려주는 파일이다.

검색엔진이 링크를 따라다니며 페이지를 찾는 건 시간이 오래 걸린다. 사이트맵이 있으면 한 번에 전체 목록을 확인할 수 있다.

사이트맵 없을 때:

검색엔진: "링크 하나씩 따라가면서 찾아야겠다..."
→ 새 페이지 발견까지 며칠~몇 주

사이트맵 있을 때:

검색엔진: "아, 여기 전체 목록이 있네? 한 번에 확인!"
→ 새 페이지 발견까지 몇 시간~하루

<urlset>
<url>
<loc>https://mysite.com/</loc>
<lastmod>2025-01-21</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://mysite.com/guide</loc>
<lastmod>2025-01-21</lastmod>
<changefreq>weekly</changefreq>
<priority>0.9</priority>
</url>
</urlset>

각 항목의 의미:

loc: 페이지 주소

lastmod: 마지막 수정일

changefreq: 얼마나 자주 바뀌나요?

daily - 매일 (뉴스, 메인 페이지)

weekly - 매주 (일반 콘텐츠)

monthly - 매월 (고정 페이지)

priority: 이 사이트 내에서 얼마나 중요한가요? (0.0 ~ 1.0)

1.0 - 가장 중요 (메인)

0.8 - 중요 (주요 카테고리)

0.5 - 보통

손으로 작성? 하지 않아도 된다. Next.js에서는 next-sitemap 패키지가 자동으로 만들어준다.

npm install next-sitemap

설정 파일 작성:

// next-sitemap.config.js
module.exports = {
siteUrl: "https://mysite.com",
generateRobotsTxt: true, // robots.txt도 같이 생성

exclude: ["/login", "/payment", "/admin/*"],

additionalPaths: async () => {
return [
{ loc: "/", changefreq: "daily", priority: 1.0 },
{ loc: "/guide", changefreq: "weekly", priority: 0.9 },
];
},
};

빌드할 때 자동 생성:

// package.json
{
"scripts": {
"build": "next build",
"postbuild": "next-sitemap" // 빌드 후 자동 실행
}
}

📊 JSON-LD - 구조화된 설명서

페이지 내용을 검색엔진이 정확히 이해할 수 있도록 구조화된 형식으로 설명하는 것이다.

검색엔진은 똑똑하지만, 우리 사이트가 정확히 뭘 하는지 100% 이해하지는 못한다. JSON-LD로 "이건 SaaS 제품이고, 가격은 이거고, 기능은 이거야"라고 명확히 알려줄 수 있다.

검색 결과에 추가 정보가 표시되는 것이다.

일반 검색 결과:

내 서비스 | 블로그 마케팅 도구
https://mysite.com
무료로 블로그 분석부터 AI 글쓰기까지

리치 스니펫 적용 시:

내 서비스 | 블로그 마케팅 도구
💰 가격: ₩0부터 | 🏢 회사명 | ⭐⭐⭐⭐⭐ 4.8
https://mysite.com
무료로 블로그 분석부터 AI 글쓰기까지

✓ 블로그 분석 ✓ 키워드 추출 ✓ AI 글쓰기

정보량이나 페이지의 면적이나 눈에 확 띄게 되어 클릭률이 올라간다.

JSON-LD는 schema.org 표준을 따른다. 가장 많이 쓰이는 3가지는 다음과 같다:

{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "내 서비스",
"url": "https://mysite.com",
"description": "블로그 마케팅 분석 도구",
"inLanguage": "ko-KR"
}

{
"@context": "https://schema.org",
"@type": "Organization",
"name": "주식회사 내회사",
"url": "https://mysite.com",
"logo": {
"@type": "ImageObject",
"url": "https://mysite.com/logo.png",
"width": 250,
"height": 60
},
"foundingDate": "2024"
}

{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "내 서비스",
"applicationCategory": "BusinessApplication",
"operatingSystem": "웹 브라우저",
"offers": [
{
"@type": "Offer",
"name": "무료",
"price": "0",
"priceCurrency": "KRW"
},
{
"@type": "Offer",
"name": "프리미엄",
"price": "49000",
"priceCurrency": "KRW"
}
],
"featureList": [
"블로그 분석",
"키워드 추출",
"AI 글쓰기"
]
}

// src/app/layout.tsx
export default function RootLayout({ children }) {
const websiteData = {
"@context": "https://schema.org",
"@type": "WebSite",
"name": "내 서비스",
// ...
};

return (
<html>
<head>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(websiteData) }}
/>
</head>
<body>{children}</body>
</html>
);
}

상황에 따라 다양한 타입을 쓸 수 있다:

Product - 이커머스 상품 (가격, 재고, 리뷰)

Article - 블로그 글 (저자, 날짜, 이미지)

Recipe - 요리 레시피 (재료, 조리시간, 칼로리)

Event - 이벤트 (날짜, 장소, 티켓)

LocalBusiness - 로컬 매장 (주소, 영업시간, 전화번호)

FAQ - 자주 묻는 질문

Google Rich Results Test에 URL을 넣어보자. 오류가 있으면 알려준다.

전체 파일 구조

실제 프로젝트에서 이렇게 구성된다:

Next.js프로젝트/
├── src/app/
│ ├── layout.tsx # 🎯 메타데이터 + 📊 JSON-LD + 📈 GA/GTM
│ ├── page.tsx # 메인 페이지
│ └── guide/
│ └── page.tsx # 가이드 페이지
├── public/
│ ├── robots.txt # 🚫 자동 생성
│ ├── sitemap.xml # 🗺️ 자동 생성
│ ├── sitemap-0.xml # 🗺️ 실제 URL 목록
│ └── images/
│ └── thumbnail.png # OG 이미지
├── next-sitemap.config.js # 사이트맵 설정
└── package.json # next-sitemap 패키지

2. robots.txt, sitemap.xml, JSON-LD

앞에서 각각 설명했지만, 세 개가 어떻게 다른지 헷갈릴 수 있다. 한번 비교해보자.

비유로 이해하기

도서관을 운영해본다고 생각해보면 이렇다.

📋 robots.txt = "출입 제한 안내판"
"직원 전용 구역 출입 금지"

🗺️ sitemap.xml = "층별 안내도"
"100 소설, 200 경제, 300 과학"

📚 JSON-LD = "책 상세 정보 카드"
"저자: 홍길동, 가격: 15,000원, 페이지: 320"

역할 비교표

	robots.txt	sitemap.xml	JSON-LD
질문	"여기 가도 돼?"	"뭐가 있어?"	"이게 뭐야?"
대답	"여기는 금지"	"이런 페이지들 있어"	"이건 SaaS 제품이야"
역할	접근 제어	페이지 목록	내용 설명
대상	크롤러	크롤러	크롤러 + 검색 결과
시점	크롤링 전	크롤링 계획	크롤링 중
효과	크롤링 차단	빠른 발견	리치 스니펫
형식	텍스트	XML	JSON
필수?	권장	권장	선택

실전 예시

블로그 마케팅 SaaS를 만든다면:

# 마케팅 페이지만 크롤링해주세요
Allow: /
Allow: /guide

# 기능 페이지는 회원 전용이에요
Disallow: /keyword
Disallow: /analytics
Disallow: /payment

의도: 검색 결과에는 마케팅 페이지만 노출하고, 실제 기능은 로그인 후 사용하게.

<url>
<loc>https://mysite.com/</loc>
<priority>1.0</priority> 
<changefreq>daily</changefreq> 
</url>
<url>
<loc>https://mysite.com/guide</loc>
<priority>0.9</priority>
<changefreq>weekly</changefreq>
</url>

의도: 메인과 가이드만 집중적으로 크롤링해주세요.

{
"@type": "SoftwareApplication",
"name": "내 서비스",
"offers": [
{ "name": "무료", "price": "0" },
{ "name": "프리미엄", "price": "49000" }
]
}

의도: 검색 결과에 "무료부터 시작"이라고 표시되게.

3. 실제 작동 흐름 (봇의 여정)

사용자가 구글에서 "블로그 분석 도구"를 검색했다. 우리 사이트가 검색 결과에 나타나기까지의 여정을 따라가보자.

1단계: 첫 방문 (발견)

구글봇: "새로운 사이트를 발견했네? mysite.com"
구글봇: "먼저 robots.txt부터 확인하자"

robots.txt 읽기:

User-agent: *
Allow: /
Disallow: /payment
Disallow: /api/

Sitemap: https://mysite.com/sitemap.xml

구글봇: "오케이, /payment랑 /api는 가면 안 되는구나"
구글봇: "sitemap.xml이 있네? 읽어보자"

2단계: 계획 수립

sitemap.xml 읽기:

<url>
<loc>https://mysite.com/</loc>
<priority>1.0</priority>
<changefreq>daily</changefreq>
</url>
<url>
<loc>https://mysite.com/guide</loc>
<priority>0.9</priority>
<changefreq>weekly</changefreq>
</url>

구글봇: "페이지가 2개 있구나"
구글봇: "/ 가 우선순위 1.0으로 가장 높고, 매일 바뀐대"
구글봇: "오늘은 / 부터 크롤링하고, /guide는 일주일에 한 번만 확인하면 되겠네"

3단계: 크롤링

메인 페이지 방문:

구글봇: "https://mysite.com/ 접속!"

메타데이터 읽기:

구글봇: "제목은 '내 서비스 | 블로그 마케팅 도구'"
구글봇: "설명은 '무료로 블로그 분석부터...'"
구글봇: "robots가 index, follow니까 인덱싱해도 되는구나"

JSON-LD 읽기:

구글봇: "아하! 이건 SaaS 제품이구나"
구글봇: "무료 플랜과 프리미엄 플랜(49,000원)이 있네"
구글봇: "기능은 블로그 분석, 키워드 추출, AI 글쓰기"

4단계: 인덱싱

구글: "데이터베이스에 저장 완료"
구글: "키워드 분석..."
- "블로그 분석" ✓
- "마케팅 도구" ✓
- "키워드 추출" ✓
- "AI 글쓰기" ✓

5단계: 랭킹

구글: "품질 점수 계산 중..."
- 콘텐츠 품질: 80점
- 페이지 속도: 85점
- 모바일 친화성: 90점
- 백링크: 60점
- 총점: 78점

구글: "'블로그 분석 도구' 검색 시 15위로 등록"

6단계: 검색 결과 표시

사용자가 "블로그 분석 도구" 검색:

[검색 결과 15위]

내 서비스 | 블로그 마케팅 도구
💰 가격: ₩0부터 | 🏢 회사명
https://mysite.com
무료로 블로그 분석부터 AI 글쓰기까지. 지금 바로 시작하세요!

✓ 블로그 분석 ✓ 키워드 추출 ✓ AI 글쓰기

이게 바로 JSON-LD 덕분입니다!

일반 사이트:

제목
URL
설명

JSON-LD 있는 사이트:

제목
💰 가격 | 🏢 회사
URL
설명
✓ 기능1 ✓ 기능2 ✓ 기능3

훨씬 눈에 띄죠?

7단계: 재방문 (업데이트)

다음날:

구글봇: "sitemap에서 / 는 changefreq가 daily니까 다시 확인하자"
구글봇: "lastmod가 바뀌었네? 내용이 업데이트된 것 같아"
구글봇: "다시 크롤링!"

일주일 후:

구글봇: "/guide는 changefreq가 weekly니까 이제 확인할 때"
구글봇: "lastmod가 같네? 변경 없음. 패스!"

8단계: 사용자 행동 추적

사용자가 검색 결과 클릭:

Google Analytics 기록:
- 유입 경로: 구글 검색 (Organic)
- 검색어: "블로그 분석 도구"
- 랜딩 페이지: /
- 세션 시간: 3분 25초
- 전환: 회원가입 완료 ✓

Google Search Console 기록:
- 노출수: +1
- 클릭수: +1
- CTR: 6.7% (업데이트)
- 평균 순위: 15위

일주일 후 분석:

마케터: "블로그 분석 도구' 키워드가 15위인데 CTR 6.7%네?"
마케터: "경쟁사는 10위에 CTR 8%..."
마케터: "제목을 더 매력적으로 바꿔보자!"
마케터: "내 서비스 → 무료 블로그 분석 도구"

변경 후:

2주 후:

Google Search Console:
- 평균 순위: 15위 (유지)
- CTR: 6.7% → 9.2% (상승!)

마케터: "순위는 같은데 클릭률이 올랐어!"
마케터: "제목에 '무료'를 넣은 게 효과가 있었나봐"

9단계: 순위 상승

1개월 후:

구글: "이 사이트 괜찮네?"
- CTR 높음 (사람들이 많이 클릭)
- 체류시간 길음 (평균 3분)
- 이탈률 낮음 (바로 나가지 않음)
- 백링크 증가 (다른 사이트에서 링크)

구글: "'블로그 분석 도구' 순위 상향 조정"
구글: "15위 → 8위"

검색 결과:

[검색 결과 8위] ← 상승!

무료 블로그 분석 도구 | 내 서비스
💰 가격: ₩0부터 | ⭐⭐⭐⭐⭐ 4.8
https://mysite.com
무료로 블로그 분석부터 AI 글쓰기까지. 지금 바로 시작하세요!

10단계: 선순환

순위 상승
↓
더 많은 노출
↓
더 많은 클릭
↓
더 많은 사용자
↓
더 많은 데이터 (GA)
↓
개선 포인트 발견
↓
콘텐츠/UX 개선
↓
사용자 만족도 상승
↓
구글이 좋은 사이트로 평가
↓
순위 더 상승 ✨

봇의 여정 요약

1. robots.txt 확인 → "어디 갈 수 있지?"
2. sitemap.xml 확인 → "뭐부터 볼까?"
3. 페이지 크롤링 → "내용이 뭐지?"
4. 메타데이터 읽기 → "제목, 설명 저장"
5. JSON-LD 읽기 → "아, SaaS 제품이구나!"
6. 인덱싱 → "데이터베이스에 저장"
7. 랭킹 계산 → "품질 점수 매기기"
8. 검색 결과 표시 → "리치 스니펫으로 표시"
9. 사용자 행동 추적 → "GA로 분석"
10. 재방문 → "업데이트 확인"

마치며

핵심 요약

4가지만 기억하자:

메타데이터 - 검색 결과 미리보기

robots.txt - 어디 가도 되고 안 되는지

sitemap.xml - 전체 페이지 목록

JSON-LD - 내용 상세 설명 (리치 스니펫)

이 글은 내가 다시 두고두고 보려고 적은 글이다. Next.js를 주로 쓰면서 'SEO적으로 React보다 낫겠지'하기보단 철저히 관리하고 신경쓰는게 좋다. 제대로 된 검색노출과 풍부한 정보량 노출이 비즈니스의 키이기 때문이다.