이중 URL 구조가 어떻게 내 인덱싱된 페이지 수를 두 배로 늘렸는가 (Next.js 14 SEO 전략)
요약
Next.js 14를 활용하여 도구 페이지와 SEO 가이드 페이지를 분리하는 이중 URL 구조를 통해 검색 엔진 인덱싱을 극대화하는 전략을 소개합니다. 사용자 의도(DO vs LEARN)에 따라 클라이언트 컴포넌트와 서버 컴포넌트를 구분하여 최적의 UX와 SEO 성과를 동시에 달성합니다.
핵심 포인트
- 사용자 의도에 따라 실행형(DO)과 학습형(LEARN) 페이지를 분리
- Next.js 14 App Router를 이용한 클라이언트/서버 컴포넌트 최적화
- 도구 페이지에는 SoftwareApplication, 가이드에는 FAQPage 스키마 적용
- 동일한 도구로 인덱싱 가능한 페이지 수를 두 배로 확장
ToolForge를 구축한 지 4개월 만에, 152개의 유기적 키워드(organic keywords)가 +2,071% 성장했습니다. 가장 큰 차이를 만들어낸 단 하나의 아키텍처 결정은 다음과 같습니다.
문제점
저는 온라인 계산기를 만들었습니다. 예를 들어 EMI 계산기라고 가정해 봅시다. 이 페이지는 다음 경로에 위치합니다: /tools/calculators/emi-calculator
이 페이지는 실행 키워드(action keywords)를 타겟팅합니다. 즉, Google에 "emi calculator"를 입력하는 사람들입니다. 이들은 도구를 '사용'하기를 원합니다. 하지만 두 번째 그룹이 있습니다. "how to calculate emi in pakistan"을 입력하는 사람들입니다. 이들은 '학습'하기를 원합니다. 이들은 계산기가 필요하기 전에 5~10분 동안 글을 읽을 것입니다.
하나의 URL로는 두 가지 의도(intent)를 모두 잘 충족할 수 없습니다. 3,000단어 분량의 가이드가 포함된 도구 페이지는 최악의 사용자 경험(UX)을 제공합니다. 계산기가 임베드된 가이드 페이지는 속도가 느리고 초점이 흐려집니다.
해결책: 도구당 이중 URL (Dual URLs Per Tool)
ToolForge의 모든 도구는 두 개의 페이지를 가집니다:
/tools/calculators/emi-calculator ← 대화형 도구 (Interactive tool)
/emi-calculator ← 롱폼(Long-form) SEO 가이드
Next.js 14 App Router에서는 다음과 같이 구현됩니다:
src/app/tools/calculators/emi-calculator/page.tsx ← 'use client', 대화형
src/app/emi-calculator/page.tsx ← 서버 컴포넌트 (server component), 3,000단어 이상
도구 페이지는 상태(state), 입력값(inputs), 즉각적인 결과(instant results)를 가진 클라이언트 컴포넌트(client component)입니다. 가이드 페이지는 제목(headings), 표(tables), FAQ, 스키마 마크업(schema markup)이 포함된 서버 렌더링된(server-rendered) 기사입니다.
SEO 작동 방식
도구 페이지 (/tools/calculators/emi-calculator):
타겟: "emi calculator", "loan calculator", "emi calculator pakistan"
스키마: SoftwareApplication JSON-LD
콘텐츠: 최소한의 구성 — 도구 + 짧은 지침
사용자 의도: 무언가를 '수행(DO)'함
가이드 페이지 (/emi-calculator):
타겟: "how to calculate emi", "emi formula", "bank loan rates pakistan"
스키마: FAQPage JSON-LD
콘텐츠: 3,000단어 이상 — 공식 설명, 은행 비교, 팁, FAQ
사용자 의도: 무언가를 '학습(LEARN)'함
도구 페이지로 연결되는 눈에 띄는 CTA 버튼 포함
결과
61개의 도구를 통해, 이 아키텍처는 다음을 생성합니다:
61개의 도구 페이지 (실행 키워드)
61개의 가이드 페이지 (정보성 키워드)
= 동일한 수의 도구로부터 122개의 인덱싱 가능한(indexable) 페이지 생성
우리의 사이트맵(sitemap)에는 100개 이상의 URL이 있습니다.
Google은 현재까지 86개를 인덱싱(indexing)했으며, 우리는 152개의 키워드에 대해 순위(ranking)를 차지하고 있습니다. 가이드 페이지(guide pages)는 정보성 쿼리(informational queries)에 대해 Google이 포괄적인 콘텐츠를 선호하기 때문에 도구 페이지(tool pages)보다 지속적으로 더 높은 순위를 기록합니다. 하지만 도구 페이지는 단순히 계산기를 원하는 사람들의 직접적인 의도(direct-intent) 트래픽을 포착합니다.
구현 패턴 (Implementation Pattern)
도구 페이지 (클라이언트 컴포넌트 (client component)):
// src/app/tools/calculators/emi-calculator/page.tsx
' use client ' ;
import { useState } from ' react ' ;
import RelatedTools from ' @/components/ui/RelatedTools ' ;
export default function EMICalculator () {
const [ amount , setAmount ] = useState ( 1000000 );
const [ rate , setRate ] = useState ( 15 );
// ... 계산 로직 (calculator logic)
return (
< div className = "max-w-4xl mx-auto p-6" >
< h1 > EMI Calculator </ h1 >
{ /* 대화형 입력값 + 결과 (Interactive inputs + results) */ }
< RelatedTools recommendedIds = { [ ' business-loan-calculator ' , ' fbr-tax-calculator ' ] } />
</ div >
);
}
가이드 페이지 (서버 컴포넌트 (server component)):
// src/app/emi-calculator/page.tsx
import Link from ' next/link ' ;
export default function EMIGuide () {
return (
< article className = "max-w-4xl mx-auto p-6" >
< h1 > How to Calculate EMI in Pakistan 2026 </ h1>
{ /* 실제 도구로 연결되는 CTA (CTA to the actual tool) / }
< Link href = "/tools/calculators/emi-calculator" className = "bg-indigo-600 px-6 py-3 rounded-xl text-white" >
Calculate Your EMI Now →
</ Link >
{ / 3,000단어 이상의 가이드 콘텐츠 (3,000+ words of guide content) / }
< h2 > What is EMI? </ h2 >
< p > EMI stands for Equated Monthly Installment... </ p >
{ / 스키마 마크업이 적용된 FAQ (FAQs with schema markup) / }
< h2 > Frequently Asked Questions </ h2 >
{ / ... */ }
</ article >
);
}
레이아웃 (각 페이지를 위한 메타데이터 (metadata for each)):
// src/app/tools/calculators/emi-calculator/layout.tsx
export const metadata = {
title : ' EMI Calculator — Free Loan EMI Calculator Pakistan ' ,
description : ' Calculate your monthly EMI instantly...
' , alternates : { canonical : ' https://freetoolforge.org/tools/calculators/emi-calculator ' }, }; // src/app/emi-calculator/layout.tsx export const metadata = { title : ' 2026년 파키스탄 EMI 계산 방법 — 완전 가이드 ' , description : ' 공식을 통해 EMI가 계산되는 방법을 알아보세요... ' , alternates : { canonical : ' https://freetoolforge.org/emi-calculator ' }, }; 서로 다른 캐노니컬 URL (canonical URLs), 서로 다른 제목 (titles), 서로 다른 메타 설명 (meta descriptions). Google은 이를 서로 다른 키워드를 타겟팅하는 별개의 페이지로 취급합니다.
교차 링크 전략 (Cross-Linking Strategy)
가이드 페이지는 도구로 링크를 겁니다: "즉시 EMI를 계산하세요 →"
도구 페이지는 DocButton 컴포넌트를 통해 가이드로 링크를 겁니다: "전체 가이드 읽기 →"
이는 두 페이지 사이에 권위 (authority)를 전달하는 양방향 내부 링크 루프 (bidirectional internal link loop)를 생성합니다. 가이드가 높은 순위를 차지하면 도구의 순위가 올라갑니다. 도구가 높은 순위를 차지하면 가이드의 순위가 올라갑니다.
이중 URL을 사용하지 말아야 할 때
모든 도구에 가이드가 필요한 것은 아닙니다. 만약 도구가 그 자체로 설명이 가능하다면 (예: UUID Generator), 가이드 페이지는 저품질 콘텐츠 (thin content)가 될 것이며, 이는 SEO에 해를 끼칩니다.
이중 URL을 사용해야 하는 경우:
- 주제가 정보성 검색 의도 (informational search intent, "~하는 방법...")를 가진 경우
- 1,500단어 이상의 진정성 있고 유용한 콘텐츠를 작성할 수 있는 경우
- 도구가 가이드와는 다른 키워드를 타겟팅하는 경우
가이드를 건너뛰어야 하는 경우:
- 도구가 그 자체로 설명 가능한 경우 (Base64 encoder, color picker)
- 단순히 페이지를 채우기 위해 콘텐츠를 늘리는 경우 (padding content)
- "~하는 방법" 쿼리의 키워드 볼륨이 월간 100회 미만인 경우
직접 확인해보세요
전체 아키텍처는 freetoolforge.org 에서 라이브 상태로 운영되고 있습니다. 실제 작동하는 패턴을 확인할 수 있습니다:
도구: NUST Merit Calculator → 가이드: How to Calculate NUST Aggregate
도구: AI Essay Writer → 가이드: AI Essay Writer Guide
도구: FBR Tax Calculator → 가이드: FBR Tax Guide
61개의 도구 × 2개의 URL = 122개의 페이지.
이중 URL 아키텍처는 우리가 활용한 SEO 레버 (SEO lever) 중 단연 가장 강력한 것입니다.
Abid Niazi — 풀스택 개발자 (Full Stack Developer), 파키스탄
freetoolforge.org — 61개의 무료 도구, 광고 없음
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기