20편에서 사이트가 라이브가 됐다. 그런데 — 누가 오는지·어디서 오는지·검색엔진엔 잡혔는지 모르면 그냥 빈 사이트. 데이터 없이 개선 불가.
이번 편은 그 두 축을 한 번에 — Analytics(방문자 측정)와 SEO(검색엔진 인덱싱). Next.js + Vercel 조합에서 둘 다 코드 몇 줄로 끝나는 도구가 표준화돼 있다.
1. Vercel Analytics — 한 줄로 트래픽 측정
Google Analytics 의 가벼운 대안. 쿠키 안 쓰고 GDPR 친화적.
$ npm install @vercel/analytics
// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';
export default function RootLayout({ children }) {
return (
<html lang="ko">
<body>
{children}
<Analytics /> {/* ← 이 한 줄 */}
</body>
</html>
);
}
Vercel Dashboard · Analytics 탭에서 방문자·페이지뷰·인기 페이지·국가·디바이스 확인. Vercel 호스팅 시 무료 (Hobby 플랜도). 다른 호스팅이면 동작 안 함.
2. Speed Insights — Core Web Vitals
속도 측정. LCP·CLS·INP 같은 라이트하우스 지표를 실제 사용자 환경에서 수집.
$ npm install @vercel/speed-insights
// app/layout.tsx (위와 같이)
import { SpeedInsights } from '@vercel/speed-insights/next';
// body 끝에
<Analytics />
<SpeedInsights />
실제 사용자(RUM·real user monitoring) 환경의 점수 — Lighthouse 같은 lab 측정보다 진짜. 모바일 95th percentile LCP 가 가장 봐야 할 지표.
다른 옵션 — Plausible(쿠키리스, $9/월)·Umami(자체 호스팅 OSS)·Google Analytics 4(무료지만 무거움). 한국에선 Naver Search Advisor 도 별도 등록 필요. Vercel Analytics 는 가장 가볍지만 한 호스팅에 종속.
3. sitemap.ts — 검색엔진용 페이지 목록
7편 메타데이터 챕터에서 봤던 그것. 다시 한 번.
// app/sitemap.ts
import type { MetadataRoute } from 'next';
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
const baseUrl = 'https://my-site.com';
const staticPaths = [
{ url: baseUrl, priority: 1.0 },
{ url: `${baseUrl}/about`, priority: 0.8 },
{ url: `${baseUrl}/pricing`, priority: 0.8 },
];
const posts = await fetchAllPosts();
const postPaths = posts.map(p => ({
url: `${baseUrl}/blog/${p.slug}`,
lastModified: p.updatedAt,
priority: 0.6,
}));
return [...staticPaths, ...postPaths];
}
이 한 파일이 /sitemap.xml 로 자동 생성. Google Search Console 에 등록할 URL.
4. robots.ts — 크롤러 가이드
// app/robots.ts
import type { MetadataRoute } from 'next';
export default function robots(): MetadataRoute.Robots {
return {
rules: [
{ userAgent: '*', allow: '/', disallow: ['/admin/', '/api/'] },
{ userAgent: 'GPTBot', disallow: '/' }, // ChatGPT 크롤러 차단
],
sitemap: 'https://my-site.com/sitemap.xml',
};
}
2026 기준 — AI 크롤러(GPTBot·ClaudeBot·Google-Extended) 차단을 명시하는 게 트렌드. 본인 콘텐츠 학습 데이터 사용 막을지 결정. llms.txt 표준도 같이 등장 중.
5. Search Console·구조화 데이터
Google Search Console 등록 (필수)
1. search.google.com/search-console 에서 도메인 추가. 2. DNS 또는 HTML 메타로 소유 확인. 3. sitemap.xml URL 제출. 4. 1~2주 후 인덱싱 상태·검색 키워드·CTR 확인.
네이버는 별도 — searchadvisor.naver.com. 같은 sitemap 으로 등록 가능. 한국 트래픽 잡으려면 둘 다 필수.
구조화 데이터 (JSON-LD)
검색 결과에서 별점·이미지·FAQ 카드 같은 풍부한 표시 가능. JSON-LD 한 블록을 페이지에 박는다.
// app/blog/[slug]/page.tsx
export default async function PostPage({ params }) {
const { slug } = await params;
const post = await fetchPost(slug);
const jsonLd = {
'@context': 'https://schema.org',
'@type': 'Article',
headline: post.title,
image: post.coverImage,
datePublished: post.publishedAt,
author: { '@type': 'Person', name: post.author },
};
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<article>…</article>
</>
);
}
schema.org 의 타입(Article·Product·FAQPage·Recipe) 별로 다른 필드. Google Rich Results Test 로 미리보기 가능.
SEO 흔한 함정 — ① title·description 비움(검색 무시), ② 모든 페이지 같은 title("My Site"), ③ canonical 빠뜨림(중복 콘텐츠 페널티), ④ noindex 실수(개발 중 막아둔 거 production 까지 가는 사고), ⑤ 이미지 alt 비움(접근성·SEO 둘 다 손해). 7편 metadata 챕터 다시 점검.
요약 — 21편 좌표
여기까지 정리. Vercel Analytics·Speed Insights 두 컴포넌트로 트래픽·속도 측정 시작. app/sitemap.ts·app/robots.ts 두 파일로 검색엔진용 메타 자동 생성. Google·Naver Search Console 양쪽 등록 필수. 구조화 데이터(JSON-LD) 로 검색 결과 풍부하게. 7편 metadata 위에 더 얹는 데이터 레이어. 다음 편에서 테스트 — Jest·RTL·Playwright.
다음 편 예고 — Next.js 테스트
Jest·React Testing Library·Playwright 기초. 22편.
