Next.js 배포 후 SEO 설정 가이드 — 구글에 뜨게 만드는 5단계 (2026)

🎯 배포만 하면 끝이 아닌 이유

Vercel에 배포 버튼을 누르고 my-site.vercel.app가 열리면 일이 끝났다고 느껴지기 쉬워요. 다만 그 시점의 사이트는 본인과 본인이 링크를 보낸 사람만 들어옵니다. 구글 검색에 뜨려면 별도의 한 단계가 더 필요해요. 이 단계가 빠진 채로 한 달이 지나면 본인 사이트는 사실상 인터넷에 없는 사이트와 다름없는 상태가 됩니다.

다행히 Next.js는 SEO에 필요한 도구를 거의 다 기본으로 내장하고 있어요. metadata 객체 하나, sitemap.ts와 robots.ts 두 파일, GSC 등록 한 번이면 검색 노출의 거의 모든 기반이 끝납니다. 이 글에서는 그 흐름을 5단계로 풀고, 단계마다 정상 신호와 함정을 짚어드릴게요. Vercel 배포 자체가 처음이면 Vercel 무료 배포 완전 가이드를 먼저 보시고 오세요.

한 가지 미리 짚어드릴게요. 작업 자체는 하루 안에 끝나지만, 색인은 1~14일이 걸립니다. 결과가 즉시 안 나와도 정상이에요. 본인이 할 일은 첫날 5단계를 정확히 마치고, 그 후 매주 GSC를 한 번씩 들여다보는 게 전부입니다.

🧭 배포부터 색인까지 5단계 흐름

전체 그림을 먼저 잡고 가시면 단계 사이에서 길을 잃지 않아요. 5단계 모두 합쳐 작업 시간 30분, 대기 1~14일이 표준 페이스입니다.

각 단계를 깊게 풀어드릴게요. 본인이 어느 단계인지 위 그림에서 위치 확인하시고 해당 섹션부터 읽으셔도 됩니다.

🏷 app/layout.tsx — metadata 7가지

Next.js App Router의 핵심은 app/layout.tsx에 metadata 객체 하나만 정의하면 사이트 전체의 검색 결과·SNS 공유 모양이 결정된다는 점이에요. 7가지 키만 알아두시면 됩니다.

한꺼번에 보는 코드

// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  metadataBase: new URL('https://my-site.com'),
  title: {
    default: '내 사이트 — 한 줄 슬로건',
    template: '%s | 내 사이트'
  },
  description: '본인 사이트가 무엇을 제공하는지 150~160자 설명. 행동 유도 표현 포함.',
  openGraph: {
    title: '내 사이트',
    description: '...',
    url: 'https://my-site.com',
    siteName: '내 사이트',
    images: ['/og.png'],
    locale: 'ko_KR',
    type: 'website'
  },
  twitter: {
    card: 'summary_large_image',
    title: '내 사이트',
    description: '...',
    images: ['/og.png']
  },
  alternates: {
    canonical: 'https://my-site.com'
  },
  robots: {
    index: true,
    follow: true
  }
}

각 키의 역할 한 줄씩

비전공자분이 처음에 챙기실 4개는 metadataBase, title, description, openGraph.images예요. 나머지는 첫 한 달 후에 추가해도 늦지 않습니다.

🗺 sitemap.ts + robots.ts 한 번에 만들기

sitemap.xml은 본인 사이트의 모든 URL을 구글에 알려주는 지도, robots.txt는 어느 페이지를 크롤링해도 되는지 알려주는 안내문이에요. Next.js App Router에서는 두 파일 모두 코드로 한 줄 작성하면 빌드 시 자동 생성됩니다.

app/sitemap.ts

// app/sitemap.ts
import type { MetadataRoute } from 'next'

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://my-site.com',
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 1.0
    },
    {
      url: 'https://my-site.com/about',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8
    }
  ]
}

블로그처럼 페이지가 동적으로 생성된다면 본인의 글 목록을 가져와 map으로 펼치시면 돼요. app/sitemap.ts가 빌드 시 my-site.com/sitemap.xml로 자동 노출됩니다.

app/robots.ts

// app/robots.ts
import type { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
      disallow: ['/api/', '/admin/']
    },
    sitemap: 'https://my-site.com/sitemap.xml'
  }
}

이 두 파일만 추가하고 git push하면 Vercel이 자동 재배포 후 my-site.com/sitemap.xml과 my-site.com/robots.txt가 즉시 살아나요. 정상 신호는 두 URL을 브라우저에서 직접 열었을 때 XML과 텍스트가 보이는 모습입니다.

