"디자인은 멀쩡한데 왜 검색이 안 되죠?"
상담 들어오는 사이트 중 절반은 화면으로 보면 아무 문제가 없습니다. 색감도 좋고, 메뉴도 정돈돼 있고, 모바일에서도 잘 보입니다. 그런데 검색엔진 눈에는 전혀 다른 모습입니다. 사람은 디자인을 보지만, 구글은 디자인을 못 봅니다. 구글이 보는 건 HTML 태그 한 덩어리입니다.
"SEO에서 HTML 태그 구조가 중요한 이유는, 검색엔진이 페이지의 시각적 디자인이 아니라 태그가 표시하는 의미 구조를 읽어서 내용을 이해하기 때문이다." — 야무진SEO
이 한 문장이 오늘 글의 전부입니다. 사람은 폰트 크기와 굵기로 "이게 제목이구나" 알아채지만, 크롤러는 글자가 커서가 아니라 <h1> 태그로 감싸여 있어서 제목으로 인식합니다. 디자인으로 제목처럼 꾸민 글자와, 태그로 제목이라고 선언한 글자는 검색엔진에게 완전히 다릅니다.
검색엔진은 화면이 아니라 코드를 읽는다
우선 크롤러가 페이지를 어떻게 처리하는지부터 짚겠습니다. 구글봇은 브라우저처럼 페이지에 접속하지만, 사람처럼 "예쁘다, 못생겼다"를 판단하지 않습니다. HTML 소스를 위에서 아래로 훑으면서 태그의 의미를 수집합니다.
이때 핵심은 태그가 곧 의미라는 점입니다. <h1>은 "이 페이지의 대표 제목", <nav>는 "여기는 메뉴 영역", <article>은 "여기가 본문 콘텐츠"라고 검색엔진에게 알려주는 표지판입니다. 표지판이 없으면 크롤러는 그냥 글자 더미를 만나게 됩니다.
저도 처음엔 이걸 몰랐습니다. 사진작가 출신으로 코딩을 모른 채 첫 사이트를 만들었을 때, 모든 제목을 <div>에 글자만 키워서 넣었습니다. 화면으로는 완벽한 제목이었죠. 그런데 검색엔진은 그 페이지에 제목이 하나도 없다고 판단했습니다. 디자인과 의미가 따로 놀았던 겁니다.
"디자인으로 제목처럼 보이게 만드는 것과, 태그로 제목이라고 선언하는 것은 다르다. 크롤러는 후자만 인정한다." — 야무진SEO
시맨틱 HTML — 의미가 담긴 태그를 쓴다
시맨틱(semantic) HTML이란 "의미를 가진 태그"로 페이지를 짜는 방식입니다. 그냥 <div>로 다 감싸는 게 아니라, 역할에 맞는 태그를 골라 쓰는 것입니다.
검색엔진이 좋아하는 구조 태그는 정해져 있습니다.
<header>— 페이지 상단 영역(로고, 사이트 제목)<nav>— 메뉴, 내비게이션 링크<main>— 이 페이지의 핵심 콘텐츠 영역(페이지당 1개)<article>— 독립적으로 완결되는 콘텐츠(블로그 글 본문)<section>— 주제별로 묶이는 구획<aside>— 본문과 분리된 보조 정보(사이드바)<footer>— 페이지 하단 영역(저작권, 연락처)
이 태그들을 제대로 쓰면, 크롤러는 "여기가 메뉴고, 여기가 본문이고, 여기는 부수적인 영역"이라는 걸 코드만 보고도 구분합니다. 본문이 어디인지 명확하면, 검색엔진은 메뉴나 사이드바의 잡다한 텍스트가 아니라 진짜 콘텐츠를 기준으로 페이지 주제를 판단합니다.
반대로 페이지 전체를 <div class="wrapper"> 안에 <div>만 수십 개 중첩하면, 크롤러 입장에서는 어디가 본문인지 단서가 없습니다. 화면으로는 똑같이 보여도, 검색엔진의 이해도는 크게 떨어집니다.
헤딩 태그(h1~h6) — 글의 목차이자 뼈대
헤딩 태그는 h1부터 h6까지 6단계로, 페이지 내용의 계층 구조를 나타냅니다. 책으로 치면 대제목·중제목·소제목입니다.
규칙은 단순합니다.
- h1은 페이지당 1개 — 그 페이지가 무엇에 관한 것인지 알려주는 대표 제목
- 계층을 건너뛰지 않는다 — h1 다음엔 h2, h2 다음엔 h3 순서로
- 디자인이 아니라 구조로 쓴다 — 글자를 키우고 싶어서 h2를 쓰면 안 된다
헤딩이 잘 짜인 페이지는 목차만 뽑아도 글의 흐름이 보입니다. 크롤러도 똑같이 헤딩만 따라가며 "이 글이 무슨 순서로 무엇을 다루는가"를 파악합니다. 헤딩은 검색엔진이 페이지를 빠르게 스캔하는 지도인 셈입니다.
경쟁사가 잘 안 다루는 빈틈 — h1 중복과 누락 실수
여기서 실무에서 자주 터지는 문제 두 가지를 짚겠습니다. 다른 SEO 글들은 "h1은 하나만"이라고만 하고 넘어가는데, 정작 사장님들이 만나는 건 그 반대 상황입니다.
첫째, h1이 여러 개인 경우. 워드프레스나 페이지 빌더로 만든 사이트에서 흔합니다. 로고가 h1으로 잡혀 있고, 글 제목도 h1, 위젯 제목도 h1 — 이렇게 h1이 3~4개가 됩니다. 크롤러 입장에서는 "이 페이지의 대표 주제가 도대체 뭐냐"가 흐려집니다.
둘째, h1이 아예 없는 경우. 디자인 템플릿에서 제목을 모두 <div>나 <span>으로 처리한 사이트입니다. 화면엔 큼직한 제목이 보이지만, 코드상으로는 h1이 0개입니다. 검색엔진이 보기엔 "제목 없는 페이지"입니다.
제가 진단한 한 인테리어 업체 사이트는 메인 페이지에 h1이 0개, 서브 페이지마다 h1이 2~3개씩 섞여 있었습니다. 헤딩만 정리하고 시맨틱 구조를 잡아주자, 크롤러가 페이지 주제를 다시 잡으면서 색인 상태가 안정됐습니다. 코드 한 줄 추가가 아니라 태그의 역할을 정리한 것뿐인데 말이죠.
title과 meta — 검색 결과에 보이는 얼굴
<title> 태그는 검색 결과(SERP)에 파란 글씨로 표시되는 페이지 제목입니다. 브라우저 탭에 뜨는 그 글자이기도 합니다. 페이지마다 고유해야 하고, 핵심 키워드를 앞쪽에 두는 게 좋습니다.
<meta name="description">는 검색 결과에서 제목 아래 회색으로 보이는 요약문입니다. 구글이 그대로 쓰지 않을 때도 있지만, 클릭률(CTR)에 직접 영향을 주는 요소입니다. 150~160자 안에서 페이지의 핵심과 클릭할 이유를 담습니다.
흔한 실수는 모든 페이지의 title과 description이 똑같은 경우입니다. 페이지 빌더 기본값을 그대로 두면 사이트 전체가 같은 제목으로 색인됩니다. 검색엔진은 "이 사이트는 페이지마다 다른 내용인데 왜 제목이 다 같지?" 하고 중복으로 처리합니다.
한 가지 더. <meta name="keywords">는 지금은 거의 의미가 없습니다. 과거 남용으로 구글이 사실상 무시합니다. 여기에 키워드를 잔뜩 넣는 데 시간 쓰지 말고, title과 description에 집중하는 편이 낫습니다.
alt 속성 — 검색엔진은 이미지를 못 본다
이미지에 붙이는 alt 속성은 "이 그림이 무엇인지" 글로 설명하는 텍스트입니다. 검색엔진은 사진을 눈으로 보지 못하므로, alt 텍스트가 없으면 그 이미지가 뭔지 알 길이 없습니다.
<img src="cafe-interior.jpg" alt="강남구 한 카페의 우드톤 인테리어 내부">
alt를 제대로 쓰면 두 가지 이득이 있습니다. 첫째, 이미지 검색에 노출될 기회가 생깁니다. 둘째, 시각장애인이 화면 읽기 프로그램으로 사이트를 이용할 때 그 설명을 읽어줍니다. 접근성과 SEO가 같은 방향을 봅니다.
다만 alt에 키워드를 욱여넣는 건 역효과입니다. "SEO 홈페이지 제작 강남 SEO 대행 저렴한 SEO" 같은 식으로 채우면 스팸 신호로 읽힙니다. 사진에 실제로 보이는 것을 자연스럽게 묘사하는 게 정답입니다.
CSS와 렌더링 성능 — 디자인이 속도를 갉아먹을 때
CSS는 페이지의 디자인을 입히는 언어입니다. SEO와 직접 관련 없어 보이지만, CSS를 어떻게 불러오느냐가 페이지 속도를 좌우하고, 속도는 구글의 명확한 순위 신호입니다.
핵심 개념 하나만 기억하면 됩니다. 렌더링 차단(render-blocking)입니다. 브라우저는 CSS를 다 읽기 전까지 화면을 그리지 않고 기다립니다. CSS 파일이 무겁거나 여러 개면, 사용자는 흰 화면을 더 오래 봐야 합니다. 첫 화면이 뜨는 시간(FCP)이 늦어지고, 그게 점수로 이어집니다.
그래서 실무에서는 첫 화면에 꼭 필요한 CSS만 HTML 안에 인라인으로 넣고, 나머지 CSS는 비동기로 나중에 불러옵니다. 이렇게 하면 화면이 먼저 뜨고 스타일이 뒤따라 입혀집니다. 야무진SEO가 운영하는 사이트들도 이 방식으로 페이지 속도 점수를 높게 유지하고 있습니다.
CSS 전처리기(Sass, LESS 같은 도구)나 화려한 애니메이션은 개발 편의나 디자인에는 도움이 되지만, 그 자체가 검색 순위를 올려주지는 않습니다. 중요한 건 결과물이 가볍고 빠르게 뜨느냐입니다. 도구가 아무리 좋아도 최종 CSS가 무거우면 속도에서 손해를 봅니다.
사장님이 직접 점검하는 법 — 개발자도구 30초 점검
여기가 다른 글들이 안 알려주는 부분입니다. 코딩을 몰라도, 브라우저 하나로 우리 사이트 태그 구조를 직접 확인할 수 있습니다.
1단계 — 페이지 소스 보기. 우리 사이트에서 마우스 우클릭 → "페이지 소스 보기"를 누릅니다. 새 탭에 HTML 코드가 뜹니다. 여기서 Ctrl+F로 <h1을 검색해보세요. 몇 개가 나오나요? 0개거나 2개 이상이면 손볼 곳입니다.
2단계 — 개발자도구로 태그 확인. 점검하고 싶은 제목 위에서 우클릭 → "검사"를 누르면 개발자도구가 열리면서 그 글자가 어떤 태그인지 보입니다. <h1>이면 정상, <div>나 <span>이면 디자인만 제목인 가짜 제목입니다.
3단계 — title과 description 확인. 소스 보기 화면에서 Ctrl+F로 <title과 name="description"을 검색합니다. 페이지마다 다른 내용이 들어 있는지, 비어 있지는 않은지 봅니다.
4단계 — 이미지 alt 확인. 소스에서 <img를 검색해 alt가 비어 있는 이미지가 얼마나 되는지 셉니다.
이 30초 점검만 해도 우리 사이트의 기본 태그 위생 상태가 보입니다. 더 자세한 항목은 온페이지 SEO 체크리스트에 정리해 뒀으니 함께 보시면 좋습니다.
태그 구조가 잡히면 그다음은 구조화 데이터
기본 태그가 정리됐다면, 한 단계 더 나아갈 수 있습니다. 구조화 데이터(스키마)는 검색엔진에게 "이건 회사 정보, 이건 후기, 이건 FAQ"라고 더 정밀하게 알려주는 표시입니다. 시맨틱 HTML이 큰 틀의 의미라면, 구조화 데이터는 세부 의미를 붙이는 작업입니다.
순서가 중요합니다. h1도 없고 본문 영역도 불분명한 사이트에 구조화 데이터부터 붙이는 건 기초 공사 없이 인테리어부터 하는 격입니다. 태그 위생 → 시맨틱 구조 → 구조화 데이터, 이 순서로 쌓아야 합니다. 전체 그림은 기술 SEO 기초에서 더 다룹니다.
자주 묻는 질문 (FAQ)
코딩을 전혀 모르는데 태그를 직접 고칠 수 있나요?
태그를 직접 수정하려면 약간의 HTML 지식이 필요합니다. 다만 위에서 설명한 개발자도구 점검은 코딩 없이 누구나 할 수 있습니다. 어디가 문제인지 파악한 뒤, 페이지 빌더의 헤딩 설정을 바꾸거나 제작사에 정확히 요청하면 됩니다. "제목이 div로 돼 있으니 h1으로 바꿔달라"는 요청만으로도 절반은 해결됩니다.
h1을 페이지마다 하나만 쓰라는데, 로고도 h1이면 안 되나요?
로고는 보통 <header> 안에 두되 h1으로 감싸지 않는 것이 좋습니다. h1은 그 페이지의 콘텐츠 주제를 나타내는 제목에 써야 합니다. 메인 페이지라면 사이트의 핵심 서비스를, 블로그 글이라면 글 제목을 h1으로 두는 게 자연스럽습니다.
디자인이 예쁜 사이트가 SEO에도 유리한가요?
디자인과 SEO는 별개입니다. 화면이 예뻐도 태그 구조가 엉망이면 검색엔진은 내용을 이해하지 못합니다. 반대로 디자인이 단순해도 시맨틱 구조가 탄탄하면 잘 색인됩니다. 중요한 건 보이는 화면이 아니라 그 아래 깔린 코드의 의미 구조입니다.
CSS 애니메이션을 많이 넣으면 SEO에 안 좋나요?
애니메이션 자체가 감점은 아닙니다. 다만 무거운 애니메이션과 CSS가 페이지 로딩을 늦추면 속도 점수가 떨어지고, 속도는 순위에 영향을 줍니다. 합성 가능한 속성(transform, opacity) 위주로 가볍게 구현하는 게 핵심입니다.
메타 키워드 태그는 지금도 넣어야 하나요?
넣어도 손해는 없지만 효과는 거의 없습니다. 구글은 메타 키워드를 사실상 무시합니다. 그 시간에 title과 description, 그리고 본문 콘텐츠의 질을 높이는 편이 훨씬 효율적입니다.
HTML 태그는 검색엔진과 우리 사이트가 대화하는 언어입니다. 디자인이 아무리 좋아도 이 언어가 어긋나 있으면 검색엔진은 우리가 무슨 말을 하는지 못 알아듣습니다. 반대로 태그 구조만 제대로 잡아도, 새 콘텐츠를 잔뜩 추가하기 전에 이미 절반은 정리됩니다.
오늘 당장 우리 사이트에서 "페이지 소스 보기"를 눌러 <h1을 검색해보세요. 개수가 0개거나 2개 이상이면, 거기서부터 시작하면 됩니다. 만약 직접 점검해보니 손볼 곳이 많아 막막하다면, 무료 SEO 진단을 신청해주세요. h1 누락·중복부터 메타 태그, 시맨틱 구조까지 어디를 어떤 순서로 고치면 되는지 구체적으로 짚어 드립니다.