개발자를 위한 SEO 기본기

개발자가 SEO를 알아야 하는 이유

아무리 좋은 사이트를 만들어도 검색에 안 나오면 의미가 없다. 디자이너가 접근성을 알아야 하듯, 개발자도 SEO 기본기를 알아야 한다. 특히 정적 사이트나 포트폴리오에서 SEO는 트래픽의 거의 유일한 소스다.

1. 메타 태그

검색 결과에 보이는 제목과 설명은 메타 태그에서 온다.

<title>KeyBox — 개발자용 시크릿 매니저 | Karnel Labs</title>
<meta name="description" content="AES-256 암호화로 API 키와 토큰을 안전하게 관리하는 데스크톱 앱." />
<link rel="canonical" href="https://karnellabs.com/portfolio/keybox/" />

규칙:

title: 60자 이내. 핵심 키워드를 앞에 배치
description: 155자 이내. 클릭을 유도하는 설명
canonical: 중복 URL 방지. 정식 URL을 명시

2. Open Graph

SNS에서 링크를 공유할 때 보이는 카드를 제어한다.

<meta property="og:type" content="website" />
<meta property="og:title" content="KeyBox — 개발자용 시크릿 매니저" />
<meta property="og:description" content="AES-256 암호화로 API 키를 안전하게." />
<meta property="og:image" content="https://karnellabs.com/images/og/keybox.png" />
<meta property="og:url" content="https://karnellabs.com/portfolio/keybox/" />

og:image가 핵심이다. 이미지가 있는 카드와 없는 카드의 클릭률 차이는 크다. 권장 사이즈는 1200x630px.

3. 시맨틱 HTML

<!-- 나쁜 예 -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="content">
  <div class="article">...</div>
</div>

<!-- 좋은 예 -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>

검색 엔진은 시맨틱 태그로 페이지 구조를 이해한다. <article>, <nav>, <main>, <aside>, <section> 등을 적절히 사용하면 크롤러가 콘텐츠를 더 잘 파악한다.

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

검색 결과에 별점, 가격, FAQ 등 리치 스니펫을 표시하려면 구조화 데이터가 필요하다.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Karnel Labs",
  "url": "https://karnellabs.com",
  "logo": "https://karnellabs.com/images/logo.png",
  "contactPoint": {
    "@type": "ContactPoint",
    "email": "contact@karnellabs.com",
    "contactType": "customer service"
  }
}
</script>

블로그 글에는 Article 타입을 사용한다:

{
  "@type": "Article",
  "headline": "Rust로 AES-256 암호화 구현하기",
  "datePublished": "2026-03-12",
  "author": {
    "@type": "Organization",
    "name": "Karnel Labs"
  }
}

Google의 리치 결과 테스트 도구로 구조화 데이터가 올바른지 검증할 수 있다.

5. 사이트맵과 robots.txt

<!-- sitemap.xml -->
<urlset>
  <url>
    <loc>https://karnellabs.com/</loc>
    <lastmod>2026-03-30</lastmod>
  </url>
</urlset>

# robots.txt
User-agent: *
Allow: /
Sitemap: https://karnellabs.com/sitemap-index.xml

사이트맵은 크롤러에게 “이 페이지들을 수집해달라”는 목록이다. Astro의 @astrojs/sitemap 플러그인이 자동 생성한다.

6. 성능과 Core Web Vitals

Google은 성능을 랭킹 요소로 사용한다. Core Web Vitals 세 가지:

LCP (Largest Contentful Paint): 주요 콘텐츠 로딩 속도. 2.5초 이내
INP (Interaction to Next Paint): 인터랙션 반응 속도. 200ms 이내
CLS (Cumulative Layout Shift): 레이아웃 흔들림. 0.1 이하

Astro 같은 정적 사이트 생성기는 JavaScript가 적으므로 LCP와 INP에서 유리하다. 이미지에 width와 height를 명시하면 CLS도 잡힌다.

7. 체크리스트

정리

SEO는 마케터만의 영역이 아니다. 메타 태그, 시맨틱 HTML, 구조화 데이터, 성능 최적화는 모두 개발자가 코드로 제어하는 영역이다. 이 기본기를 갖추면 특별한 SEO 도구 없이도 검색 노출을 확보할 수 있다.