🔎 Google Search Console 등록 5단계

sitemap이 살아 있어도 구글에 “여기 있어요”라고 알려주는 단계가 추가로 필요해요. 그 역할이 Google Search Console(GSC) 등록입니다.

1단계 — 속성 추가

search.google.com/search-console로 들어가서 “속성 추가” 버튼 클릭. 두 가지 옵션이 나오는데 비전공자분 첫 사이트면 “URL 접두어”가 단순합니다. 본인 도메인(예: https://my-site.com)을 그대로 입력하세요.

2단계 — 소유권 확인

구글이 “이 사이트가 정말 본인 것인지” 확인하는 과정입니다. 가장 쉬운 방법은 HTML 태그 방식이에요. 구글이 보여주는 메타 태그를 복사해 본인 app/layout.tsx의 metadata 객체에 추가합니다.

// app/layout.tsx — verification 추가
export const metadata: Metadata = {
  // ... 기존 키들 ...
  verification: {
    google: 'abc123...'  // 구글이 준 코드
  }
}

git push 후 Vercel 자동 재배포가 끝나면 GSC에서 “확인” 버튼을 누르세요. 정상 신호는 “소유권 확인됨” 초록색 알림입니다.

3단계 — sitemap 제출

좌측 메뉴 → Sitemaps → 새 사이트맵 추가. 입력란에 sitemap.xml만 입력하면 끝(앞에 도메인은 자동 추가됨). 정상 신호는 며칠 안에 “성공” 상태와 함께 발견된 URL 개수가 표시되는 모습이에요.

4단계 — URL 검사로 색인 가속

좌측 상단 검색창에 본인 메인 페이지 URL을 입력 → “색인 생성 요청” 버튼 클릭. 자동 색인을 기다리지 않고 우선 처리 큐에 넣는 방식이에요. 한 페이지당 하루 1~2회 정도가 권장 한도입니다.

5단계 — 매주 1회 색인 보고서 확인

좌측 메뉴 → 색인 → 페이지에서 색인된 페이지 수와 색인 안 된 페이지 수를 확인합니다. 색인 안 된 이유가 표시되니 매주 1회씩 들여다보면서 문제를 발견하면 즉시 수정하세요. 흔한 원인은 noindex 메타 태그나 robots.txt의 disallow 설정입니다.

⏰ 색인까지 평균 타임라인

“내 사이트가 언제 검색에 뜨나”가 가장 자주 받는 질문이에요. 평균 타임라인을 단계별로 정리했습니다.

색인 확인 한 줄 명령

본인 사이트가 구글에 색인됐는지 한 번에 보는 방법은 구글 검색창에 다음을 입력하는 거예요.

site:my-site.com

이 명령은 구글이 색인한 본인 사이트의 페이지를 모두 보여줍니다. 첫 등록 1일 후엔 1~3개, 1주 후엔 대부분 페이지가 보이는 게 정상이에요. 1주가 지나도 0개라면 GSC의 “색인 안 됨” 보고서를 다시 확인하세요.

🖼 OG 이미지 — SNS 공유 카드

본인 사이트 링크를 카카오톡·트위터·페이스북에 공유했을 때 보이는 미리보기 카드가 OG(Open Graph) 이미지예요. 이게 없으면 휑한 링크만 뜨고, 있으면 깔끔한 카드가 뜹니다. 클릭률 차이가 두세 배까지 나는 영역이라 꼭 챙기세요.

방법 1 — 정적 PNG 이미지

가장 단순한 방법이에요. 1200×630 픽셀 PNG·JPG·WebP 이미지를 public/og.png에 두고 metadata에 경로만 적으면 끝입니다.

// app/layout.tsx
openGraph: {
  images: ['/og.png']  // public/og.png 자동 인식
}

방법 2 — 동적 OG 이미지 (Next.js 내장)

블로그처럼 글마다 다른 OG 이미지가 필요하면 Next.js의 ImageResponse API가 빠릅니다. app/api/og/route.tsx에 짧은 React 컴포넌트를 만들면 글 제목·요약을 받아 자동으로 OG 이미지를 생성해요.

// app/api/og/route.tsx (간단 예시)
import { ImageResponse } from 'next/og'

export async function GET(req: Request) {
  const { searchParams } = new URL(req.url)
  const title = searchParams.get('title') ?? '내 사이트'
  return new ImageResponse(
    <div style={{ fontSize: 64, padding: 80 }}>{title}</div>,
    { width: 1200, height: 630 }
  )
}

각 글 페이지의 metadata에서 openGraph.images: ['/api/og?title=...']로 경로를 적으면 글마다 다른 OG 이미지가 자동 생성됩니다. 정상 신호는 페이스북 디버거(developers.facebook.com/tools/debug)에 본인 URL을 넣었을 때 카드 미리보기가 정확히 뜨는 모습이에요.

검색에 띄울 사이트가 아직 없다면 바이브코딩 프로젝트 아이디어 10가지로 먼저 만들 거리를 정해 보세요.

🚫 절대 하지 말아야 할 3가지

SEO 작업에서 빠지기 쉬운 3가지 함정이 있어요. 한 번이라도 들어가면 검색 노출이 통째로 막힐 수 있습니다.

1. robots.ts에 disallow: ‘/’ 남겨두기

개발 중에 사이트 노출을 막으려고 disallow: '/'를 적었다가 production에 그대로 push하는 케이스예요. 이 한 줄로 사이트 전체가 구글에서 사라집니다. 배포 전에 반드시 allow: '/'로 바뀌었는지 확인하세요. Vercel 배포 실패 글의 진단 흐름을 같이 활용하시면 좋아요.

2. metadata 없이 도메인만 바꾸기

본인 도메인(my-site.com)을 사고 Vercel에 연결만 한 채로 metadataBase를 my-site.vercel.app로 두면 OG 이미지가 깨집니다. 도메인 변경 후 반드시 metadataBase도 함께 업데이트하시고 git push 하세요.

3. 색인 결과를 1주 안에 판단

새 사이트는 첫 1주는 검색 트래픽이 거의 0인 게 정상입니다. “왜 뜨지 않지?” 하고 매일 확인해도 변화가 안 보여요. 첫 한 달은 작업만 정확히 해두시고 결과는 한 달 후에 보세요. 1개월 시점부터 색인된 페이지 수와 평균 순위를 비교해보면 진짜 흐름이 보입니다.

🚀 한 단계 더 — 구조화 데이터·다국어

위 5단계가 끝났다면 본인 사이트는 검색 노출의 기본이 끝난 상태예요. 한 단계 더 나아가고 싶다면 두 가지 영역이 효과 큽니다.

구조화 데이터 (JSON-LD)

구글에게 “이 페이지는 블로그 글이고 작성자는 누구이며 발행일은 언제다”를 명시적으로 알려주는 방식이에요. 제대로 적용하면 검색 결과에 별점·작성자 사진·발행일 같은 추가 요소가 붙어서 클릭률이 올라갑니다. JSON-LD를 script 태그 안에 넣어 layout이나 page에 추가하시면 돼요.

// app/blog/[slug]/page.tsx — Article 스키마 예시
<script type="application/ld+json">
  {JSON.stringify({
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: post.title,
    author: { '@type': 'Person', name: '작성자' },
    datePublished: post.date
  })}
</script>

다국어 SEO (hreflang)

한국어·영어 두 버전을 가진 사이트라면 alternates.languages로 각 언어 버전을 명시하시는 게 안전합니다. 안 적으면 구글이 두 언어 페이지를 중복으로 처리해 두 언어 모두 순위가 안 올라가요.

alternates: {
  languages: {
    'ko-KR': '/ko',
    'en-US': '/en'
  }
}

다국어가 필요하시면 바이브코딩 블로그 만들기 Next.js+MDX 글의 next-intl 부분을 같이 보시면 도움됩니다.

🪧 면책 조항

오늘 안에 본인 Next.js 프로젝트의 app/layout.tsx를 한 번만 열어보세요. metadata 7가지 중 빠진 게 있다면 그 한 번이 한 달 후 검색 트래픽의 출발점이 됩니다.

❓ FAQ

질문을 누르면 답변이 펼쳐집니다.

🔰 처음 시작하기 전 궁금한 것들

🛠 작업 중 자주 마주치는 상황

🚀 그 다음 단계

🔗 관련 글

• Vercel 무료 배포 완전 가이드
• Vercel 배포 실패 Top 10 — 진단 흐름
• 바이브코딩 블로그 만들기 Next.js+MDX
• 바이브코딩 포트폴리오 1시간 가이드
• Vercel 무료 플랜 한계와 Pro 업그레이드 시점

📑 참고 자료

• Next.js — generateMetadata 공식 문서
• Next.js — sitemap.ts 공식 문서
• Google Search Console — 공식 사이트
• Schema.org — 구조화 데이터 표준

Brandon

IT 기획 10년차 / 비전공자를 위한 바이브코딩 블로그 운영 / vibe-start.com 제작

Building VibeStart — the fastest path for non-devs into AI coding. Launching on Product Hunt 2026-05-26.

vibe-start.com