Next.js 웹 프로젝트 SEO 기본 세팅 문서

목표

새로운 웹 프로젝트를 시작할 때마다 아래 SEO 기본 구조를 항상 적용한다.

적용 대상:

Next.js App Router
랜딩 페이지
서비스 웹사이트
블로그
결과 페이지
검색 유입이 필요한 서비스

1. 기본 프로젝트 구조

app/
  layout.tsx
  page.tsx
  sitemap.ts
  robots.ts

2. 공통 Metadata 설정

app/layout.tsx

import type { Metadata } from 'next';

export const metadata: Metadata = {
  metadataBase: new URL('https://example.com'),

  title: {
    default: '서비스 이름',
    template: '%s | 서비스 이름',
  },

  description: '서비스 설명',

  keywords: [
    '키워드1',
    '키워드2',
    '키워드3',
  ],

  openGraph: {
    title: '서비스 이름',
    description: '서비스 설명',
    url: 'https://example.com',
    siteName: '서비스 이름',
    images: [
      {
        url: '/og-image.png',
        width: 1200,
        height: 630,
      },
    ],
    locale: 'ko_KR',
    type: 'website',
  },

  twitter: {
    card: 'summary_large_image',
    title: '서비스 이름',
    description: '서비스 설명',
    images: ['/og-image.png'],
  },

  alternates: {
    canonical: 'https://example.com',
  },

  robots: {
    index: true,
    follow: true,
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    
      {children}
    
  );
}

3. 페이지별 Metadata 설정

app/about/page.tsx

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: '소개',
  description: '서비스 소개 페이지',
};

export default function AboutPage() {
  return <div>소개 페이지</div>;
}

4. Sitemap 설정

app/sitemap.ts

import { MetadataRoute } from 'next';

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://example.com',
      lastModified: new Date(),
    },
    {
      url: 'https://example.com/about',
      lastModified: new Date(),
    },
  ];
}

확인 URL:

https://example.com/sitemap.xml

5. robots.txt 설정

app/robots.ts

import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
    },

    sitemap: 'https://example.com/sitemap.xml',
  };
}

확인 URL:

https://example.com/robots.txt

* admin 페이지는 아래처럼 disallow 속성 추가해야 함

disallow: '/admin',

6. Semantic HTML 사용

항상 아래 태그 우선 사용:

<header>
<main>
<section>
<article>
<nav>
<footer>
<h1>
<h2>

지양:

<div>
<div>
<div>

7. 제목 구조 규칙

페이지당:

h1 태그 1개
h2/h3 계층 구조 유지

예시:

<main>
  <h1>무료 이름 분석</h1>

  <section>
    <h2>분석 결과</h2>
  </section>
</main>

8. 이미지 SEO

모든 이미지에 alt 추가:

<img
  src="/image.png"
  alt="집안일 분담 캘린더 화면"
/>

9. URL 규칙

좋은 예:

/products/apple-watch
/blog/react-seo

지양:

/page?id=123

10. noindex 적용 페이지

검색 제외 필요한 페이지:

admin
login
payment
test

예시:

export const metadata = {
  robots: {
    index: false,
    follow: false,
  },
};

11. Open Graph 이미지 규칙

권장:

1200 x 630

파일명:

public/og-image.png

12. Structured Data(JSON-LD)

공통 웹사이트 구조화 데이터

https://schema.org',</a>
      '@type': 'WebSite',
      name: '서비스 이름',
      url: '<a href=https://example.com',>https://example.com',</a>
    }),
  }}
/>

13. 성능 최적화

필수 체크:

next/image 사용
lazy loading
폰트 최적화
불필요한 client component 최소화
dynamic import 사용
번들 크기 관리

14. Next.js SEO 체크리스트

프로젝트 시작 직후

metadata 설정
sitemap 설정
robots 설정
og-image 생성
canonical 설정
lang="ko" 설정

페이지 제작 시

h1 1개 유지
description 작성
alt 작성
semantic HTML 사용

배포 전

Lighthouse 검사
모바일 반응형 확인
sitemap.xml 확인
robots.txt 확인
OG 이미지 확인

15. Google Search Console 등록

배포 후 반드시 등록:

사이트 등록
도메인 인증
sitemap.xml 제출

16. 추천 라이브러리

SEO

yarn add next-sitemap

분석

yarn add @vercel/analytics

17. Lighthouse 기준 목표

권장 점수:

Performance: 90+
Accessibility: 90+
Best Practices: 90+
SEO: 100

18. 추천 프로젝트 기본 전략

권장 조합:

Next.js App Router
+ SSG
+ Metadata API
+ Sitemap
+ Robots
+ OpenGraph
+ JSON-LD

19. 최종 SEO 기본 체크리스트

필수

title
description
sitemap
robots
canonical
og:image
semantic HTML
h1 구조
alt
반응형

중요

JSON-LD
성능 최적화
이미지 최적화
모바일 UX
Lighthouse 점수

AI 적용용 SEO 자동 반영 프롬프트

목적

아래 규칙을 기반으로 Next.js App Router 웹 프로젝트를 생성하거나 수정할 때 SEO 구조를 기본 포함하여 구현한다.

프로젝트 내 모든 페이지와 레이아웃에 SEO 최적화가 자동 반영되어야 한다.

프로젝트 기본 규칙

Next.js App Router 사용
TypeScript 사용
SEO 친화적인 구조 유지
semantic HTML 우선 사용
모바일 반응형 필수
Lighthouse SEO 점수 100 목표
접근성 고려
클린코드 유지
불필요한 중복 코드 제거
재사용 가능한 구조로 설계

반드시 적용할 SEO 규칙

Metadata

모든 페이지에 metadata 적용:

title
description
openGraph
twitter
canonical
robots

페이지마다 title과 description은 고유해야 한다.

layout.tsx 규칙

공통 metadata를 반드시 설정한다.

포함 항목:

metadataBase
title template
description
keywords
openGraph
twitter
canonical
robots

html 태그에는 반드시:

<html lang="ko">

적용.

sitemap 규칙

반드시:

/sitemap.xml

생성.

app/sitemap.ts 사용.

모든 공개 페이지 URL 포함.

robots 규칙

반드시:

/robots.txt

생성.

app/robots.ts 사용.

sitemap URL 연결.

HTML 구조 규칙

semantic HTML 우선 사용:

<header>
<main>
<section>
<article>
<nav>
<footer>

div 남용 금지.

heading 규칙

페이지당:

<h1>

1개만 사용.

h2, h3 계층 구조 유지.

이미지 규칙

모든 이미지에:

alt

필수.

Open Graph 규칙

기본 OG 이미지 설정.

권장 사이즈:

1200x630

canonical 규칙

모든 페이지 canonical 적용.

noindex 규칙

아래 페이지는 검색 제외:

admin
login
payment
test

robots metadata 사용.

URL 규칙

SEO 친화적인 URL 사용: