# SEO · GEO 최적화

| 항목 | 경로 |
|------|------|
| 데모 | `seo.html` |
| CSS | `css/seo.css` (가이드 UI만 · 실서비스 복사 불필요) |
| 관련 | [head.md](./head.md) · [faq.md](./faq.md) · [breadcrumb.md](./breadcrumb.md) |

지정한 검색어로 **구글 검색 결과**에 잘 잡히게 하고, 동시에 **AI 검색·답변**(AI 오버뷰, 챗봇, Perplexity 등)에 인용되게 하는 작업 순서입니다.

1위를 보장하지 않습니다. 검색엔진·생성형 엔진이 **읽고, 이해하고, 출처로 쓸 수 있는 페이지**를 만드는 일입니다.

---

## 용어

| 약어 | 뜻 | 목표 |
|------|----|------|
| **SEO** | Search Engine Optimization | 지정 검색어로 검색 결과(특히 상단·스니펫)에 노출 |
| **GEO** | Generative Engine Optimization | AI가 답변을 만들 때 이 페이지를 근거로 인용 |

둘 다 같은 기반입니다. **의미 있는 HTML, 고유한 제목, 한 페이지 한 의도, 검증 가능한 사실.** 접근성 마크업이 곧 크롤링·인용에 유리합니다.

---

## 1. 검색어를 페이지에 고정

| 규칙 | 설명 |
|------|------|
| 페이지당 핵심 검색어 **1개** | 예: `웹접근성 대체 텍스트` |
| 의도 맞추기 | 정보형 / 이동형 / 거래형 중 무엇에 답하는지 정함 |
| 보조어는 본문에만 | title·H1을 키워드로 채우지 않음 |
| URL은 짧고 설명적으로 | `/a11y/alt-text` 처럼. 해시만 있는 페이지는 검색 대상이 되기 어려움 |

핵심 검색어는 다음 네 곳에 **자연스럽게 한 번씩** 등장하면 충분합니다.

1. `<title>` 앞부분  
2. 페이지 제목(`h1` 또는 이 킷의 `.ptitle`)  
3. `meta name="description"`  
4. 본문 **첫 문단**(정의·결론)

---

## 2. SEO — 검색 결과에 잡히게

### title · description

```html
<title>웹접근성 대체 텍스트 작성법 | 기관명</title>
<meta name="description" content="이미지 alt는 사이트명이 아니라 그림이 전하는 정보를 씁니다. 장식 이미지는 alt를 비웁니다.">
```

- title: `검색어가 드러나는 페이지명 | 사이트명` (대략 30–60자)  
- description: 검색어 + 한 줄 답 (대략 70–160자). **비우지 말 것.** 없으면 태그 삭제  
- 페이지마다 **고유** title · description  
- viewport 확대 제한 금지 → [head.md](./head.md)

### 제목 계층

```html
<h1>웹접근성 대체 텍스트 작성법</h1>
  <h2>장식 이미지</h2>
  <h2>정보 이미지</h2>
    <h3>도표·차트</h3>
```

- `h1`은 페이지에 **하나** · 핵심 검색어와 같게  
- `h2`/`h3`은 목차처럼. 단계 건너뛰지 않음  
- 이 킷: `.ptitle`이 페이지 제목. 실서비스에서는 `h1` 권장

### 수집·중복

| 파일/태그 | 역할 |
|-----------|------|
| `https` | 필수 |
| `robots.txt` | 막지 않을 경로만 허용. 관리자·검색결과 페이지는 차단 가능 |
| `sitemap.xml` | 공개 URL 목록. Search Console에 제출 |
| `link rel="canonical"` | 같은 글이 여러 URL이면 **대표 URL** 지정 |
| `noindex` | 검색에 넣지 않을 페이지만 |

```html
<link rel="canonical" href="https://example.go.kr/guide/alt-text">
```

```txt
# /robots.txt 예시
User-agent: *
Allow: /
Disallow: /admin/
Disallow: /search

Sitemap: https://example.go.kr/sitemap.xml
```

### 본문이 있는 HTML

검색엔진과 AI는 **렌더된 텍스트**를 읽습니다.

- 본문을 이미지·캔버스·PDF만으로 두지 않음  
- 중요한 문장은 JS 실행 전 HTML에 있음  
- 표·목록·정의는 실제 `table` / `ul` / `dl`  
- 이미지 `alt`는 검색·스크린리더 공통. 「로고」만 쓰지 않음 → [layout.md](./layout.md)

### 내부 링크

같은 주제의 페이지끼리 텍스트 링크로 잇습니다. `여기를 클릭` 금지. 앵커에 검색어가 들어가도 됩니다.

---

## 3. 구조화 데이터 (JSON-LD)

구글 리치결과·AI 인용의 **힌트**입니다. HTML과 **내용이 같아야** 합니다.

