[검색 엔진 최적화 (SEO)] 검색에 잘 노출되는 사이트란?

728x90

검색 엔진 최적화 (SEO) 

SEO는 더 이상 마케터만의 영역이 아닙니다. SPA(싱글 페이지 애플리케이션), 정적 사이트, 서버 사이드 렌더링 등 다양한 기술이 사용되는 현대 웹에서는 개발자의 코드 설계가 SEO에 직접적인 영향을 미칩니다.

이 글에서는 웹 개발자가 직접 고려하고 구현할 수 있는 기술 중심의 SEO 전략을 소개합니다.

 

---

1.  SEO란 무엇인가?

SEO(Search Engine Optimization)는 검색엔진(주로 Google, Bing 등)이 웹사이트를 더 잘 이해하고, 검색 결과 상단에 노출되도록 만드는 모든 기술적·콘텐츠적 작업입니다.

 

---

2.  개발자가 알아야 할 SEO 핵심 영역

a.  HTML 마크업 구조화 (Semantic HTML)

검색엔진은 HTML을 통해 페이지 구조를 파악합니다. 의미 있는 태그를 사용하면 크롤러가 콘텐츠를 더 잘 이해합니다.

<header>
  <nav>...</nav>
</header>

<main>
  <h1>OAuth란 무엇인가?</h1>
  <article>
    <h2>OAuth와 인증의 차이</h2>
    <p>...</p>
  </article>
</main>

<footer>...</footer>

• <div id="title"> → 검색엔진은 이것이 제목인지 모름
• <h1>, <article>, <section> 사용으로 의미 구조 강화

b.  문서의 메타 정보 명확히 정의

<title>여기는 제목입니다.</title>
<meta name="description" content="여기는 내용입니다.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/oauth-vs-login" />

• title, description은 검색 결과에 직접 노출
• canonical은 중복 콘텐츠가 있는 경우 원본 URL 명시

c.  접근성과 SEO를 함께 고려한 이미지 처리

<img src="/images/my-diagram.png" alt="나만의 다이어그램" />

• alt 속성은 이미지의 대체 텍스트이자 SEO 키워드 대상
• 시각장애인을 위한 접근성까지 고려 가능

d.  페이지 URL 구조 설계

사람과 봇 모두 이해하기 쉬운 URL이 좋습니다.

❌ 나쁜 예	✅ 좋은 예
/page?id=123	/oauth/what-is-oauth
/blog/post/5432	/blog/oauth-vs-openid

• 슬래시 구분 구조 (/카테고리/글) 유지
• 하이픈(-)으로 단어 구분

e.   라우팅 방식과 SEO

SPA(Single Page Application)의 SEO 문제

• 클라이언트 사이드 렌더링(CSR) 방식의 SPA는 초기 HTML에 콘텐츠가 없음
• 검색 엔진이 콘텐츠를 제대로 읽지 못함 (특히 구글 외의 엔진)

해결 방법

방법	설명
SSR (서버 사이드 렌더링)	초기 요청 시 HTML을 서버에서 렌더링 (예: Next.js)
SSG (정적 사이트 생성)	빌드 타임에 HTML을 생성 (예: Astro, Gatsby)
프리렌더링 도구 사용	Puppeteer 등으로 HTML snapshot 제공
meta 태그 & fallback	<noscript> 사용, SEO-friendly fallback 삽입

f.  robots.txt와 sitemap.xml 제공

/robots.txt

User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xml

 

sitemap.xml

<url>
  <loc>https://example.com/oauth-vs-openid</loc>
  <lastmod>2025-04-01</lastmod>
</url>

• robots.txt → 크롤링 허용/제한 지정
• sitemap.xml → 크롤러가 사이트 전체 구조 파악 가능

g.  Lighthouse로 SEO 진단

Chrome DevTools의 Lighthouse 탭에서 SEO 성능을 확인할 수 있습니다.

• <meta> 태그 누락 여부
• 시맨틱 태그 사용 여부
• 접근성, 퍼포먼스 점수 등

h.  웹 성능 최적화는 곧 SEO 최적화

항목	설명
First Contentful Paint	페이지 첫 렌더 속도
Time to Interactive	페이지 반응 가능 시점
이미지 Lazy Load	<img loading="lazy">
JS/파일 최적화	코드 분할, gzip, CDN 활용 등

• Google은 웹의 성능도 랭킹 요소로 봅니다.

 

---

3.  마무리

개발자가 챙겨야 할 SEO 체크리스트

항목	설명
시맨틱 마크업	<h1>~<h3>, <main>, <article> 등 사용
메타 태그	title, description, canonical 등 명확히 정의
URL 구조	의미 있는 경로 + 하이픈 사용
이미지	alt 텍스트 포함
렌더링 방식	CSR → SSR/SSG로 개선
sitemap.xml	자동 생성 도구로 제공
성능 최적화	Lighthouse 기준으로 점검

함께 보면 좋은 자료

외부 사이트 :

• MDN Web Docs - SEO (검색 엔진 최적화)

 

---