FE 개발자를 위한 SEO 기초 가이드
example.ai 실제 작업 기반 정리 · 2026-02-13
0. SEO가 뭔데
Search Engine Optimization — 검색 엔진(Google, Naver 등)이
내 사이트를 잘 찾고, 잘 이해하고, 잘 보여주도록 만드는 작업.
Google이 내 사이트를 처리하는 과정:
| 단계 | 이름 | 설명 |
|---|---|---|
| 1 | 크롤링 (Crawling) | 사이트 방문 후 HTML 읽기 |
| 2 | 인덱싱 (Indexing) | 읽은 내용을 DB에 저장 |
| 3 | 랭킹 (Ranking) | 검색어에 맞는 결과 순위 결정 |
| 4 | 표시 (Display) | 검색 결과에 제목 / 설명 / URL 노출 |
FE 개발자가 할 수 있는 건
👉 1 ~ 2 단계에서 Google에게 정확한 정보를 제공하는 것
1. <title> 태그
가장 기본이자 가장 중요한 SEO 요소. 브라우저 탭에 보이는 텍스트.
<title>상품 안내 – Example Platform</title>- Google 검색 결과의 파란색 제목이 이것
- 페이지마다 고유해야 함
- 너무 길면 잘림 (60자 내외 권장)
Next.js
title: {
template: '%s – Example Platform',
default: 'Example Platform',
}2. <meta name="description">
검색 결과에서 제목 아래 보이는 회색 설명 텍스트.
<meta name="description" content="Example Platform은 다양한 기능을 API 형태로 제공하는 플랫폼입니다." />- 155자 내외 권장
- 페이지 내용을 요약해야 함
- Google이 자동 생성할 수도 있음
3. Open Graph (OG 태그)
메신저 / SNS 공유 시 미리보기 카드 결정.
<meta property="og:title" content="Example Platform" />
<meta property="og:description" content="API 플랫폼" />
<meta property="og:image" content="https://example.ai/opengraph-image.png" />
<meta property="og:site_name" content="Example Platform" />4. Canonical (정규 URL)
👉 “이 페이지의 대표 URL은 이것입니다”
<link rel="canonical" href="https://example.ai/ko/docs" />왜 필요하냐
/docs
/docs?ref=sidebar
/docs?utm=...Google은 서로 다른 페이지로 인식함.
✔ SEO 점수 분산 방지
✔ 대표 URL 명확화
👉 모든 페이지는 자기 자신을 canonical로 가리켜야 함
5. hreflang (다국어)
<link rel="alternate" hreflang="ko" href="https://example.ai/ko/docs" />
<link rel="alternate" hreflang="en" href="https://example.ai/en/docs" />✔ 번역 관계 선언
✔ 중복 콘텐츠 처리 방지
6. robots.txt
크롤링 허용 / 차단 규칙
User-agent: *
Allow: /
Disallow: /*/user/
Disallow: /*/admin/
Disallow: /error/
Sitemap: https://example.ai/sitemap.xml✔ 로그인 페이지는 Disallow
✔ 반드시 루트 경로에 위치
7. sitemap.xml
사이트 URL 목록
<url>
<loc>https://example.ai/ko</loc>
<lastmod>2026-02-13</lastmod>
</url>✔ 공개 페이지만 포함
✔ 리다이렉트 URL 제외
8. JSON-LD 구조화 데이터
Google에게 사이트 정보를 명확히 전달
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "Example Platform",
"url": "https://example.ai"
}
</script>9. application-name
<meta name="application-name" content="Example Platform" />사이트 이름 인식 우선순위
1️⃣ JSON-LD name
2️⃣ title
3️⃣ application-name
4️⃣ og:site_name
👉 네 개를 동일하게 맞추면 안정적
10. htmlLimitedBots (Next.js)
메타 태그 스트리밍 문제 해결
htmlLimitedBots: /.*/,👉 모든 요청에서 <head>에 메타 렌더링
11. middleware와 SEO
리다이렉트가 많으면 색인 문제 발생
✔ sitemap에는 실제 접근 URL만
✔ robots / sitemap 경로는 matcher 제외
12. Google Search Console
사이트 색인 상태 확인 도구
주요 기능
- URL 검사
- 색인 오류 확인
- 사이트맵 제출
👉 서브도메인은 별도 속성 등록 필요
체크리스트
기본
- 모든 페이지 고유 title
- description 설정
- robots.txt
- sitemap
- canonical
- OG 태그
다국어
- hreflang
- locale canonical
사이트 이름
- JSON-LD
- application-name
- og:site_name
- title 일관성
Next.js
- htmlLimitedBots
- OG 이미지
- generateMetadata
배포 후
- Search Console 등록
- sitemap 제출
- 주요 페이지 색인 요청