```html
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "웹접근성 대체 텍스트 작성법",
  "description": "이미지 alt는 그림이 전하는 정보를 씁니다.",
  "inLanguage": "ko",
  "datePublished": "2026-03-01",
  "dateModified": "2026-09-01",
  "author": { "@type": "Organization", "name": "기관명" },
  "publisher": { "@type": "Organization", "name": "기관명" }
}
</script>
```

페이지 성격에 맞는 타입만 씁니다.

| 페이지 | `@type` |
|--------|---------|
| 안내·매뉴얼 | `Article` / `TechArticle` |
| 자주 묻는 질문 | `FAQPage` (화면에 같은 Q&A가 있어야 함) |
| 조직 홈 | `Organization` + `WebSite` |
| 위치 | `BreadcrumbList` |

검증: [리치 결과 테스트](https://search.google.com/test/rich-results)

---

## 4. GEO — AI 답변에 인용되게

생성형 엔진은 **짧은 결론 + 근거**를 좋아합니다.

### 답변 먼저 (extractable)

본문 맨 위에 2–4문장으로 검색어에 대한 답을 둡니다. 수식어·홍보 문구는 뒤에.

> **웹접근성 대체 텍스트란?** 이미지 내용을 글자로 제공하는 `alt`입니다. 정보가 있는 그림은 그 정보를 쓰고, 장식만 하는 그림은 `alt=""`로 비웁니다.

### 질문형 소제목

AI·이용자가 던지는 문장을 `h2`/`h3`로 씁니다.

```html
<h2>대체 텍스트에 로고라고 쓰면 안 되나요?</h2>
<p>안 됩니다. 스크린리더가 ‘로고’만 읽고 기관명을 놓칩니다. alt에는 사이트명을 씁니다.</p>
```

FAQ 컴포넌트를 쓰면 펼친 상태의 텍스트가 HTML에 있어야 합니다. `display:none`만 있는 답은 인용에서 빠질 수 있습니다. → [faq.md](./faq.md)

### 인용 가능한 단위

| 형태 | 이유 |
|------|------|
| 짧은 정의 문단 | 그대로 발췌됨 |
| 번호/불릿 목록 | 절차·조건 나열 |
| 표 (caption 포함) | 비교·수치 |
| 날짜·출처 | 최신성·신뢰 |
| 고유한 수치·원문 | 다른 사이트에 없는 근거 |

작성일·수정일을 본문과 JSON-LD에 같이 둡니다.

### AI 크롤러 (정책으로 결정)

막을지 허용할지는 기관 정책입니다. 답변에 **노출되려면 본문을 수집할 수 있어야** 합니다.

```txt
# 허용 예 (정책에 맞을 때만)
User-agent: GPTBot
Allow: /
User-agent: Google-Extended
Allow: /
User-agent: PerplexityBot
Allow: /
```

### `llms.txt` (선택)

사이트 루트에 마크다운 목차를 두는 관례입니다. 표준은 아니나 일부 AI가 참고합니다.

```text
# 기관명
> 웹접근성 안내

- [대체 텍스트](https://example.go.kr/guide/alt-text.md): 이미지 alt 작성
- [스킵 링크](https://example.go.kr/guide/skip.md): 본문 바로가기
```

원문은 `.md` 또는 HTML 중 **실제 본문 URL**을 적습니다.

---

## 5. 접근성 = SEO · GEO

| 접근성 | 검색·AI |
|--------|---------|
| `lang="ko"` | 언어 인식 |
| 고유 `title` | 스니펫·인용 제목 |
| 제목 계층 | 목차·패싯 |
| `alt` / 캡션 | 이미지 이해 |
| `nav`·`main`·`footer` | 구역 이해 |
| 링크 텍스트 | 앵커 문맥 |
| 표 `th`·`caption` | 데이터 추출 |
| JS 없이도 본문 | 렌더링 전 수집 |

---

## 하지 말 것

- 숨긴 키워드, 흰 글자, `display:none` 본문만으로 순위 조작  
- 클로킹(이용자와 봇에 다른 HTML)  
- 구매 백링크, 도배성 상호링크  
- 자동 생성 글만 대량 발행  
- 다른 기관 글을 베껴 title만 바꾸기 (AI는 중복을 잘 걸러 냄)  
- `noindex` / robots 차단해 놓고 AI 노출을 기대하기  

---

## 작업 순서

1. 핵심 검색어 1개와 이용자 질문 3–5개를 적는다  
2. title · H1 · description · 첫 문단에 답을 넣는다  
3. H2를 질문형으로 나누고, 목록·표·날짜를 넣는다  
4. JSON-LD를 본문과 맞춰 넣는다  
5. canonical · sitemap · Search Console  
6. 내부 링크와 FAQ를 연결한다  
7. 리치 결과 테스트 · 모바일 속도 · 실제 검색어로 미리보기  

---

## 복사 패키지

```
마크업·체크: seo.html · docs/seo.md
head 메타: docs/head.md
FAQ 구조: docs/faq.md
(선택) css/seo.css — 이 가이드 페이지 UI만
```

실서비스에는 `.seo-answer` 같은 가이드 클래스가 아니라 **실제 본문 문장**이 필요합니다.