Web
개발자가 알아야 할 SEO 기초
검색 엔진 최적화의 기술적인 측면을 알아봅니다. 메타 태그, 구조화된 데이터, 성능 최적화 등을 다룹니다.
SEO(Search Engine Optimization)는 검색 엔진에서 사이트가 잘 노출되도록 하는 작업입니다. 마케팅 영역이라고 생각할 수 있지만, 기술적인 부분이 중요합니다.
기본 메타 태그
<head>
<title>페이지 제목 | 사이트명</title>
<meta name="description" content="페이지를 설명하는 150자 내외의 문장">
<meta name="keywords" content="키워드1, 키워드2"> <!-- 현재는 거의 무시됨 -->
<link rel="canonical" href="https://example.com/page"> <!-- 대표 URL -->
</head>
제목 작성 팁
<!-- 좋은 예 -->
<title>React Hooks 완벽 가이드 - useState, useEffect 사용법 | MyBlog</title>
<!-- 나쁜 예 -->
<title>홈페이지</title>
<title>페이지</title>
제목은 50-60자 이내로, 핵심 키워드를 앞에 배치합니다.
Open Graph 태그
SNS에서 공유될 때 표시되는 정보입니다.
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">
<meta property="og:site_name" content="사이트명">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="페이지 제목">
<meta name="twitter:description" content="페이지 설명">
<meta name="twitter:image" content="https://example.com/twitter-image.jpg">
시맨틱 HTML
검색 엔진은 HTML 구조를 분석합니다.
<!-- 좋은 구조 -->
<header>
<nav>...</nav>
</header>
<main>
<article>
<h1>메인 제목</h1>
<section>
<h2>섹션 제목</h2>
<p>본문 내용...</p>
</section>
</article>
<aside>관련 콘텐츠</aside>
</main>
<footer>...</footer>
제목 계층 구조
<!-- 좋은 예 -->
<h1>JavaScript 가이드</h1>
<h2>변수</h2>
<h3>let과 const</h3>
<h2>함수</h2>
<h3>화살표 함수</h3>
<!-- 나쁜 예 - 계층 건너뜀 -->
<h1>JavaScript 가이드</h1>
<h3>변수</h3> <!-- h2 없이 h3 -->
구조화된 데이터 (Schema.org)
검색 결과에 리치 스니펫으로 표시됩니다.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "React Hooks 완벽 가이드",
"author": {
"@type": "Person",
"name": "홍길동"
},
"datePublished": "2026-01-15",
"image": "https://example.com/image.jpg"
}
</script>
자주 사용하는 스키마 타입
// 블로그 포스트
{
"@type": "BlogPosting",
"headline": "...",
"author": { "@type": "Person", "name": "..." }
}
// FAQ
{
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "질문?",
"acceptedAnswer": {
"@type": "Answer",
"text": "답변"
}
}]
}
// 제품
{
"@type": "Product",
"name": "제품명",
"offers": {
"@type": "Offer",
"price": "10000",
"priceCurrency": "KRW"
}
}
사이트맵과 robots.txt
sitemap.xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://example.com/</loc>
<lastmod>2026-01-15</lastmod>
<priority>1.0</priority>
</url>
<url>
<loc>https://example.com/blog</loc>
<lastmod>2026-01-14</lastmod>
<priority>0.8</priority>
</url>
</urlset>
robots.txt
User-agent: *
Allow: /
Disallow: /admin/
Disallow: /api/
Sitemap: https://example.com/sitemap.xml
성능과 SEO
Core Web Vitals가 검색 순위에 영향을 미칩니다.
LCP (Largest Contentful Paint) - 2.5초 이내
FID (First Input Delay) - 100ms 이내
CLS (Cumulative Layout Shift) - 0.1 이하
성능 최적화 체크리스트
- 이미지 최적화 (WebP/AVIF, lazy loading)
- 코드 스플리팅
- 서버 응답 시간 단축
- 레이아웃 시프트 방지
- 크리티컬 CSS 인라인
Next.js에서 SEO
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
const post = await getPost(params.slug);
return {
title: post.title,
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
images: [post.image],
},
};
}
기술적 SEO 체크리스트
[ ] HTTPS 사용
[ ] 모바일 반응형
[ ] 빠른 로딩 속도
[ ] 404 페이지 처리
[ ] canonical URL 설정
[ ] 사이트맵 제출
[ ] robots.txt 설정
[ ] 구조화된 데이터 추가
[ ] 이미지 alt 텍스트
[ ] 내부 링크 구조
마무리
SEO는 콘텐츠의 질이 가장 중요합니다. 하지만 기술적인 부분이 제대로 되어 있지 않으면 좋은 콘텐츠도 검색 결과에 나타나지 않습니다.
개발자로서 기술적 SEO를 챙기면, 마케팅 팀과의 협업도 수월해지고 사이트의 가치도 높아집니다.