2018년, 한 쇼핑몰 사이트의 리뉴얼 프로젝트를 맡았을 때의 일입니다. 상품은 좋은데 노출이 너무 안 돼서 폐업 위기였죠. 코드를 뜯어보니 헤더부터 푸터까지 모든 요소가 <div>로만 도배되어 있었습니다. 구글 봇에게는 그저 거대한 ‘의미 없는 덩어리’로 보였을 겁니다.
저는 3일에 걸쳐 <div>를 <header>, <main>, <article>로 바꾸는 ‘이름표 붙이기’ 작업만 했습니다. 결과는 어땠을까요? 2주 뒤 오가닉 트래픽(자연 유입)이 250% 급증했습니다. 콘텐츠 수정은 단 한 글자도 없었는데 말이죠. 오늘 알려드릴 5가지만 고쳐도, 여러분의 사이트는 검색엔진의 ‘VVIP 대접’을 받게 됩니다.
1. H1 태그의 ‘유일신’ 규칙 위반
가장 흔하고 치명적인 실수입니다. 글자 크기를 키우겠답시고 본문 중간중간에 <h1>을 쓰는 경우가 있습니다.
검색엔진에게 H1은 “이 페이지의 주제는 딱 이거 하나야!”라고 외치는 깃발입니다. 그런데 깃발이 여러 개라면? 로봇은 혼란에 빠집니다. H1은 페이지당 딱 1번만 쓰고, 소제목은 H2, H3 순서로 계층을 지켜 내려가야 합니다.
“솔직히 고백하자면, 저도 신입 시절엔 폰트 굵게 하려고 H 태그를 썼습니다. CSS 배우기 귀찮았거든요. 하지만 그건 문서의 ‘목차’를 찢어발기는 행위입니다. 디자인은 CSS에 양보하고, HTML로는 뼈대만 세우는 습관을 들이세요.”
2. <button>과 <a> 태그의 혼동
“클릭되면 다 똑같은 거 아닌가요?” 절대 아닙니다. 이 둘은 목적지가 다릅니다.
- ✅
<a>(Anchor): 다른 페이지나 URL로 이동할 때 씁니다. 검색 봇은 이 태그를 타고 사이트 곳곳을 여행(Crawl)합니다. - ✅
<button>: 팝업 열기, 제출하기 등 페이지 내에서 행동할 때 씁니다. 검색 봇은 버튼을 누르지 않습니다.
페이지 이동 링크를 <button>으로 만들면, 검색 봇에게 “여긴 막다른 길이야”라고 말하는 것과 같습니다.
3. <b>, <i> vs <strong>, <em>
눈으로 보기엔 똑같이 굵고 기울어진 글씨지만, 의미는 천지 차이입니다.
<b>와 <i>는 단순히 시각적 효과일 뿐입니다. 반면 <strong>(중요함)과 <em>(강조함)은 검색엔진에게 “이 단어는 핵심 키워드니까 신경 써서 봐줘!”라고 힌트를 주는 것입니다. SEO를 생각한다면 무조건 후자를 사용하세요.
💡 코드캠의 실전 TIP: <img> 태그의 alt 속성
많은 분들이 이미지를 넣을 때 alt=""를 비워둡니다. 이건 시각 장애인을 위한 정보일 뿐만 아니라, 구글 이미지 검색의 핵심 단서입니다. “image01.jpg” 대신 “서울-맛집-지도.jpg”라고 쓰고, alt 태그에도 “서울 강남역 맛집 지도”라고 친절하게 설명해 주세요.
4. <article>과 <section>의 모호한 경계
이 둘을 구분하는 기준은 ‘독립성’입니다.
그대로 떼어내서 다른 곳에 붙여넣어도 말이 되는 글(블로그 포스트, 뉴스 기사)이라면 <article>이 맞습니다. 반면, 서로 연관된 내용을 묶어주는 챕터 개념이라면 <section>을 쓰세요. 모든 걸 <div>로 감싸던 습관을 버리고 이 두 태그만 잘 써도 문서 구조가 훨씬 명확해집니다.
5. 시맨틱 태그는 ‘기계와의 대화’입니다
화려한 CSS와 자바스크립트는 인간을 위한 것입니다. 하지만 검색 순위를 결정하는 로봇은 오직 HTML 태그만 봅니다. 오늘 작성하신 코드에 ‘의미(Semantics)’가 담겨 있는지 확인해 보세요.
구조가 튼튼한 집은 비바람에도 무너지지 않듯, 시맨틱 태그로 지어진 웹사이트는 로직이 바뀌어도 검색 순위에서 쉽게 밀려나지 않습니다.
혹시 내 블로그나 사이트 구조가 맞는지 헷갈리시나요? HTML 소스 일부를 댓글로 남겨주시면 시맨틱 하게 교정해 드리겠습니다!
