제17편: HTML-검색 엔진을 홀리는 마법

지난 16편에서 플렉스(Flexbox)를 통해 블로그의 뼈대를 유연하게 배치하는 법을 배웠죠? 이제 디자인은 어느 정도 갖춰졌습니다. 하지만 구글 검색 로봇(크롤러)은 여러분의 블로그를 볼 때 '디자인'보다 '의미'를 더 중요하게 생각합니다.

"여기가 제목이고, 여기가 본문이며, 여기가 꼬리말이다"라고 로봇에게 명확히 알려주는 기술, 바로 [시맨틱(Semantic) 태그]를 정복해 봅시다.

[시맨틱 태그란 무엇인가요?]

시맨틱(Semantic)은 '의미론적인'이라는 뜻입니다. 지금까지 우리는 구역을 나눌 때 모두 <div> 태그를 썼죠? 하지만 구글 로봇 입장에서 <div>는 그냥 '아무 의미 없는 상자'일 뿐입니다.

시맨틱 태그는 그 상자에 '이름표'를 붙여주는 것입니다.

"이 상자는 머리말(Header)이야!"
"이 상자는 본문(Main)이야!"
"이 상자는 꼬리말(Footer)이야!"

[꼭 알아야 할 주요 시맨틱 태그]

다음 태그들을 기억하고 본문 구조를 짜보세요. 구글이 여러분의 블로그를 훨씬 더 똑똑하게 이해합니다.

<header>: 페이지의 맨 위, 로고나 제목이 들어가는 곳입니다.
<nav>: 메뉴(Navigation) 링크들이 모여 있는 곳입니다.
<main>: 블로그의 핵심 내용(글 본문)이 들어가는 곳입니다. (페이지당 한 번만 사용!)
<section>: 주제별로 글을 묶는 구역입니다.
<article>: 독자가 독립적으로 읽을 수 있는 콘텐츠(블로그 포스팅 본문 등)입니다.
<footer>: 페이지 맨 아래, 저작권 정보나 연락처가 들어가는 곳입니다.

[실전 연습: 시맨틱 구조로 바꾸기]

기존에 썼던 <div>들을 시맨틱 태그로 바꾸기만 하면 됩니다. 정말 쉽죠?

HTML
<header>
  <h1>이코노트허브 블로그</h1>
  <nav>메뉴1 | 메뉴2 | 메뉴3</nav>
</header>

<main>
  <article>
    <h2>오늘의 맛집 리뷰</h2>
    <p>본문 내용이 들어갑니다...</p>
  </article>
</main>

<footer>
  <p>&copy; 2026 에코노트허브. All rights reserved.</p>
</footer>

[시맨틱 태그 활용 전략]

SEO(검색 엔진 최적화)의 기초: 구글은 시맨틱 태그를 잘 쓴 블로그를 '잘 정리된 문서'로 인식합니다. 이것만 잘해도 검색 결과 상단에 노출될 확률이 높아집니다.
구글 로봇의 업무 효율: 로봇이 내 사이트에서 어떤 정보가 중요한지 쉽게 파악하게 하세요. <main> 태그 안에 본문을 넣으면, 로봇은 바로 "아, 여기가 핵심이구나!"하고 잽싸게 데이터를 가져갑니다.
접근성 향상: 시각장애인을 위한 스크린 리더 프로그램도 시맨틱 태그를 읽고 "여기가 헤더구나"라고 알려줍니다. 구글은 이런 '사용자 친화적'인 사이트를 매우 좋아합니다.

[이코노트허브의 조언]

처음에는 <div>와 시맨틱 태그를 구분해서 쓰는 게 낯설 수 있습니다. 하지만 한 번 습관을 들이면 나중에 수익형 블로그를 키울 때 "검색 노출이 왜 이렇게 잘 되지?" 하고 놀라실 겁니다. 좋은 구조가 좋은 수익을 만듭니다.

핵심 요약

의미의 힘: <div>는 의미 없는 상자, 시맨틱 태그는 의미 있는 이름표입니다.
핵심 구조: <header>, <main>, <footer>만 잘 사용해도 절반은 성공입니다.
검색 결과 향상: 시맨틱 태그는 구글 로봇에게 "내 블로그를 이렇게 해석해 줘!"라고 알려주는 가이드라인입니다.
단순함: 구조가 명확할수록 구글은 여러분의 블로그를 신뢰합니다.

다음 편 예고: 다음시간에는 반응형 웹을 위한 HTML5 기초 지식에 대해 알아 보도록 하겠습니다.

여러분의 블로그 글 본문을 <article> 태그로 감싼다고 생각해보셨나요? 오늘 배운 태그 중 여러분의 블로그 구조에 가장 먼저 적용하고 싶은 태그는 무엇인가요?

제17편: HTML-검색 엔진을 홀리는 마법 - 시맨틱(Semantic) 태그