> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# SEO와 공유

메타데이터, 사이트맵, robots, 소셜 이미지.

## 시작하기 전에

파일 → 폴더 열기를 사용하여 Visual Studio Code에서 다운로드한 supastack 프로젝트를 연 다음 터미널 → 새 터미널을 선택합니다. 저장소 루트는 package.json, 앱 및 패키지가 포함된 폴더입니다. 아래 명령을 실행하고 터미널을 열어 두십시오. 명령이 인식되지 않으면 계속하기 전에 도구 설치 가이드를 완료하세요.

먼저 플랫폼 튜토리얼을 읽어보세요. 서버는 브라우저 또는 전화 요청에 응답하는 앱 프로세스입니다. 웹은 apps/web/.env.local를 읽고, Expo는 apps/mobile/.env.local를 읽고, 데이터베이스 마이그레이션 명령은 루트 .env를 읽습니다. 데이터베이스 없는 /dashboard 데모는 Postgres를 마이그레이션해야 하는 실제 /auth 계정과 별개입니다. 전화 또는 데스크톱 전용 결제에는 별도로 실행되는 웹 백엔드가 필요합니다.

[도구 설치 및 코드 받기](https://supastack.dev/ko/docs/web/before-you-start.md)

[명령, 파일 및 구성 알아보기](https://supastack.dev/ko/docs/web/terminal-basics.md)

[웹 첫 실행 튜토리얼 완료](https://supastack.dev/ko/docs/web/ship-in-5-minutes.md)

```
corepack pnpm --filter @supastack/web dev
```


## 설치 및 설정

라우트 수준 메타데이터는 Next.js metadata API에서 옵니다 — 페이지가 metadata 객체 또는 generateMetadata를보내고, 로케일 사전에서 제목과 설명을 해석해 검색 결과도 로컬라이즈됩니다.

sitemap.ts와 robots.ts가 크롤 가능한 표면을 생성하고, Open Graph 이미지와 아이콘 에셋이 소셜 미리보기를 담당합니다. settings, billing, admin, API 같은 비공개 라우트는 사이트맵에서 빼고 robots에서 disallow하세요.

```
app/sitemap.ts    public routes only
app/robots.ts     disallow private surfaces

// per page
export const metadata = { title, description };
```


## 구현 워크플로

모든 공개 페이지에 고유한 제목과 설명을 주고, 검색 결과, 필터된 뷰, 인증된 표면은 절대 인덱싱하지 마세요. 정규 URL은 접두사 없이 유지됩니다 — 로케일 레이어가 이미 기본 로케일을 정규 경로로 리다이렉트합니다.

공개 라우트를 추가할 때 같은 변경에서 사이트맵에도 추가하세요. OG 이미지는 구운 스크린샷 대신 브랜드 토큰으로 유지해 리스타일이 일관되게 하세요.


## 검증 및 문제 해결

프리뷰 배포에서 /robots.txt와 /sitemap.xml을 가져오고, 사이트맵이 파싱되는지 검증하고, 한 페이지를 공유 체크하세요 — 제목, 설명, 이미지. 검색 결과 페이지에 noindex 헤더 또는 meta가 있는지 확인하세요.


## 다음

[제품 테마](https://supastack.dev/ko/docs/web/theming.md)