💬 들어가며
웹 개발을 하면서 자주 듣는 단어 중 하나가 SEO(Search Engine Optimization),
즉 "검색 엔진 최적화"이다.
HTML 구조를 공부하면서 개발자 입장에서 SEO는 코드 품질과 직결되는 부분이라는 걸 알게 됐다.
특히 HTML의 시맨틱 마크업, 메타데이터, 이미지 속성 같은 요소들이 SEO 점수에 큰 영향을 미친다.
이번 글에서는 HTML 관점에서 SEO가 무엇이고, 어떤 방식으로 최적할 수 있는지 정리해봤다.
🔍 SEO란 무엇인가?
SEO는 검색엔진이 웹페이지를 더 잘 이해하고 상위에 노출되도록 돕는 과정이다.
검색엔진은 사람이 보는 화면이 아니라, HTML 구조와 태그의 의미를 분석한다.
쉽게 말해,
💡 검색엔진이 이해하기 쉬운 코드를 짜는 것 = SEO의 첫걸음
이라 할 수 있다.
검색 엔진은 다음과 같은 과정을 통해 페이지를 평가한다.
- 크롤링(Crawling) – 봇이 웹페이지를 탐색하고 콘텐츠를 수집
- 인덱싱(Indexing) – 수집한 콘텐츠를 검색 데이터베이스에 저장
- 랭킹(Ranking) – 키워드, 구조, 성능 등을 기반으로 검색 순위 결정
이 과정에서 HTML 구조와 태그가 얼마나 명확한지가 중요한 판단 기준이 된다.
🏷️ HTML에서 할 수 있는 SEO 개선 방법
1️⃣ 시맨틱 마크업 사용하기
의미 없는 <div> 대신 의도를 드러내는 시맨틱 태그를 사용하는 것이 SEO의 기본이다.
<!-- ❌ Non-Semantic -->
<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
<!-- ✅ Semantic -->
<header></header>
<nav></nav>
<main>
<article></article>
</main>
<footer></footer>이렇게 작성하면 검색엔진이 “이건 헤더”, “이건 본문”, “이건 푸터”처럼
문서의 구조를 명확하게 이해할 수 있다.
프론트엔드 개발자 입장에서는 시맨틱 마크업을 단순한 HTML 구조가 아닌,
웹 접근성, 유지보수성, SEO 세 가지를 동시에 챙기는 설계 방식으로 보는 게 좋다.
React Vue 같은 SPA에서는 초기 렌더링 시점에 HTML 구조가 비어 있어
검색엔진이 페이지를 제대로 해석하지 못하는 경우가 있다.
이럴 땐, Next.js나 Nuxt 같은 SSR(Sever Side Rendering) 또는 SSG(Static Site Generation) 환경을 통해
초기 HTML을 완성된 상태로 전달하는 것이 SEO에 더 유리하다.
2️⃣ 제목 태그 계층 지키기 (<h1>~<h6>)
검색엔진은 제목 태그를 기준으로 콘텐츠의 구조를 파악한다.
하나의 페이지에는 <h1>은 1개만, 그 아래로 논리적인 순서를 유지해야 한다.
<h1>시맨틱 마크업과 SEO의 관계</h1>
<h2>시맨틱 마크업이란?</h2>
<h2>SEO에 미치는 영향</h2>이렇게 하면 "이 페이지의 주제는 시맨틱 마크업과 SEO"라는 걸 검색엔진이 명확히 이해한다.
3️⃣ 메타데이터(meta tag) 작성하기
<meta> 태그는 검색 결과의 제목과 설명에 직접 반영된다.
이 정보를 잘 작성해야 검색 결과에서 클릭률(CTR)을 높일 수 있다.
<head>
<title>HTML로 SEO 개선하는 방법</title>
<meta name="description" content="시맨틱 마크업과 메타 태그를 이용해 SEO를 개선하는 방법을 알아봅시다." />
</head>
title과description은 검색 결과에 그대로 표시되므로,
사용자 입장에서 '이 페이지가 어떤 정보인지' 한눈에 보이게 작성하는 게 중요하다.
💡 최근에는 SNS 공유 시 표시되는 Open Graph(OG) 메타태그도 중요하다.
이 태그들은 카카오톡, 인스타, 페이스북 등 에서 링크 미리보기 정보를 결정한다.
<meta property="og:title" content="시맨틱 마크업과 SEO의 관계" />
<meta property="og:description" content="검색엔진은 디자인이 아닌 구조를 읽습니다." />
<meta property="og:image" content="/images/seo-thumbnail.png" />
4️⃣ 이미지에 alt 속성 추가하기
검색엔진은 이미지를 "볼 수" 없기 때문에alt 텍스트를 통해 내용을 파악한다.
alt 속성이 없으면 접근성 점수뿐 아니라 SEO 점수도 떨어진다.
❗️
alt="image1"처럼 의미 없는 텍스트는 피해야 한다.
이미지를 설명하거나 맥락을 전달하는 문장을 작성하자.
이미지 태그에는 loading="lazy" 속성을 추가해 지연 로딩(Lazy Loading)을 적용할 수도 있다.
이렇게 하면 페이지 초기 로딩 속도가 개선되어 Core Web Vitals 중 하나인 LCP(Largest Contentful Paint) 향상에 도움이 된다.
5️⃣ 링크에 의미 있는 텍스트 사용하기
<a> 태그 안의 텍스트는 검색엔진이 "이 링크가 어디로 연결되는지" 판단하는 중요한 단서이다.
<!-- ❌ -->
<a href="/post1">여기 클릭</a>
<!-- ✅ -->
<a href="/post1">시맨틱 마크업이 SEO에 미치는 영향 보기</a>
이런 식으로 링크 자체가 내용을 설명하도록 작성하면, 검색엔진이 페이지 간의 관계를 더 정확히 인식할 수 있다.
외부 링크에는 rel="noopener noreferrer" 속성을 함께 넣어 보안상 취약점을 줄이고 성능 저하를 방지할 수 있다.
✳️ Lighthouse로 SEO 점검하기
Chrome DevTools의 Lighthouse 탭을 이용하면 개발한 웹 페이지의 SEO 점수를 쉽게 확인할 수 있다.
실행 방법
1. 브라우저에서 F12 → Lighthouse 탭 클릭
2. 카테고리 중 SEO 선택
3. “Analyze page load” 버튼 클릭
분석 결과에서 자주 뜨는 경고 예시:
- “Document does not have a meta description”
- “Image elements do not have [alt] attributes”
- “Links do not have descriptive text”
🧩 직접 테스트해본 결과
캡스톤 프로젝트로 개발했던 'AutCloud'에서 가장 핵심인 project 페이지를 Lighthouse로 테스트해봤는데, 다행히 SEO 100점에 나쁘지 않은 점수가 나왔다..!
📈 이는 Lighthouse Performance의 세부 지표를 보여주는 그래프인데,
아래 5가지 핵심 지표를 가중치로 계산한 결과이다.
| 항목 | 의미 | 상태 | 설명 |
|---|---|---|---|
| LCP (Largest Contentful Paint) | 가장 큰 콘텐츠 렌더링 시간 | ✅ 좋음 | 주요 이미지나 텍스트가 빠르게 표시되어 사용자 체감 속도 우수 |
| FCP (First Contentful Paint) | 첫 콘텐츠 렌더링 시간 | ✅ 좋음 | 초기 로딩이 빠르게 시작되어 사용자 피드백 즉시 제공 |
| TBT (Total Blocking Time) | 메인 스레드가 차단된 시간 | ✅ 좋음 | JS 처리 효율적, 사용자 입력 지연 거의 없음 |
| CLS (Cumulative Layout Shift) | 요소 위치 변동 정도 | ✅ 좋음 | 레이아웃이 안정적, 시각적 흔들림 없음 |
| SI (Speed Index) | 전체 콘텐츠가 표시되는 시각적 속도 | ⚠️ 보통 | 일부 이미지가 늦게 로딩되어 약간의 지연 발생 (lazy loading으로 개선 가능) |
💬 마무리하며
💡 웹의 힘은 보편성에 있다 - 팀 버너스리
사실 그동안 시맨틱 태그의 필요성을 알고는 있었지만, 막상 개발할 때는 <div>와 <span> 을 습관처럼 사용하곤 했다.
이번에 SEO를 공부하면서 태그 하나에도 의미를 담는 일이 결국 검색엔진과 사용자 모두를 위한 기본이라는 걸 깨달았다.
특히 장애를 가진 사용자들에게 시맨틱 구조는 웹을 이해하고 탐색할 수 있는 중요한 기반이 된다는 점이 마음에 남았다.
앞으로는 단순히 기능 구현뿐 아니라 구조적으로 의미 있는 코드, 누구나 접근할 수 있는 포용적인 웹을 만드는 걸 목표로 개발하고 싶다.
